Ma1 Report

Assignment 1

[Thomas Sampson, BSc 2 Games Software Development, 2Y]

Assignment 1 Module 5572: Mathematics for Modelling and Rendering

Contents 2D Image 1. 2. 3. 4. 5. 6. 7. 8. 9.

Obtaining the vertices Getting the vertices into excel Translation transformations Scaling transformations Shear transformations Rotation about the origin Rotation around an arbitrary point Reflection in the axis Reflection in an arbitrary line

3D Image 1. 2. 3. 4. 5. 6. 7. 8. 9.

Obtaining the vertices Parallel Projection Perspective Projection Translation transformations Scaling Transformations Rotation around an axis Rotation around an arbitrary axis Reflection in the standard planes Reflection in an arbitrary plane

Assignment 1

[Thomas Sampson, BSc 2 Games Software Development, 2Y]

2D Image The following work in this section involves the creation and manipulation of a 2D image. I will use Microsoft Excel to display this 2D image, and any effects produced by applying transformation matrix to the points of the 2D image. I have taken screenshots at regular intervals to demonstrate the effects of different techniques (such as rotation, scaling etc) and have described how I achieved each transformation. 1. Obtaining the vertices The first step of my work was to obtain the vertices (2D co-ordinates) of a 2D image. Last year, in a similar assignment I chose to use graph paper and a pencil to find the points of a simple shape. However, this year I decided to digitise this stage by using 3ds Max. I mapped a the following jpeg image Figure 1 onto the x-y plane, then used the line tool to plot my co-ordinates Figure 1

Note: - In this 2D example, all my pen points fall where z=0, hence there is no third dimension.

Screenshots Here are some screenshots of me tracing the image of the car with the line tool.

Assignment 1

[Thomas Sampson, BSc 2 Games Software Development, 2Y]

2. Getting the vertices into Excel Now I had the vertices I needed for my drawing, I used 3ds max to export the model into a "Wavefront Object" See Figure 2 with the extension ".obj". This file type works particularly well as it saves all the vertices as plain text, from which it was easy to copy and paste them into excel. I did however have to be careful of splitting out the separate components of the car to achieve breaks in my graph. Figure 2 - Example of a Wavefront Object file

The Result

Here you can see the vertices imported into Excel. Each row shows a different component of the vehicle (body, window etc). Here I have expressed the vertices as columns and have added z=1 to the homogeneous co-ordinates (this is necessary when implementing the transformations)

Here you can see the vertices mapped onto a simple line graph in Microsoft Excel. I have coloured the different components for aesthetic purposes.

Assignment 1

[Thomas Sampson, BSc 2 Games Software Development, 2Y]

3. Translation Transformations The first transformation I will perform on the co-ordinates is a simple transformation. For each example I plot the original co-ordinates on the graph (in pale grey) and the transformed co-ordinates onto the graph in red. As my 2D image is quite large, for the purpose of this demonstration I am applying a transformation of (30 ,60) using the following matrix.

Note: - I am using the Derive application to screenshot any matrices from this point onwards. All matrix multiplications are achieved in Excel using the MMULT(array1, array2) function.

Here you can see translation matrix in excel and the parameters to the right (x and y translation amounts) along with some of the transformed vertices below.

The Result

As you can see, the transformation was successful and had translated the car 30 units to the right and 60 units upwards,

Assignment 1

[Thomas Sampson, BSc 2 Games Software Development, 2Y]

4. Scaling Transformations The next transformation I will perform on the co-ordinates is a scaling transformation. To demonstrate scaling I have used the following matrix 2 matrices. a)

This matrix will produce a stretch of 1.5 in the y direction.

b)

This matrix will produce a stretch of 0.5 in both the x and y direction.

The Result Here are the results the 2 scaling matrices have upon my image. a)

b)

Assignment 1

[Thomas Sampson, BSc 2 Games Software Development, 2Y]

5. Shear Transformations The next transformation I will perform on the co-ordinates is a shearing. Shearing deforms the shape and can be applied along both the x and y-axis, therefore my spreadsheet takes 2 parameters. I will use the following to matrices to apply shears to my image along each axis. a)

This matrix will produce a shear of value 1 along the x-axis.

b)

This matrix will produce a shear of value 0.2 along the y axis.

The Result Here are the results the 2 shearing matrices have upon my image. a)

b)

Assignment 1

[Thomas Sampson, BSc 2 Games Software Development, 2Y]

6. Rotation about the origin The first rotation transformation I will demonstrate is rotation around the origin. This is the most simple of rotations and rotates vertices around the point (0,0). To achieve this we use the following standard matrix.

cos   sin     0

 sin  cos  0

0 0  1 

