A computer graphics image is just the result of a whole lot of mathematical calculations.
In fact, every pixel you see in an image has usually had many calculations made to work out what colour it should be, and there are millions of pixels in a typical image.
Let's start with some simple but common calculations that are needed in graphics programming.
The following interactive shows a cube with symbols on each face.
You can move it around using what's called a translation, which simply adjusts where it is placed in space:
- A positive or negative change in x will shift the box right or left respectively.
- A positive or negative change in y will shift the box up or down respectively.
- A positive or negative change in z will shift the box in or out respectively.
The camera will always focus on the cube, so to see the back of the cube move it behind the camera with a positive z translation.
Try typing 3D coordinates into this interactive to find each symbol.
You've just applied 3D translation transforms to the cube.
Now try the following challenge, which requires you to rotate the box to find the codes.
There are several transformations that are used in computer graphics, but the most common ones are translation (moving the object), rotation (spinning it) and scaling (changing its size).
They come up often in graphics because they are applied not only to objects, but to things like the camera and lighting sources.
In this section you can apply transformations to various images.
We'll start by making the changes manually, one point at a time, but we'll move up to a quick shortcut method that uses a matrix to do the work for you.
We'll start by looking at how these work in two dimensions – it's a bit easier to think about than three dimensions.
The following interactive shows a shape, and on the left you can see a list of the points that correspond to its 7 corners (usually referred to as cartesian coordinates).
The shape is on a grid, where the center point is the "zero" point (or origin).
Points are specified using two numbers, x and y, usually written as (x, y).
The x value is how far the point is to the right of the center and the y value is how far above the center it is.
For example, the first point in the list is the tip at (0, 4), which means it's 0 units to the right of the center (i.e.
at the center), and 4 units above it.
Which point does the last pair (3, 1) correspond to?
What does it mean if a coordinate has a negative x value?
The transform you did in the above interactive is called a translation – it translates the shape around the grid.
This kind of transform is used in graphics to specify where an object should be placed in a scene, but it has many other uses, such as making an animated object move along a path, or specifying the position of the imaginary camera (viewpoint).
The next challenge involves changing the size of the image.
This transformation is called scaling, and although it can obviously be used to control the size of an object, this can in turn be used to create a visual effect such as making the object appear closer or further away.
In the following interactive, try to get the blue shape to match up with the red one.
It will require a mixture of scaling and translation.
Next, see what happens if you swap the x and y value for each coordinate.
This is a simple rotation transformation, useful for positioning objects in a scene,
but also for specifying things like camera angles.
Typing all these coordinates by hand is inefficent.
Luckily there's a much better way of achieving all this.
There's a much easier way to specify transformations than having to change each coordinate separately.
Transformations are usually done in graphics using matrix arithmetic, which is a shorthand notation for doing lots of simple arithmetic operations in one go.
The matrix for the two-dimensional transformations we've been doing above has four values in it.
For the 2 dimensional scaling transform where we made each x and y value twice as large, the matrix is written as:
where the top left value just means multiply all the x values by 2, and the bottom right value means multiply all the y values by 2.
You can try it out in the following interactive:
At this stage you may want to have the interactive open in a separate window so that you can read the text below and work on the interactive at the same time.
Let's take a closer look at what is happening here.
As we mentioned earlier, each point on our shape can be represented by two values (x and y).
The upper rightmost point on the shape in the interactive above, we say is at point (2, 3) in our coordinate space.
When we are applying a scaling transformation we are actually doing a type of "matrix multiplication."
For example, let's scale point (2, 3) by a factor of 2 as we did in the previous interactive:
This gives us a new position of (4, 6) for the upper rightmost point, which matches the previous interactive after applying the scaling matrix!
This same matrix multiplication is applied to each of the seven points on the shape.
Now try changing the matrix to
For the upper rightmost point (starting at (2, 3)), the matrix muliplication for scaling by a factor of 3 is:
Now let's try scaling with a number less than one:
For the upper rightmost point (starting at (2, 3)), the matrix muliplication for scaling by a factor of 0.2 is:
By now you might be starting to see a recurring pattern in our matrix multiplication for scaling.
To scale by a factor of s, we can apply the general rule:
What happens if you use the following matrix?
A simple way of looking at the matrix is that the top row determines the transformed x value, simply by saying how much of the original x value and y value contribute to the new x value.
So in the matrix:
the top row just means that the new x value is 2 lots of the original x, and none of the original y, which is why all the x values double.
The second row determines the y value: in the above example, it means that the new y value uses none of the original x, but 4 times the original y value.
If you try this matrix, you should find that the location of all the x points is doubled, and the location of all the y points is multiplied by 4.
Now try the following matrix:
This matrix should have rotated the shape to the right.
The new x value has none of the original x, but exactly the original y value, and vice versa.
This swaps all the x and y coordinates, which is the same as rotating the object to the right.
Where it gets interesting is when you use a little of each value; try the following matrix:
Now the x value of each coordinate is a mixture of 0.7 of the original x, and 0.7 of the original y.
This is called a rotation.
In general, to rotate an image by a given angle you need to use the sine (abbreviated sin) and cosine (abbreviated cos) functions from trigonometry.
You can use the interactive below to calculate values for the sin and cos functions.
To rotate the image anticlockwise by degrees, you'll need the following values in the matrix, which rely on trig functions:
Note that the following interactives involving rotation transformations expect accuracy of 2 decimal places.
What is the matrix for rotation by 360 degrees?
Recall that the general matrix for scaling is:
A bit simpler than the one for rotation!
A translation can't be specified by this kind of matrix, so in the interactives we've provided an extra place to specify an x and y value to translate the input.
Try it out in the following interactive.
The next interactive needs you to combine translation with scaling.
The order in which translation and scaling happen makes a difference.
Try the following challenge!
In the above interactive, you'll have noticed that scaling is affected by how far the object is from the center.
If you want to scale around a fixed point in the object (so it expands where it is), then an easy way is to translate it back to the center (also called the origin), scale it, and then translate it back to where it was.
The following interactive allows you to move the shape, then scale it, and move it back.
The same problem comes up with rotation.
The following interactive allows you to use a translation first to make the scaling more predicable.
Now that you've had a bit of practice with translation, scaling and rotation, try out these two challenges that combine all three:
These combined transformations are common, and they might seem like a lot of work because each matrix has to be applied to every point in an object.
Our shapes only had 7 points, but complex images can have thousands or even millions of points in them.
Fortunately we can combine all the matrix operations in advance to give just one operation to apply to each point.
Several transforms being applied to the same image (for example, rotate, move and scale the wheel of a car) can be made more efficient by creating one matrix that has the effect of all the transforms combined.The combination is done by "multiplying" all the matrices.
Multiplying two matrices can't be done by just multiplying the corresponding elements (as we learned earlier when applying scaling transformations); if you are multiplying two 2x2 matrices with the a and b values shown below, the resulting values from the multiplication are calculated as follows:
It's a bit complicated, but this calculation is only done once to work out the combined transformation, and it gives you a single matrix that will provide two transforms in one operation.
As a simple example, consider what happens when you scale by 2 and then rotate by 45 degrees.
The two matrices to multiply work out like this:
You can put the matrix we just calculated into the following interactive to see if it does indeed scale by 2 and rotate 45 degrees.
Also try making up your own combination of transforms to see if they give the result you expect.
In computer graphics systems there can be many transformations combined, and this is done by multiplying them all together (two at a time) to produce one matrix that does all the transforms in one go.
That transform might then be applied to millions of points, so the time taken to do the matrix multiplication at the start will pay off well.
The project below gives the chance to explore combining matrices, and has an interactive that will calculate the multiplied matrices for you.
So far we've just done the transforms in two dimensions.
To do this in 3D, we need a z coordinate as well, which is the depth of the object into the screen.
A matrix for operating on 3D points is 3 by 3.
For example, the 3D matrix for doubling the size of an object is as follows; it multiplies each of the x, y and z values of a point by 2.
You can try out this 3D matrix in the following interactive.
The teapot mesh in the above interactive has thousands of points in it, and your matrix was applied to each one of them to work out the new image.
The next interactive allows you to do translation (using a vector).
Use it to get used to translating in the three dimensions (don't worry about using matrices this time.)
Rotation is trickier because you can now rotate in different directions.
In 2D rotations were around the center (origin) of the grid, but in 3D rotations are around a line (either the horizontal x-axis, the vertical y-axis, or the z-axis, which goes into the screen!)
The 2D rotation we used earlier can be applied to 3 dimensions using this matrix:
Try applying that to the image above.
This is rotating around the z-axis (a line going into the screen); that is, it's just moving the image around in the 2D plane.
It's really the same as the rotation we used previously, as the last line (0, 0, 1) just keeps the z point the same.
Try the following matrix, which rotates around the x-axis (notice that the x value always stays the same because of the 1,0,0 in the first line):
And this one for the y-axis:
The following interactive allows you to combine 3D matrices.
In the above examples, when you have several matrices being applied to every point in the image, a lot of time can be saved by converting the series of matrices and transforms to just one formula that does all of the transforms in one go.
The following interactive can do those calculations for you.
For example, in the following interactive, remove the existing matrices, click 'Add matrix' and enter the matrix for doubling the size of an object (put the number 2 instead of 1 on the main diagonal values).
Then add another matrix that triples the size of the image (3 on the main diagonal).
The interactive shows a matrix below that combines the two – does it look right?
The interactive also allows you to combine in translations (just three numbers, for x, y and z).
Try combining a scaling followed by a translation.
What if you add a rotation – does the order matter?
Matrix multiplication in 3D
In case you're wondering, the interactive is using the following formula to combine two matrices (you don't have to understand this to use it).
It is called matrix multiplication, and while it might be a bit tricky, it's very useful in computer graphics because it reduces all the transformations you need to just one matrix, which is then applied to every point being transformed.
This is way better than having to run all the matrices of every point.
For this project, you will demonstrate what you've learned in the section above by explaining a 3D transformation of a few objects.
You should take screenshots of each step to illustrate the process for your report.
The following scene-creation interactive allows you to choose objects (and their colours etc.),
and apply one transformation to them.
To position them more interestingly, you will need to come up with multiple transformations
(e.g. scale, then rotate, then translate),
and use the "simplifier" interactive to combine all the matrices into one operation.
The scene-creation interactive can be run from here:
To generate combined transformations, you can use the following transform simplifier interactive:
Because you can't save your work in the interactives, keep notes and screen shots as you go along.
These will be useful for your report, and also can be used if you need to start over again.
Introduce your project with a examples of 3D images, and how they are used (perhaps from movies or scenes that other people have created).
Describe any innovations in the particular image (e.g. computer generated movies usually push the boundaries of what was previously possible, so discuss what boundaries were moved by a particular movie, and who wrote the programs to achieve the new effects).
One way to confirm that a movie is innovative in this area is if it has won an award for the graphics software.
To show the basics of computer graphics,
try putting a few objects in a particular arrangement (e.g. with the teapot sitting on an interesting table),
and explain the transforms needed to achieve this, showing the matrices needed.
Give simple examples of translation, scaling and rotation using your scene.
You should include multiple transforms applied to one object, and show how they can be used to position an object.
Show how the matrices for a series of transforms can be multiplied together to get one matrix that applies all the transforms at once.
Discuss how the single matrix derived from all the others is more efficient, using your scene as an example to explain this.
WebGL and OpenGL
If you're confident with programming and want to explore graphics at a more practical level, you could do a similar project to the previous one using a graphics programming system such as WebGL (which is the system used in the demonstrations above), or a widely used graphics system such as OpenGL.
Note that these project can be very time consuming because these are powerful systems,
and there is quite a bit of detail to get right even for a simple operation.