Roman Hašek, Pavel Pech

*University of South Bohemia*

An *affine transformation* of the Euclidean plane (which is the subject of this material) is a geometric transformation that preserves
the ratio of three collinear points, unless it displays them in a single common point. As a result, this transformation preserves *straight lines* and
*parallelism*. The affine transformation $f$ of a plane, which maps point $X$ to point $X1$, can be represented as
$$f:\,X1 = \left(\begin{matrix}
a_{11} & a_{12} \\
a_{21} & a_{22}
\end{matrix}\right)X +
\left(\begin{matrix}
b_{1} \\
b_{2}
\end{matrix}\right),$$
where $A = \left(\begin{matrix}
a_{11} & a_{12} \\
a_{21} & a_{22}
\end{matrix}\right)$
is an invertible matrix and
$\vec{b}=\left(\begin{matrix}
b_{1} \\
b_{2}
\end{matrix}\right)$
is the vector of translation.
The following dynamic applet allows us, through the transformations of a cat (it's name is Kit) photograph, to observe the influence of the elements of the matrix $A$
and the vector $\vec{b}$ on the form of the resulting affine transformation.

**Task 1:** Affine transformations of the Euclidean plane include also plane isometries and homothety.
Try to use the sliders to set all the variable elements of $A$ and $\vec{b}$ so that you gradually create matrix representations of selected representatives of all Euclidean plane isometries and of a homothety, following their effect on the image.

**Task 2:** The set of affine transformations of the Euclidean plane also includes plane isometries and homothety.
Try to use the sliders to set all the variable elements of $A$ and $\vec{b}$ so that you gradually create matrix representations of particular representatives of all Euclidean plane isometries,
i.e. identity, reflection, roation, translation, glide reflection, and of a homothety.

**Task 3:** Change the shape and position of the given triangles and observe the corresponding changes in the matrix notation of the respective affinity.

**Implementation in JSXGraph**

The *affine transformation* is implemented in the JSXGraph applet
through the *Transformation element*, specifically its *generic* type (see https://jsxgraph.org/docs/symbols/Transformation.html),
which is given by a matrix form in homogeneous coordinates as
$$\left(\begin{matrix}
a & b & c \\
d & e & f \\
g & h & i
\end{matrix}\right)\cdot
\left(\begin{matrix}
z \\
x \\
y
\end{matrix}\right).$$
In order to obtain a representation of just *affine transformations*, this general
matrix notation has to be reduced to a form
$$\left(\begin{matrix}
1 & 0 & 0 \\
b_{1} & a_{11} & a_{12} \\
b_{2} & a_{21} & a_{22}
\end{matrix}\right)\cdot
\left(\begin{matrix}
1 \\
x \\
y
\end{matrix}\right).$$
where the role of each element is clear from its labeling and from what has been stated above.