Note: - In all cases of  ,  represents the amount in degrees or radians you wish to rotate in an anti-clockwise direction. I will use radians in all my rotations as this unit is better supported by Excel.

For the purpose of this demonstration I will rotate my shape by 45o or π/4c ACW (anti-clockwise), using the following matrix.

cos(/4)  sin(/4)   0 

 sin(/4) cos(/4) 0

0 0  1 

Note: - I used the RADIANS() function in excel to convert my degrees parameter to radians as the COS() and SIN() function will only accept angles in this form

The Result

Assignment 1

[Thomas Sampson, BSc 2 Games Software Development, 2Y]

7. Rotation about an arbitrary point The next rotation is slightly more advanced as it will rotate my object around an arbitrary point and is not limited to rotation only around the origin. There is no single matrix to achieve this effect so I will use a composition of 3 matrices to achieve the desired result. The first matrix translates the arbitrary point to the origin, the second matrix applies the rotation, and the third matrix translates back to the arbitrary point. Example 1 My first example will rotate the car 45 o or π/4c CW (clockwise) around the point of the back tyre, approximately (255,45). To do this I will multiply the following 3 matrices. As we are working with column vectors, the order of which the matrices get applied to the object vertices is right to left (hence why these seem to be in the reverse order to my previous description).

1 0 255 0 1 45    0 0 1  Example 1 Result

cos(/4)  sin(/4) 0 1  sin(/4) cos(/4) 0    0  0 0 1 0 

0  255 1  45  0 1 

Assignment 1

[Thomas Sampson, BSc 2 Games Software Development, 2Y]

7. Rotation about an arbitrary point continued…. Example 2 To demonstrate moving the arbitrary point my second example works in the same way as example 1 but this time rotates the car 90o or π/2c ACW (anti-clockwise) around the front tyre, approximately point (90,45), using the following matrices.

1 0 90 0 1 45   0 0 1  Example 2 Result

cos(/2)  sin(/2) 0  sin(/2) cos(/2) 0    0 0 1

1 0  90 0 1  45   0 0 1 

Assignment 1

[Thomas Sampson, BSc 2 Games Software Development, 2Y]

8. Reflection in the axis Vertices can be reflected in both the x and y-axis, and as with rotation, standard matrices exist for these transformations. The following matrices produce reflections in each axis.

This matrix on the left produces a reflection in the x-axis, and the matrix on the right produces a reflection in the y axis.

The Result Here are the results the two reflection matrices have upon my drawing

Here is the reflection in the x-axis

Here is the reflection in the y axis

Assignment 1

[Thomas Sampson, BSc 2 Games Software Development, 2Y]

9. Reflection in an arbitrary line Reflection in an arbitrary line is more sophisticated than a rotation in the axis. As there could be an infinite number of arbitrary lines, there is no standard formula for achieving reflection these lines. Instead, the way reflection in a line is achieved, is to bring that line down to meet an axis. Once this has been completed we can then reflect in the axis and move the line back to its original position. For the purpose of this example I will define a line by using two points, a and b (although lines could be expressed in other forms such as Cartesian or parametric).

Example Line a) (1, 3) b) (4, 7) Step 1 The first step is to bring the line down the origin using a translation. In this case we can translate the line down by [-1,-3] so that it lies on the point (0, 0), using the following matrix.

Step 2 Next we need to work out the angle which the line makes with the x-axis (we could work with the y-axis but both methods work just as well). To find this angle we take our transformed co-ordinates which are now (0, 0) and (3, 4), and use them to form a triangle as follows.

4 θ 3 Now we can calculate the angle using simple trigonometry, so… θ=Tan-1(4/3) θ=53o or θ=0.927c

Assignment 1

[Thomas Sampson, BSc 2 Games Software Development, 2Y]

Step 2 Continued… The angle calculated can now be used in the following matrix to rotate the line to align it with the x-axis. Notice the angle is negative as we wish to achieve a CW rotation.

cos(0.927)  sin(0.927) 0  sin(-0.927) cos(-0.927) 0    0 0 1 Step 3 Now we have our line aligned with the x-axis we can do a simple x-axis reflection as seen before using the following matrix..

Step 4 & 5 Once the reflection has taken place we can now rotate and translate back to the original angle and position, using the opposite matrices used in steps 1 and 2.

cos(0.927)  sin(0.927) 0  sin(0.927) cos(0.927) 0    0 0 1 To rotate back into position…

To move back into position…

All together now… Here is the final set of matrices to achieve a reflection in the arbitrary line given. As we are using column vectors the matrices are applied to the points from right to left. cos(0.927)  sin(0.927) 0  sin(0.927) cos(0.927) 0    0 0 1

