Basic 2D graphic Transformation & Transformation Matrix Derivation

In normal times, developers are inevitably required to perform various transformations on images. Sometimes the transformation may be complicated, for example, after translation, rotation, translation, and scaling.

Using formulas directly is not only complex, but also inefficient. In this case, you can combine multiple transformations into one by using the transformation matrix and matrix multiplication. Finally, you only need to use a matrix to process each vertex once to get the desired result.

In addition, matrix multiplication is generally supported by hardware, such as a 3D Graphics Accelerator card. It processes a large number of matrix operations in 3D transformations, Which is 1000 times faster than ordinary CPUs.

Below are three basic types of 2D graphic transformations.

Translation:

Let a point move dx to the X direction, Dy to the Y direction, and [x, y] To the coordinate before the transformation, and [x, y] To the coordinate after the transformation.

Then X = x + dx; y = Y + dy;

In a matrix:

1 0 0

[X, y, 1] = [x, y, 1] [0 1 0];

DX dy 1

1 0 0

0 1 0 is the translation transformation matrix.

DX dy 1

 

Rotate:

Rotation is slightly more complex than translation:

Set the line between a point and the origin and the angle between the x-axis to B degrees. Take the origin as the center and turn degrees a counterclockwise. The length of the line between the origin and the origin is R, [x, y] is the coordinate before transformation, and [x, y] is the coordinate after transformation.

X = rcos (B); y = rsin (B );

X = rcos (a + B) = rcosacosb-rsinasinb = xcosa-ysina; (angular formula)

Y = rsin (a + B) = rsinacsb + rcosasinb = xsina + ycosa;

Represented in a matrix:

Cosa Sina 0

[X, y, 1] = [x, y, 1] [-Sina cosa 0]

0 0 1

Cosa Sina 0

-Sina cosa 0 is the Rotation Transformation Matrix.

0 0 1

 

Zoom

Set the coordinate of a certain point, which is SX times larger in the X axis, Sy times larger in the Y axis, [x, y] is the pre-transformation coordinate, and [x, y] is the post-transformation coordinate.

X = SX * X; y = Sy * Y;

It is represented in a matrix:

SX 0 0

[X, y, 1] = [x, y, 1] [0 Sy 0];

0 0 1

SX 0 0

0 Sy 0 is the zoom matrix.

0 0 1

 

There are only three types of 2D basic model views. All the complex 2D model views can be divided into the preceding three types.

For example, if a transform is first translated, corresponding to translation matrix A, then rotated, corresponding to rotation matrix B, then scaled, corresponding to scaling matrix C.

The final transformation matrix T = ABC. That is, three matricesOrder by TransformationMultiplication in turn (matrix multiplication does not meet the exchange law, so we must pay attention to the order ).

Recently, I am studying OpenGL and want to learn more about computer graphics. Next, I will write some introduction to OpenGL and tips.