Computer graphics and animation

The graph on a plane can be stored as a set of vertices on the computer. The graph can be obtained by drawing the vertices and connecting the vertices with straight lines (triangular fragments and rasterization operations in the GPU pipeline). If there are n Vertex, they are stored in a $2\times n$ matrix, the $x$ coordinates of the vertices are stored in the first row of the matrix, the $Y$ coordinates are stored in the second row, and each pair of successive vertices are connected by a straight line.

For example, to store the coordinates of a vertex at

$(0,0), (1,1),(1,-1)$

For the triangle of, store the number pairs corresponding to each vertex as a column of the matrix:

$T=\begin{bmatrix} 0 & 1 &1 & 0\\ 0& 1& -1& 0 \end{bmatrix}$

$(0,0)$ A copy of the additional vertex is stored in $T$ the last column, so that the previous vertex $(1,-1)$ can be drawn back $(0,0)$ ,

Which is along the following figure

$\begin{bmatrix} 0\\ 0 \end{bmatrix}\rightarrow \begin{bmatrix} 1\\ 1 \end{bmatrix}\rightarrow \begin{bmatrix} 1\\ -1 \end{bmatrix}\rightarrow \begin{bmatrix} 0\\ 0 \end{bmatrix}$

The trajectory is drawn as shown in the figure below:

By changing the position of the vertex and redrawing the graph, the graph can be transformed. If the transformation is linear, it is a transformation that satisfies the following two principles:

After the origin is changed, it remains at the origin
It is still a straight line after the straight line transformation

It can be achieved by matrix multiplication, such a series of transformations can get an animation.

For example, the first

Zoom in and zoom out (scaling)

For the shape

$L (\ vec {x}) = c \ vec {x}$

The linear operator, when $c> 1$ the time is enlarged, when $0<c<1$ the time is reduced, operator matrix L may be expressed as

$cE=\begin{bmatrix} c &0 \\ 0 & c \end{bmatrix}$

As shown below:

The second

Reflection

If it $L_x$ is the transformation of the vector $\ vec {x}$ about the $x$ axis symmetry, it $L_x$ satisfies the above two principles, it is a linear transformation, $L_x$ a linear operator, and can be expressed as $2\times 2$ a matrix A.

because

$\\ L_x (e_1) = e_1 \\ L_x (e_2) = - e_2$

and so

$A=\begin{bmatrix} 1 &0 \\ 0 & -1 \end{bmatrix}$

Similarly, the transformation $L_y$ of the mirror image on the y-axis is

$A=\begin{bmatrix} -1 &0 \\ 0 & 1 \end{bmatrix}$

As shown below:

The third type, rotation

Rotation

Let L be a $\theta$ transformation that rotates the vector from the initial position , which is also a linear transformation, which satisfies the above two principles. The transformation matrix is:

$A=\begin{bmatrix} cos(\theta) & -sin(\theta)\\ sin(\theta) & cos(\theta) \end{bmatrix}$

The last one, translation

Translation

$\ vec {x}$ The translation transformation of the vector is like

$L (\ vec {x}) = \ vec {x} + \ vec {\ alpha}$

$\ vec {\ alpha}$ Is a constant vector.

If $\ vec {\ alpha} \ neq \ vec {0}$ , the origin will move, so it is not a linear transformation. And cannot be expressed as $2\times 2$ a matrix. However, in computer graphics, all transformations are required to be expressed as the multiplication of matrices. Around this problem, a new coordinate system is introduced, which becomes a homogeneous coordinate. This new coordinate can express the translation as a linear transformation.

The homogeneous coordinate system is constructed by $R^2$ equating the middle vector with $R^3$ the vector whose first two coordinates are the same as the middle and the vector, and the third coordinate is 1.

$\begin{bmatrix} x_1\\ x_2 \end{bmatrix}\rightarrow \begin{bmatrix} x_1\\ x_2\\ 1 \end{bmatrix}$

When it is necessary to draw $(x_1, x_2, 1)^T$ a point represented by a homogeneous coordinate vector , simply ignore its third coordinate and draw an ordered pair $(x_1,x_2)$ .

The current transformation discussed above must now be expressed as $3\times 3$ a matrix. To this end, the $2\times 2$ matrix can be $3\times 3$ expanded by adding elements in the third row and third column of the identity matrix, for example, a $2\times 2$ magnifying matrix

$\begin{bmatrix} 3 &0 \\ 0 & 3 \end{bmatrix}$

$3\times 3$ Matrix replaced by

$\begin{bmatrix} 3 &0& 0\\ 0& 3 &0 \\ 0& 0 & 1 \end{bmatrix}$

Note:

$\begin{bmatrix} 3 &0& 0\\ 0& 3 &0 \\ 0& 0 & 1 \end{bmatrix}\begin{bmatrix} x_1\\ x_2\\ 1 \end{bmatrix}=\begin{bmatrix} 3x_1\\ 3x_2\\ 1 \end{bmatrix}$

If the transform will $R^2$ translate the vector in the vector

$\vec{a}=\begin{bmatrix} 6\\ 2 \end{bmatrix}$

Then the matrix representation of the transformation can be obtained in the homogeneous coordinate system by simply replacing the $\ vec {\ alpha}$ elements $3\times 3$ in the third column of the two rows of the matrix with elements . That is

$A\vec{x}=\begin{bmatrix} 1 &0& 6\\ 0& 1 &2 \\ 0& 0 & 1 \end{bmatrix}\begin{bmatrix} x_1\\ x_2\\ 1 \end{bmatrix} = \begin{bmatrix} x_1 + 6\\ x_2 + 2\\ 1 \end{bmatrix}$

Here is a comprehensive rendering. The shear transformation in G2D design is actually a linear space transformation:

end