Editing 2D computer graphics (section)

==Background (geometry)==
{{Duplication|date=May 2022|section=y|dupe=Translation (geometry)|dupe2=Rotation (geometry)|discuss=Talk:2D computer graphics#Duplication}}
{{further|Rotations and reflections in two dimensions}}
<!-- content from article translation (physics) has been merged with this article {{Merge from|Translation (physics)|date=December 2010}}-->
<!-- added references {{refimprove|date=December 2007}}-->
[[File:Traslazione OK.svg|right|thumb|A translation moves every point of a figure or a space by the same amount in a given direction.]]

In [[Euclidean geometry]], a ''[[translation (geometry)]]'' moves every point a constant distance in a specified direction. A translation can be described as a [[Euclidean group|rigid motion]]: other rigid motions include rotations and reflections. A translation can also be interpreted as the addition of a constant [[vector space|vector]] to every point, or as shifting the [[origin (mathematics)|origin]] of the [[coordinate system]]. A ''[[shift operator|translation operator]]'' is an [[operator (mathematics)|operator]] <math>T_\mathbf{\delta}</math> such that <math>T_\mathbf{\delta} f(\mathbf{v}) = f(\mathbf{v}+\mathbf{\delta}).</math>

If '''v''' is a fixed vector, then the translation ''T''<sub>'''v'''</sub> will work as ''T''<sub>'''v'''</sub>('''p''') = '''p''' + '''v'''.

If ''T'' is a translation, then the [[image (mathematics)|image]] of a subset ''A'' under the [[function (mathematics)|function]] ''T'' is the '''translation''' of ''A'' by ''T''. The translation of ''A'' by ''T''<sub>'''v'''</sub> is often written ''A'' + '''v'''.

In a [[Euclidean space]], any translation is an [[isometry]]. The set of all translations forms the translation group ''T'', which is isomorphic to the space itself, and a [[normal subgroup]] of [[Euclidean group]] ''E''(''n'' ). The [[quotient group]] of ''E''(''n'' ) by ''T'' is isomorphic to the [[orthogonal group]] ''O''(''n'' ):
:''E''(''n'' ) ''/ T'' ≅ ''O''(''n'' ).

===Translation===<!-- This section is linked from [[affine transformation]]. -->

Since a translation is an [[affine transformation]] but not a [[linear transformation]], [[homogeneous coordinates]] are normally used to represent the translation operator by a [[matrix (mathematics)|matrix]] and thus to make it linear. Thus we write the 3-dimensional vector '''w''' = (''w''<sub>''x''</sub>, ''w''<sub>''y''</sub>, ''w''<sub>''z''</sub>) using 4 homogeneous coordinates as '''w''' = (''w''<sub>''x''</sub>, ''w''<sub>''y''</sub>, ''w''<sub>''z''</sub>, 1).<ref>Richard Paul, 1981, [https://books.google.com/books?id=UzZ3LAYqvRkC Robot manipulators: mathematics, programming, and control : the computer control of robot manipulators], MIT Press, Cambridge, MA</ref>

To translate an object by a [[vector (geometry)|vector]] '''v''', each homogeneous vector '''p''' (written in homogeneous coordinates) would need to be multiplied by this '''translation matrix''':

: <math> T_{\mathbf{v}} = 
\begin{bmatrix}
1 & 0 & 0 & v_x \\
0 & 1 & 0 & v_y \\
0 & 0 & 1 & v_z \\
0 & 0 & 0 & 1 
\end{bmatrix}
</math>
As shown below, the multiplication will give the expected result:
: <math> T_{\mathbf{v}} \mathbf{p} =
\begin{bmatrix}
1 & 0 & 0 & v_x \\
0 & 1 & 0 & v_y\\
0 & 0 & 1 & v_z\\
0 & 0 & 0 & 1
\end{bmatrix}
\begin{bmatrix}
p_x \\ p_y \\ p_z \\ 1
\end{bmatrix}
=
\begin{bmatrix}
p_x + v_x \\ p_y + v_y \\ p_z + v_z \\ 1
\end{bmatrix}
= \mathbf{p} + \mathbf{v} </math>

The inverse of a translation matrix can be obtained by reversing the direction of the vector:
: <math> T^{-1}_{\mathbf{v}} = T_{-\mathbf{v}} . \! </math>

Similarly, the product of translation matrices is given by adding the vectors:
: <math> T_{\mathbf{u}}T_{\mathbf{v}} = T_{\mathbf{u}+\mathbf{v}} . \! </math>
Because addition of vectors is [[commutative]], multiplication of translation matrices is therefore also commutative (unlike multiplication of arbitrary matrices).

===Rotation===

In [[linear algebra]], a ''[[rotation matrix]]'' is a [[matrix (mathematics)|matrix]] that is used to perform a [[rotation (mathematics)|rotation]] in [[Euclidean space]].

:<math>R = 
\begin{bmatrix}
\cos \theta & -\sin \theta \\
\sin \theta & \cos \theta \\
\end{bmatrix}
</math>

rotates points in the ''xy''-[[Cartesian coordinate system|Cartesian plane]] counterclockwise through an angle ''θ'' about the origin of the [[Cartesian coordinate system]]. To perform the rotation using a rotation matrix ''R'', the position of each point must be represented by a [[column vector]] '''v''', containing the coordinates of the point. A rotated vector is obtained by using the [[matrix multiplication]] ''R'''''v'''. Since matrix multiplication has no effect on the zero vector (i.e., on the coordinates of the origin), rotation matrices can only be used to describe rotations about the origin of the coordinate system.

Rotation matrices provide a simple algebraic description of such rotations, and are used extensively for computations in [[geometry]], [[physics]], and [[computer graphics]]. In 2-dimensional space, a rotation can be simply described by an [[Angle of rotation|angle ''θ'' of rotation]], but it can be also represented by the 4 entries of a rotation matrix with 2 rows and 2 columns. In 3-dimensional space, every rotation can be interpreted as a rotation by a given angle about a single fixed axis of rotation (see [[Euler's rotation theorem]]), and hence it can be simply described by [[Axis-angle representation|an angle and a vector]] with 3 entries. However, it can also be represented by the 9 entries of a rotation matrix with 3 rows and 3 columns. The notion of rotation is not commonly used in dimensions higher than&nbsp;3; there is a notion of a ''[[rotational displacement]]'', which can be represented by a matrix, but no associated single axis or angle.

Rotation matrices are [[square matrix|square matrices]], with [[real number|real]] entries. More specifically they can be characterized as [[orthogonal matrix|orthogonal matrices]] with [[determinant]]&nbsp;1:

:<math>R^{T} = R^{-1}, \det R = 1\,</math>.

The [[set (mathematics)|set]] of all such matrices of size ''n'' forms a [[group (mathematics)|group]], known as the [[special orthogonal group]] {{math|SO(''n'')}}.

===In two dimensions===
[[File:Counterclockwise rotation SVG.svg|thumb|A counterclockwise rotation of a vector through angle ''θ''. The vector is initially aligned with the x-axis.]]
In two dimensions every rotation matrix has the following form:

:<math>
R(\theta) = \begin{bmatrix}
\cos \theta & -\sin \theta \\
\sin \theta & \cos \theta \\
\end{bmatrix}</math>.

This rotates [[column vector]]s by means of the following [[matrix multiplication]]:

:<math>
\begin{bmatrix}
x' \\
y' \\
\end{bmatrix} = \begin{bmatrix}
\cos \theta & -\sin \theta \\
\sin \theta & \cos \theta \\
\end{bmatrix}\begin{bmatrix}
x \\
y \\
\end{bmatrix}</math>.

So the coordinates (x',y') of the point (x,y) after rotation are:

:<math>x' = x \cos \theta - y \sin \theta\,</math>,
:<math>y' = x \sin \theta + y \cos \theta\,</math>.

The direction of vector rotation is counterclockwise if θ is positive (e.g. 90°), and clockwise if θ is negative (e.g. -90°).

:<math>
R(-\theta) = \begin{bmatrix}
\cos \theta & \sin \theta \\
-\sin \theta & \cos \theta \\
\end{bmatrix}\,</math>.

===Non-standard orientation of the coordinate system===

[[File:Clockwise rotation SVG.svg|thumb|A rotation through angle ''θ'' with non-standard axes]]
If a standard [[Orientation (space)|right-handed]] [[Cartesian coordinate system]] is used, with the ''x'' axis to the right and the ''y'' axis up, the rotation R(''θ'') is counterclockwise. If a left-handed Cartesian coordinate system is used, with ''x'' directed to the right but ''y'' directed down, R(''θ'') is clockwise.  Such non-standard orientations are rarely used in mathematics but are common in 2D computer graphics, which often have the origin in the top left corner and the ''y''-axis down the screen or page.<ref>{{Citation|url=http://www.w3.org/TR/SVG/coords.html#InitialCoordinateSystem|title=Scalable Vector Graphics -- the initial coordinate system|website=w3.org|year=2003}}</ref>

See [[Rotation matrix#Ambiguities|below]] for other alternative conventions which may change the sense of the rotation produced by a [[rotation matrix]].

===Common rotations===

Particularly useful are the matrices for 90° and 180° rotations:
:<math>
R(90^\circ) = \begin{bmatrix}
0 & -1 \\[3pt]
1 & 0 \\
\end{bmatrix}</math> (90° counterclockwise rotation)
:<math>R(180^\circ) = \begin{bmatrix}
-1 & 0 \\[3pt]
0 & -1 \\
\end{bmatrix}</math> (180° rotation in either direction – a half-turn)
:<math>R(270^\circ) = \begin{bmatrix}
0 & 1 \\[3pt]
-1 & 0 \\
\end{bmatrix}</math> (270° counterclockwise rotation, the same as a 90° clockwise rotation)

===Scaling===
{{Refimprove|date=April 2008}}
In [[Euclidean geometry]], '''uniform scaling''' ('''[[isotropic]] scaling''',<ref>{{cite web|format=PowerPoint|last1=Durand|last2=Cutler|url=http://groups.csail.mit.edu/graphics/classes/6.837/F03/lectures/04_transformations.ppt |title=Transformations|publisher=Massachusetts Institute of Technology|access-date =12 September 2008}}</ref> '''homogeneous dilation''', [[Homothetic transformation|homothety]]) is a [[linear transformation]] that enlarges (increases) or shrinks (diminishes) objects by a [[scale factor]] that is the same in all directions. The result of uniform scaling is [[Similarity (geometry)|similar]] (in the geometric sense) to the original.  A scale factor of 1 is normally allowed, so that congruent shapes are also classed as similar. (Some school text books specifically exclude this possibility, just as some exclude squares from being rectangles or circles from being ellipses.)

More general is '''scaling''' with a separate scale factor for each axis direction. '''Non-uniform scaling''' ('''[[anisotropic]] scaling''', '''inhomogeneous dilation''') is obtained when at least one of the scaling factors is different from the others; a special case is '''directional scaling''' or '''stretching''' (in one direction). Non-uniform scaling changes the [[shape]] of the object; e.g. a square may change into a rectangle, or into a parallelogram if the sides of the square are not parallel to the scaling axes (the angles between lines parallel to the axes are preserved, but not all angles).

A scaling can be represented by a scaling matrix.  To scale an object by a [[Vector (geometric)|vector]] ''v'' = (''v<sub>x</sub>, v<sub>y</sub>, v<sub>z</sub>''), each point ''p'' = (''p<sub>x</sub>, p<sub>y</sub>, p<sub>z</sub>'') would need to be multiplied with this [[scaling matrix]]:
:<math> S_v = 
\begin{bmatrix}
v_x & 0 & 0  \\
0 & v_y & 0  \\
0 & 0 & v_z  \\
\end{bmatrix}.
</math>

As shown below, the multiplication will give the expected result:
:<math>
S_vp =
\begin{bmatrix}
v_x & 0 & 0  \\
0 & v_y & 0  \\
0 & 0 & v_z  \\
\end{bmatrix}
\begin{bmatrix}
p_x \\ p_y \\ p_z 
\end{bmatrix}
=
\begin{bmatrix}
v_xp_x \\ v_yp_y \\ v_zp_z
\end{bmatrix}.
</math>

Such a scaling changes the [[diameter]] of an object by a factor between the scale factors, the [[area]] by a factor between the smallest and the largest product of two scale factors, and the [[volume]] by the product of all three.

The scaling is uniform [[if and only if]] the scaling factors are equal (''v<sub>x</sub> = v<sub>y</sub> = v<sub>z</sub>''). If all except one of the scale factors are equal to 1, we have directional scaling.

In the case where ''v<sub>x</sub> = v<sub>y</sub> = v<sub>z</sub> = k'', the scaling is also called an '''enlargement''' or '''[[Dilation (metric space)|dilation]]''' by a factor k, increasing the area by a factor of k<sup>2</sup> and the volume by a factor of k<sup>3</sup>.

Scaling in the most general sense is any [[affine transformation]] with a [[diagonalizable matrix]]. It includes the case that the three directions of scaling are not perpendicular. It includes also the case that one or more scale factors are equal to zero ([[Projection (linear algebra)|projection]]), and the case of one or more negative scale factors. The latter corresponds to a combination of scaling proper and a kind of reflection: along lines in a particular direction we take the reflection in the point of intersection with a plane that need not be perpendicular; therefore it is more general than ordinary reflection in the plane.

===Using homogeneous coordinates===
In [[projective geometry]], often used in [[computer graphics]], points are represented using [[homogeneous coordinates]]. To scale an object by a [[Vector (geometric)|vector]] ''v'' = (''v<sub>x</sub>, v<sub>y</sub>, v<sub>z</sub>''), each homogeneous coordinate vector ''p'' = (''p<sub>x</sub>, p<sub>y</sub>, p<sub>z</sub>'', 1) would need to be multiplied with this [[projective transformation]] matrix:

:<math> S_v = 
\begin{bmatrix}
v_x & 0 & 0 & 0 \\
0 & v_y & 0 & 0 \\
0 & 0 & v_z & 0 \\
0 & 0 & 0 & 1 
\end{bmatrix}.
</math>

As shown below, the multiplication will give the expected result:
:<math>
S_vp =
\begin{bmatrix}
v_x & 0 & 0 & 0 \\
0 & v_y & 0 & 0 \\
0 & 0 & v_z & 0 \\
0 & 0 & 0 & 1 
\end{bmatrix}
\begin{bmatrix}
p_x \\ p_y \\ p_z \\ 1 
\end{bmatrix}
=
\begin{bmatrix}
v_xp_x \\ v_yp_y \\ v_zp_z \\ 1 
\end{bmatrix}.
</math>

Since the last component of a homogeneous coordinate can be viewed as the denominator of the other three components, a uniform scaling by a common factor ''s'' (uniform scaling) can be accomplished by using this scaling matrix:
:<math> S_v = 
\begin{bmatrix}
1 & 0 & 0 & 0 \\
0 & 1 & 0 & 0 \\
0 & 0 & 1 & 0 \\
0 & 0 & 0 & \frac{1}{s} 
\end{bmatrix}.
</math>

For each vector ''p'' = (''p<sub>x</sub>, p<sub>y</sub>, p<sub>z</sub>'', 1) we would have
:<math>
S_vp =
\begin{bmatrix}
1 & 0 & 0 & 0 \\
0 & 1 & 0 & 0 \\
0 & 0 & 1 & 0 \\
0 & 0 & 0 & \frac{1}{s}  
\end{bmatrix}
\begin{bmatrix}
p_x \\ p_y \\ p_z \\ 1 
\end{bmatrix}
=
\begin{bmatrix}
p_x \\ p_y \\ p_z \\ \frac{1}{s} 
\end{bmatrix}
</math>
which would be homogenized to
:<math>
\begin{bmatrix}
sp_x \\ sp_y \\ sp_z \\ 1 
\end{bmatrix}.
</math>