A Deep Dive: Mathematical look at Android Transformation

Android Graphics

In the previous section, we saw how a transformation can be defined. Now we will take a detailed look at the mathematical sense of this. This will help us to define different transformations. Also, we will prepare ourselves to get ready to implement animations using transformation. Now let us build our basic knowledge in detail.

Transformation as a set of equations

In two dimensional world, the equation of transformation from one rectangular coordinate to another can be written as a set of equations as below. Let X′ be the new coordinate transformed from X coordinate

To make it more convenient to represent this in matrix form let me add one convenient dummy equation

This can be rewritten as

Where

Combination of transformation

Let me make a statement and prove it.

Multiple transformations can be combined to form a single transformation using matrix multiplication.

Proof: Let X′′ be the final transformation we are looking for.

Let X′ = A.X be the transformation that takes X to X′

And let X′′ = B.X′ be the transformation that takes X′ to X′′ So, X′′=B.X′ =⇒X′′=B.A.X=⇒X′′=M.XwhereM=B.A

Types of Transformation

There are various linear transformations. Unity transformation, Translation, scaling, rotation, and skew are types of transformation. We can also combine these transformations. For each transformation, there is a corresponding transformation.

1 Unity Transformation

This transformation is not of any specific interest because there are no transformations occur. We don’t have to do any transformation at all in this case. But for the sake of completeness, we include it here.

Unity transformation equations are

In the matrix transformation form, it is as below

In the matrix form, it is X′ = M.X. M is the unit matrix shown in above equation 1.5

We can prepare this transformation matrix using the below Kotlin code

var M: Matrix = Matrix()

2 Translation transformation

This transformation moves a point to dx and dy distances from the original x, y value. It has the following form

In the matrix, the transformation form is as below

In the matrix form, it is X′ = M.X M is the unit matrix shown in above equation 1.7 We can prepare this translation using the following Kotlin code

var M: Matrix = Matrix()
M.setTranslate(dx, dy)

3 Rotation transformation

Rotation transformation is a rotation of (x, y) about a central point. For the sake of brevity, let us assume the point about which the rotation happening in the center of the coordinate (0, 0). As in the image below, point A is rotated about the center and moved to A′.

The OA and OA′ have the same length. Let this length be r. We can write the following equations from this setup.

And

The equation 1.10 can be expanded as below

Using 1.8 and 1.9 this can be written as

Similarly

Using 1.8 and 1.9 this can be written as

Using equations 1.13 and 1.15 we can write the matrix form as

In the matrix form, it is X′ = M.X. M is the matrix shown in above equation 1.16 We can prepare this translation using the following Kotlin code

var M: Matrix = Matrix()
M.setRotate(degree)

4 Skew transformation

A skew transformation is in the form as following.

where dy is the y directional skew; and dx is the x directional skew. Using equations 1.13 and 1.15 we can write the matrix form as

In the matrix form, it is X′ = M.X. M is the matrix shown in above equation 1.19 We can prepare this translation using the following Kotlin code

var M: Matrix = Matrix()
M.setSkew(dx, dy)

In the forthcoming article, we will discuss how these transformations can be combined and create more useful but complex transformations. Understanding this transformation will help us to create very user-friendly animations and layouts.