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.