cos(0.927)  sin(0.927) 0  sin(-0.927) cos(-0.927) 0    0 0 1

Assignment 1

[Thomas Sampson, BSc 2 Games Software Development, 2Y]

The Result Here is the result of a few reflections in arbitrary lines. Again these screenshots are taken from graphs in Microsoft Excel.

Assignment 1

[Thomas Sampson, BSc 2 Games Software Development, 2Y]

3D Image The following work in this section involves the creation and manipulation of a 3D image. Again I will use Microsoft Excel to display this 3D image, and any effects produced by applying transformation matrix to the points of the 2D image. 1. Obtaining the vertices For my 3D drawing I decided to obtain my using pen, paper and a calculator, rather than a 3D software package. The reason for doing so is that the export / import process is quite time consuming and would be even more so when using 3D vertices. My drawing is of a windmill consisting of a base, top, fans and a door. I used Microsoft Paint as evidence of my calculations. See Figure 1 Figure 1

The Result

Here you can see the vertices imported into Excel.

Here you can see the vertices mapped onto a simple line graph in Microsoft Excel shown in a 2 point perspective projection. I have coloured the different components for aesthetic purposes.

Assignment 1

[Thomas Sampson, BSc 2 Games Software Development, 2Y]

2. Parallel Projection The first method of projection I will demonstrate is parallel projection. Here are some screenshots of parallel projections, along with the matrices used to achieve them.

Orthographic

Orthographic projection allows us to see the image from the plane z=0 using the matrix below.

Isometric

Isometric projection as shown to the left is achieved in three steps. We first rotate around o the vertical axis (y) by 45 and then rotate around the horizontal axis by 35.264. This is then followed by an orthographic projection in the plane z=0 (see matrices at bottom of page). Note: - Angles are shown in radians.

Assignment 1

[Thomas Sampson, BSc 2 Games Software Development, 2Y]

3. Perspective Projection The next method of projection I will demonstrate is perspective projection. I will demonstrate one, two and three point perspective projections and show the matrices used to achieve them. One-point perspective To achieve one-point perspective projections we first have to translate the points before applying a one-point perspective projection matrix. In this example I will translate my points by (10, 10, 0) before applying the projection matrix. The projection matrix takes the parameter d which I will assign the value 50 for the sake of this example. Here are the matrices which when multiplied, give a one-point perspective projection. I have included a screenshot to show the outcome.

Here we can see that a one-point perspective projection can look distorted. A projection of this kind produces only one vanishing point in the z direction, with all other lines parallel with either the x or y axis.

Assignment 1

[Thomas Sampson, BSc 2 Games Software Development, 2Y]

Two-point perspective To achieve two-point perspective projections we have to both translate and rotate the points about the y-axis before applying the projection matrix. For the purpose of this example I will translate my points by (30,-10,0) and then rotate 160o around the y-axis before applying the projection matrix which will receive the parameter of d with a value 200. This will be achieved by multiplying the following three matrices (which will be applied to my points from right to left).

As you can see, a two-point perspective projection is a lot more convincing than a one-point perspective projection, and provides us with two vanishing points rather than one. Here only the vertical lines are parallel (with the y axis).

Three-point perspective Finally I will demonstrate a three-point perspective projection. To achieve this projection we add another step to those used in previous perspective projections. As before we translate the image and rotate around the y-axis, but this time we add an extra rotation about the x-axis before applying the final projection matrix. For this example I will translate by (10.10.20), rotate 160o around the y-axis, and 10o around the x-axis before projection, using the following matrices (applied from right to left).

Assignment 1

[Thomas Sampson, BSc 2 Games Software Development, 2Y]

Three-point perspective continued...

Here I have applied the three point perspective. It is difficult to see this properly with my building as there are not many vertical lines, but where there are (such as on the roof, and the side fans) you can see that they all point to a vanishing point somewhere beneath the image. This projection of course provides us with three vanishing points.

4. Translation transformations Translation in 3D works very much the same was as in 2D but this time allows us to translate in the z-axis in addition to the x and y-axis. Below is the standard 3D translation matrix where a b and c are replaced with the amount you wish to translate in x y and z axis respectively.

This is an example of a translation of (20,10,10). Note: - From here on I will be using a two-point perspective to show my 3D model being translated, rotated and reflected. This means that the projection will be the final step in each matrix multiplication chain, although I will not include this in my examples.

Assignment 1

[Thomas Sampson, BSc 2 Games Software Development, 2Y]

5. Scaling transformations As with translations we can now add a third dimension to our scaling matrix. We use the following standard matrix to achieve scaling in three dimensions. The letters a b and c are replaced with the amount to scale in the x y and z direction respectively.

