Mastering Affine Transformations

Throughout the book so far, you’ll have gained an appreciation for the variety of methods used to move, rotate, and scale vectors and points. To move a mesh from one location in space to another requires each vertex in that mesh to be moved, and then the mesh is redrawn. This movement (formally called a translation) is just one of a set of special point and vector manipulator methods called affine transformations.

Affine transformations are important in computer graphics primarily, as they allow for the manipulation of a set of vertices without losing the integrity of the form. By this, I mean that any lines and planes in a mesh retain their relative parallelism and ratios. This might sound a little abstract, so let’s illustrate it with an example. Consider the diagram in Figure 12.1:

Figure 12.1: An affine transformation of a cube

Figure 12.1 shows an original cube in (a) made up of six sides and eight vertices...

Technical requirements

In this chapter, we will be using Python, PyCharm, and Pygame, as used in previous chapters.

Before you begin coding, create a new Chapter_12 folder in the PyCharm project for the contents of this chapter.

The solution files containing the code can be found on GitHub at https://github.com/PacktPublishing/Mathematics-for-Game-Programming-and-Computer-Graphics/tree/main/Chapter12.

Translating points in 3D

We first encountered OpenGL’s translations and rotations back in Chapter 4, Graphics and Game Engine Components, and then began building a Transform class for our Python project in Chapter 6, Updating and Drawing the Graphics Environment. In this chapter, we will continue working on this class to provide all the functionality of affine transformations, beginning with that of translation.

Whichever affine transformation you are applying, the rule is that the operation is applied to every point to which you want to apply the transformation. In the case of the vertices of a cube, you may have six vertices, as shown in Figure 12.2. This cube is centered around the origin:

Figure 12.2: A cube with each vertex coordinate displayed

To translate the cube—that is, to move it to another location—we must perform the same operation on each of the vertices such that they maintain the integrity of the cube. That means that...

Scaling points with x, y, and z

It might seem a strange proposition to scale a single point if you think about it, as a point has no size—it’s just a location in space. So, what happens if you try to scale it through the affine transformation of scaling? Well, scaling is an operation performed by the multiplication of each of the point coordinates. Take, for example, the point (2, 4, 6)—if this is scaled by 0.5 (in other words, halved), the resulting point is (1, 2, 3). In this case, what has happened to the point is that it has been moved.

The formal mathematics for scaling is:

P(x, y, z) = S x Q(x, y, z)

Here, the x, y, and z coordinates of the resulting point P are the point Q’s individual coordinates multiplied by S. Let’s consider again the cube from Figure 12.2. The result of multiplying each of the cube’s vertices by 0.5 will result in the cube shown in Figure 12.4:

Figure 12.4: A scaled cube

In this...

Rotating points around a pivot

Right now, you are probably feeling pretty comfortable with affine transformations. There’s no doubt that scaling and translation are simple concepts. But now, we move on to rotations. Hold on to your hat because the mathematics is about to go up a few notches in complexity.

Just as translation and scaling in 3D work with each of the x, y, and z axes, so too does rotation. An object can rotate around its x, y, or z axis. These rotations are illustrated in Figure 12.6:

Figure 12.6: A teapot rotated around each axis

What makes the calculations for each of these rotations more difficult than scaling and translation is that while the x, y, and z values applied in scaling and translation only affect their coordinate counterparts (for example, x affects x, y affects y, and likewise), with rotations, to rotate around one axis, the other two axes are involved. The following equations use what are called Euler angles. These...

Exploring transformation orders

Assuming you typed in your code in the same order that I did, then you’d have your transformations listed like this within the Object.py code:

glTranslatef(pos.x, pos.y, pos.z)
glScalef(scale.x, scale.y, scale.z)
glRotated(rot_angle, rot_axis.x, rot_axis.y, rot_axis.z)

But did you wonder why they were in that order? Why don’t you place the glRotated() line first in this list, like this:

glRotated(rot_angle, rot_axis.x, rot_axis.y, rot_axis.z)
glTranslatef(pos.x, pos.y, pos.z)
glScalef(scale.x, scale.y, scale.z)

Now, run the project. What happens when you rotate the cube?

It goes off the screen, right? However, it appears to be slightly rotating. Hold down the right-arrow key for a while. The cube will go off the right-hand side of the window, and then eventually come back from the left-hand side, as illustrated in Figure 12.8:

Figure 12.8: The cube spinning around the viewer’s head

What’...

Shearing and reflections

The last of the affine transformations are shearing and reflections. These often don’t have a lot of time spent on them in graphics because they aren’t often used and aren’t part of a typical graphics API. However, for completeness, we will add them here as they generate objects that retain parallelism and ratios.

Shearing is a translation along one dimension. Formally, we can define a point to be sheared thus:

Px = Qx + sQy

Py = Qy

This is a two-dimensional case as it can easily be demonstrated in 2D. You will notice that the y coordinate undergoes no change, while the x coordinate is its old self plus a scaled value of the old y coordinate. It can, of course, also be the other way around, with x staying the same and y changing. The result of shearing is to make an object appear to lean over, as demonstrated in Figure 12.11. It’s a donut shape, shown as the original shape on the left and the sheared version on the right...

Summary

Along with the data structures required for storing and drawing a mesh, affine transformations are a fundamental part of computer graphics. In fact, how OpenGL stores and manipulates them is the crux of all graphics processing.

In this chapter, we’ve examined the five transformations that fit into this special category—translation, scaling, rotation, shearing, and reflection. Of all these, rotation is the most complex. The mathematics of rotations has been a hotly researched topic in computer graphics since its inception, as you too will experience as we progress through the book.

We began by reviewing translation, a functionality we have been using since the creation of the Transform class in our Python project. It, along with scaling, is a very simple mathematical function. We spent a lot of time adding the final touches to the Transform class, completing it with methods to control scaling and rotation.

These newfound skills will assist you in expanding...

Answers

Exercise A. (4, 9)

Exercise B. (-1, 5)

Exercise C. (5, 0, 8)

Exercise D.

To Transform.py, add the following method:

def update_scale(self, amount: pygame.Vector3):
    self.scale.x *= amount.x
    self.scale.y *= amount.y
    self.scale.z *= amount.z

Then, call update_scale() in the main loop of ScalingObjects.py, thus:

keys = pygame.key.get_pressed()
if keys[pygame.K_UP]:
    trans.update_scale(pygame.Vector3(2, 2, 2))
if keys[pygame.K_DOWN]:
    trans.update_scale(pygame.Vector3(0.5, 0.5, 0.5))