Examples in 2D computer graphics Transformation matrix
1 examples in 2d computer graphics
1.1 stretching
1.2 rotation
1.3 shearing
1.4 reflection
1.5 orthogonal projection
examples in 2d computer graphics
most common geometric transformations keep origin fixed linear, including rotation, scaling, shearing, reflection, , orthogonal projection; if affine transformation not pure translation keeps point fixed, , point can chosen origin make transformation linear. in 2 dimensions, linear transformations can represented using 2×2 transformation matrix.
stretching
a stretch in xy-plane linear transformation enlarges distances in particular direction constant factor not affect distances in perpendicular direction. consider stretches along x-axis , y-axis. stretch along x-axis has form x = kx; y = y positive constant k. (note if k > 1, “stretch”; if k < 1, technically “compression”, still call stretch. also, if k=1, transformation identity, i.e. has no effect.)
the matrix associated stretch factor k along x-axis given by:
[
k
0
0
1
]
{\displaystyle {\begin{bmatrix}k&0\\0&1\end{bmatrix}}}
similarly, stretch factor k along y-axis has form x = x; y = ky, matrix associated transformation is
[
1
0
0
k
]
{\displaystyle {\begin{bmatrix}1&0\\0&k\end{bmatrix}}}
rotation
for rotation angle θ counter-clockwise origin functional form
x
′
=
x
cos
θ
−
y
sin
θ
{\displaystyle x =x\cos \theta -y\sin \theta }
,
y
′
=
x
sin
θ
+
y
cos
θ
{\displaystyle y =x\sin \theta +y\cos \theta }
. written in matrix form, becomes:
[
x
′
y
′
]
=
[
cos
θ
−
sin
θ
sin
θ
cos
θ
]
[
x
y
]
{\displaystyle {\begin{bmatrix}x \\y \end{bmatrix}}={\begin{bmatrix}\cos \theta &-\sin \theta \\\sin \theta &\cos \theta \end{bmatrix}}{\begin{bmatrix}x\\y\end{bmatrix}}}
similarly, rotation clockwise origin, functional form
x
′
=
x
cos
θ
+
y
sin
θ
{\displaystyle x =x\cos \theta +y\sin \theta }
,
y
′
=
−
x
sin
θ
+
y
cos
θ
{\displaystyle y =-x\sin \theta +y\cos \theta }
, matrix form is:
[
x
′
y
′
]
=
[
cos
θ
sin
θ
−
sin
θ
cos
θ
]
[
x
y
]
{\displaystyle {\begin{bmatrix}x \\y \end{bmatrix}}={\begin{bmatrix}\cos \theta &\sin \theta \\-\sin \theta &\cos \theta \end{bmatrix}}{\begin{bmatrix}x\\y\end{bmatrix}}}
these formulae assume x axis points right , y axis points up. in formats such svg y axis points down, these matrices must swapped.
shearing
for shear mapping (visually similar slanting), there 2 possibilities.
a shear parallel x axis has
x
′
=
x
+
k
y
{\displaystyle x =x+ky}
,
y
′
=
y
{\displaystyle y =y}
. written in matrix form, becomes:
[
x
′
y
′
]
=
[
1
k
0
1
]
[
x
y
]
{\displaystyle {\begin{bmatrix}x \\y \end{bmatrix}}={\begin{bmatrix}1&k\\0&1\end{bmatrix}}{\begin{bmatrix}x\\y\end{bmatrix}}}
a shear parallel y axis has
x
′
=
x
{\displaystyle x =x}
,
y
′
=
y
+
k
x
{\displaystyle y =y+kx}
, has matrix form:
[
x
′
y
′
]
=
[
1
0
k
1
]
[
x
y
]
{\displaystyle {\begin{bmatrix}x \\y \end{bmatrix}}={\begin{bmatrix}1&0\\k&1\end{bmatrix}}{\begin{bmatrix}x\\y\end{bmatrix}}}
reflection
to reflect vector line goes through origin, let
l
→
=
(
l
x
,
l
y
)
{\displaystyle \scriptstyle {\vec {l}}=(l_{x},l_{y})}
vector in direction of line:
a
=
1
∥
l
→
∥
2
[
l
x
2
−
l
y
2
2
l
x
l
y
2
l
x
l
y
l
y
2
−
l
x
2
]
{\displaystyle \mathbf {a} ={\frac {1}{\lvert {\vec {l}}\rvert ^{2}}}{\begin{bmatrix}l_{x}^{2}-l_{y}^{2}&2l_{x}l_{y}\\2l_{x}l_{y}&l_{y}^{2}-l_{x}^{2}\end{bmatrix}}}
orthogonal projection
to project vector orthogonally onto line goes through origin, let
u
→
=
(
u
x
,
u
y
)
{\displaystyle {\vec {u}}=(u_{x},u_{y})}
vector in direction of line. use transformation matrix:
a
=
1
∥
u
→
∥
2
[
u
x
2
u
x
u
y
u
x
u
y
u
y
2
]
{\displaystyle \mathbf {a} ={\frac {1}{\lvert {\vec {u}}\rvert ^{2}}}{\begin{bmatrix}u_{x}^{2}&u_{x}u_{y}\\u_{x}u_{y}&u_{y}^{2}\end{bmatrix}}}
as reflections, orthogonal projection onto line not pass through origin affine, not linear, transformation.
parallel projections linear transformations , can represented matrix. however, perspective projections not, , represent these matrix, homogeneous coordinates can used.
Comments
Post a Comment