This is an example of scaling with a stretch of 1.5 in the x direction, 0.5 in the y direction and 2 in the z direction.

6. Rotation around the axis As with 2D axis rotation there are a set of standard matrices for rotating 3D points around the axis, with a third matrix allowing us to rotate around the z axis. The three standard matrices are as follows and produce the following results... Rotation about the x-axis o

In this example x = 45

Rotation about the y-axis o

In this example x = 45

Rotation about the z-axis o

In this example x = 45

Assignment 1

[Thomas Sampson, BSc 2 Games Software Development, 2Y]

7. Rotation around an arbitrary axis Next I will demonstrate how to rotate around an arbitrary axis. This will allow me to specify any two points, which will be joined to make an axis, then use the necessary transformations to rotate my vertices around this axis in 3D space. Step 1 The first step is to take the two points which define the line, and translate them such that one of the points lies on the origin (0,0). If we define our points as (x1,y1,z1,x2,y2,z2) then we can use the following matrix to achieve a shift to the origin.

Step 2 The way in which the rotation works it to make our arbitrary line align perfectly with one of the 3 axis (for which we know standard rotation matrices) and carry out our rotation (followed by reversing the alignment steps). In this step I need to find the angle the arbitrary line makes with the z axis. To do this I take my line in component form ( x2i+y2j+z2k ) and the line of the z axis ( -k ) and find the dot product of the two. This will give me a result θ. I can now rotate θ around the y axis to ensure my arbitrary line lies on the y-z plane using the following matrix…

Step 3 Now that my arbitrary line lies on the y-z plane a single rotation about the x axis will align my line perfectly along the y axis. To find the angle I need to rotate around the x-axis I will take my new line (after the previous matrix has been carried out) and the y axis ( j ) and find the dot product. This will give me a result Φ. I can now rotate Φ about the x axis using the following matrix…

Step 4 Step 4 is to actually carry out the rotation I wish to achieve (Ψ around the y axis as my line is now aligned perfectly ). To do this I use the following matrix…

Assignment 1

[Thomas Sampson, BSc 2 Games Software Development, 2Y]

Steps 5 6 & 7 Now that the rotation has taken place all that is left to do is revers the previous alignment process by rotating and translating my arbitrary line back to where it started. This can be achieved by applying the following three matrices (multiplied from right to left)

The Result Here are some screenshots of rotations of 45 o around arbitrary lines.

8. Reflection in the standard planes As with rotation around the axis, reflection in axis planes is produced using a standard set of matrices, one for each plane. The three standard matrices are as follows and produce the following results...

Reflection in the xy-plane

Reflection in the xz-plane

Reflection in the yz-plane

Assignment 1

[Thomas Sampson, BSc 2 Games Software Development, 2Y]

9. Reflection in an arbitrary plane The final transformation in my report is a reflection in an arbitrary plane. There are different ways of defining a plane, but for my example I will specify my plane in component form, specifying the distance of the plane from the origin (a+b+c), and specifying two lines which lay on the plane. Example plane

a+b+c + x1+y1+z1 + x2+y2+z2 Step 1 The system used to reflect in an arbitrary plane is quite similar to the system used to rotate around an arbitrary line. Again, we begin by translating the plane to the origin. This translation is easy to calculate as we simply reverse the effects of a b and c using the following matrix.

Step 2 The second step is to find the normal to the plane. This allows us to determine which way the plane is pointing/facing. To find the normal to any plane we take the cross product of any two non-parallel lines on that plane. In this case we can use the two lines specified by the plane (x1+y1+z1 and x2+y2+z2). This calculation will give us the equation of the normal, in the form nx+ny+nz Step 3 Similarly to the rotation around an arbitrary line, we now need to align the normal perfectly on an axis as doing so will allow us to reflect in a standard plane. Making the y component of the normal 0 allows us to find the angle θ which the normal makes with the z axis by finding the dot product. We can then rotate around the y axis to bring the normal onto the y-z plane using the following matrix.

Assignment 1

[Thomas Sampson, BSc 2 Games Software Development, 2Y]

Step 4 As the previous rotation has aligned the normal onto the y-z plane we can now use the dot product again to find the angle Φ the normal makes with the y axis. Once Φ has been found we can rotate the normal around the x-axis to align perfectly on the y axis by using the following matrix...

Step 5 Now the normal is aligned directly along the y axis our plane is now looking either directly up or directly down. This allows us to use a standard reflection in the x-z plane using the following matrix...

Steps 6 7 & 8 Now that the reflection has taken place we reverse the steps previously taken in order to return our plane/vertices to their original position. We do so by applying the following matrices (from right to left).

The Result Here is the result of some reflections in arbitrary planes. A portion of the infinite plane is shown in blue and the normal in orange.