# Class AffineTransform

Specifies an immutable 2D affine transform.

The affine transform of a point `(x, y)` is given by:

``````[  m11  m21  dx  ] [ x ]   [ m11 x + m21 y + dx ][  m12  m22  dy  ] [ y ] = [ m12 x + m22 y + dy ][   0    0    1  ] [ 1 ]   [          1         ]
``````

``````[ cos(theta)  -sin(theta)   0 ][ sin(theta)   cos(theta)   0 ][     0            0        1 ]
``````

Scale:

``````[  sx   0    0  ][  0   sy    0  ][  0    0    1  ]
``````

Translate:

``````[  1    0   dx  ][  0    1   dy  ][  0    0    1  ]
``````

Below are examples of specifying an AffineTransform with DisplayShape.setImageAT. The example images were generated by altering the application DoublePendulum2App.

## Properties

IDENTITY: AffineTransform = ...

The identity AffineTransform, which leaves a point unchanged when it is applied.

## Methods

• Multiplies the affine transform of the given context with this AffineTransform.

#### Parameters

• ##### context: CanvasRenderingContext2D

the canvas context to modify

#### Returns void

• Right-multiply this AffineTransform by the given AffineTransform. This has the effect that the given AffineTransform will be applied to the input vector before the current AffineTransform.

Concatenating a transform A to transform B is equivalent to matrix multiplication of the two transforms. Note that order matters: matrices are applied in right to left order when transforming a vector

``````A B vector = A * (B * vector)
``````

We can think of the B matrix being applied first, then the A matrix. This method returns the product with the input `at` matrix on the right

``````this * at
``````

The mathematics is as follows: this matrix is on the left, the other `at` matrix is on the right:

``````[  m11  m21  dx  ]  [  a11  a21  ax  ]
[  m12  m22  dy  ]  [  a12  a22  ay  ]
[   0    0    1  ]  [   0    0   1   ]
``````

Result is:

``````[ (m11*a11 + m21*a12)  (m11*a21 + m21*a22)  (m11*ax + m21*ay + dx) ]
[ (m12*a11 + m22*a12)  (m12*a21 + m22*a22)  (m12*ax + m22*ay + dy) ]
[          0                    0                   1              ]
``````

#### Parameters

• ##### at: AffineTransform

the AffineTransform matrix to right-multiply this AffineTransform matrix by

#### Returns AffineTransform

the product of this AffineTransform matrix right-multiplied by the `at` AffineTransform matrix

• Draw a line to the transformed point.

#### Parameters

• ##### x: number

horizontal coordinate

• ##### y: number

vertical coordinate

• ##### context: CanvasRenderingContext2D

the canvas context to modify

#### Returns void

• Sets current position in context to the transformed point.

#### Parameters

• ##### x: number

horizontal coordinate

• ##### y: number

vertical coordinate

• ##### context: CanvasRenderingContext2D

the canvas context to modify

#### Returns void

• Concatenates a rotation transformation to this AffineTransform.

The mathematics is as follows: this matrix is on the left, the rotation matrix is on the right, and the angle is represented by `t`

``````[  m11  m21  dx  ]  [ cos(t)  -sin(t)   0 ]
[  m12  m22  dy  ]  [ sin(t)   cos(t)   0 ]
[   0    0    1  ]  [  0        0       1 ]
``````

Result is:

``````[  (m11*cos(t) + m21*sin(t))  (-m11*sin(t) + m21*cos(t))  0  ]
[  (m12*cos(t) + m22*sin(t))  (-m12*sin(t) + m22*cos(t))  0  ]
[              0                          0               1  ]
``````

#### Parameters

• ##### angle: number

angle in radians to; positive angle rotates clockwise.

#### Returns AffineTransform

a new AffineTransform equal to this AffineTransform rotated by the given angle

• Concatenates a scaling transformation to this AffineTransform.

The mathematics is as follows: this matrix is on the left, the scaling matrix is on the right:

``````[  m11  m21  dx  ]  [  x   0   0  ]
[  m12  m22  dy  ]  [  0   y   0  ]
[   0    0    1  ]  [  0   0   1  ]
``````

Result is:

``````[  m11*x  m21*y  dx  ]
[  m12*x  m22*y  dy  ]
[   0      0      1  ]
``````

#### Parameters

• ##### x: number

factor to scale by in horizontal direction

• ##### y: number

factor to scale by in vertical direction

#### Returns AffineTransform

a new AffineTransform equal to this AffineTransform scaled by the given x and y factors

• Set the affine transform of the given context to match this AffineTransform.

#### Parameters

• ##### context: CanvasRenderingContext2D

the canvas context to modify

#### Returns void

• Apply this transform to the given point, returning the transformation of the given point.

The mathematics is as follows:

``````[  m11  m21  dx  ]  [ x ]
[  m12  m22  dy  ]  [ y ]
[   0    0    1  ]  [ 1 ]
``````

Result is:

``````[ m11 x + m21 y + dx ]
[ m12 x + m22 y + dy ]
[          1         ]
``````

#### Parameters

• ##### x: number | GenericVector

the x coordinate or Vector containing both x and y

• ##### `Optional`y: number

the y coordinate (or undefined if a vector was passed for x)

#### Returns Vector

the transformation of the given point.

#### Throws

if x is not a GenericVector, or x, y are not numbers

• Concatenates a translation to this AffineTransform.

The mathematics is as follows: this matrix is on the left, the scaling matrix is on the right:

``````[  m11  m21  dx  ]  [  1    0   x  ]
[  m12  m22  dy  ]  [  0    1   y  ]
[   0    0    1  ]  [  0    0   1  ]
``````

Result is:

``````[ m11  m21  (m11*x + m21*y + dx) ]
[ m12  m22  (m12*x + m22*y + dy) ]
[ 0    0            1            ]
``````

#### Parameters

• ##### x: number | GenericVector

the x coordinate or vector

• ##### `Optional`y: number

the y coordinate (or undefined if a vector was passed for x)

#### Returns AffineTransform

a new AffineTransform equal to this AffineTransform translated by the given amount

#### Throws

if x is not a GenericVector, or x, y are not numbers

Generated using TypeDoc