COMP3421
COMP3421
Week 2 – Transformations in 2D and Vector
Geometry Revision
Revision Exercise
1. Write code to make the world window go
from -2,-2 in the bottom left corner and
2,2 in the top right.
2. Then write code to
draw a house that
looks something
like:
Exercise
1. Write code to draw (an approximation)
of the surface of a circle at centre 0,0
with radius 1 using triangle fans.
2. At home, modify the code to draw (an
approximation) of the outline of a circle
at centre (1,2) with radius 3 using a line
strip. You may want to make the world
window bigger to see it all!
Solution
12 Triangles 32 Triangles
Solution
We can generate points for increasing theta
values using
x = centreX + radius * cos(theta)
y = centreY + radius * sin(theta)
Smaller increments give us more
points/triangles and a more realistic, smoother
‘circle’.
Note: Java math library uses radians, Jogl
libraries tend to use degrees
See code for more details
Transformation Matrices
GL defines a number of different matrices
for transformations.
The two we will encounter are the
projection matrix and the model-view
matrix.
We have already seen the projection
matrix. It tells GL what kind of camera we
are using. We have used an orthographic
camera (more on this later).
Model-view
transformation
The model-view transformation describes how
the current local coordinate system maps to
the view coordinate system.
It is useful to think of it as two transformations
combined:
model transformation – local to world/global
view transformation – world to view/camera/eye
We will look at them separately.
glMatrixMode
You need to tell GL which matrix you are
currently modifying:
// select projection matrix
gl.glMatrixMode(GL2.GL_PROJECTION);
// perform operations …
// select model-view matrix
gl.glMatrixMode(GL2.GL_MODELVIEW);
// perform operations …
Always make sure you have the correct
matrix.
Initialising Matrices
Always make sure you initialise your matrix when
you use it for the first time.
We do this by setting it to the identity matrix (This is
like setting a variable you are going to use for
multiplication to 1)
//Specify which matrix you are using
gl.glMatrixMode(…);
//set it to the identity matrix
gl.glLoadIdentity();
Example
Drawing a house:
gl.glMatrixMode(GL2.GL_MODELVIEW);
gl.glLoadIdentity();
drawHouse();
Transformations
We can then apply different transformations
to the coordinate system:
gl.glTranslated(dx, dy, dz);
gl.glRotated(angle, x, y, z);
gl.glScaled(sx, sy, sz);
Subsequent drawing commands will be in
the transformed coordinate system.
glTranslated
Translate the coordinate space by the
specified amount along each axis.
gl.glMatrixMode(GL2.GL_MODELVIEW);
gl.glLoadIdentity();
gl.glTranslated(1, -1, 0);
drawHouse();
In this case the origin of the
co-ordinate frame moves.
glRotated
Rotate the coordinate space by the
specified angle and axis.
gl.glMatrixMode(GL2.GL_MODELVIEW);
gl.glLoadIdentity();
// rotate 45°
// about the z-axis
gl.glRotated(45, 0, 0, 1);
drawHouse();
Notice, the origin of the co-ordinate frame
doesn’t move
glRotated
Angles are in degrees.
Positive rotations are rotating x towards y.
Negative rotations are rotating y towards x.
gl.glMatrixMode(
GL2.GL_MODELVIEW);
gl.glLoadIdentity();
// rotate -45°
// about the z-axis
gl.glRotated(-45, 0, 0, 1);
drawHouse();
glScaled
Scale the coordinate space by the specified
amounts in the x, y and z (in 3d) directions.
gl.glMatrixMode(GL2.GL_MODELVIEW);
gl.glLoadIdentity();
gl.glScaled(2, 0.5, 1);
drawHouse();
Notice again, the origin of the co-ordinate
doesn’t move.
glScaled
Negative scales create reflections.
gl.glMatrixMode(GL2.GL_MODELVIEW);
gl.glLoadIdentity();
// flip horizontally
gl.glScaled(-1, 1, 1);
drawHouse();
glScaled
Negative scales create reflections.
gl.glMatrixMode(GL2.GL_MODELVIEW);
gl.glLoadIdentity();
// flip vertically
gl.glScaled(1, -1, 1);
drawHouse();
Exercise
What transformation/s would give us this
result?
gl.glMatrixMode(GL2.GL_MODELVIEW);
gl.glLoadIdentity();
// ????
drawHouse();
Solution
gl.glScale(-1,-1,1);
OR
gl.glRotated(180,0,0,1);
OR
gl.glRotated(-180,0,0,1);
glRotated
If the object is not located at the origin, it
might not do what you expect when its co-
ordinate frame is rotated.
The origin of the co-ordinate frame is the
pivot point.
glScaled
If the object is not located at the origin, the
object will move further from the origin if its
co-ordinated frame is scaled
Only points at the origin remain unchanged.
Successive
Transformations
We can think of transformations in two
ways
1. Extrinsic: An object being transformed or
altered within a fixed co-ordinate
system.
2. Intrinsic: The co-ordinate system of the
object being transformed. This is
generally the way we will think of it.
Combining
transforms
A sequence of transforms take place in
successive coordinate systems:
gl.glLoadIdentity();
Combining
transforms
A sequence of transforms take place in
successive coordinate systems:
gl.glLoadIdentity();
gl.glTranslated(1, 0.5, 0);
Combining
transforms
A sequence of transforms take place in
successive coordinate systems:
gl.glLoadIdentity();
gl.glTranslated(1, 0.5, 0);
gl.glRotated(-45, 0, 0, 1);
Combining
transforms
A sequence of transforms take place in
successive coordinate systems:
gl.glLoadIdentity();
gl.glTranslated(1, 0.5, 0);
gl.glRotated(-45, 0, 0, 1);
gl.glScaled(2, 1, 1);
Combining
transforms
A sequence of transforms take place in
successive coordinate systems:
gl.glLoadIdentity();
gl.glTranslated(1, 0.5, 0);
gl.glRotated(-45, 0, 0, 1);
gl.glScaled(2, 1, 1):
gl.glTranslated(-0.5, 0, 0)
Exercise
Draw the co-ordinate frame after
each successive transformation.
gl.glLoadIdentity();
gl.glTranslated(-1, 0.5 , 0);
gl.glRotated(90, 0, 0, 1);
gl.glScaled(1, 2, 1):
Solution
gl.glLoadIdentity();
gl.glTranslated(-1, 0.5 , 0);
gl.glRotated(90, 0, 0, 1);
gl.glScaled(1, 2, 1):
Solution
gl.glLoadIdentity();
gl.glTranslated(-1, 0.5 , 0);
gl.glRotated(90, 0, 0, 1);
gl.glScaled(1, 2, 1):
Solution
gl.glLoadIdentity();
gl.glTranslated(-1, 0.5 , 0);
gl.glRotated(90, 0, 0, 1);
gl.glScaled(1, 2, 1);
Order matters
Note that the order of transformations
matters.
translate then rotate != rotate then translate
translate then scale != scale then rotate
rotate then scale != scale then rotate
Instance
Transformation
Usually we want: translate(T), rotate(R),
scale(S) : M = TRS
We can specify objects once in a
convenient local co-ordinate system
We can have multiple occurrences in the
scene at the desired size orientation and
location by applying the desired instance
transformation
Non-uniform Scaling
then Rotating
If we scale by different amounts in the x
direction to the y direction and then rotate,
we get unexpected and often unwanted
results. Angles are not preserved.
Rotating about an
arbitrary point.
So far all rotations have been about the origin.
To rotate about an arbitrary point.
1. Translate to the point
gl.gltranslated(0.5,0.5,0);
2. Rotate
gl.glrotated(45,0,0,1);
3. Translate back again
gl.gltranslated(-0.5,-0.5,0);
Rotating about an
arbitrary point.
Current
Transformation (CT)
Calls to glTranslate, glRotate and glScale
modify (post multiply – more on this later)
the current transformation/co-ordinate
frame.
Every time glVertex2d() is called, the
fixed function pipeline transforms the
given point by the CT.
Push and pop
Often we want to store the current
transformation/coordinate frame, transform
it and then restore the old frame again.
GL provides a stack of matrices for this
purpose. Push and pop using:
// store the current matrix
gl.glPushMatrix();
// restore the last pushed matrix
gl.glPopMatrix();
Exercise
gl.glLoadIdentity();
gl.glPushMatrix();
gl.glTranslated(1,2,0);
drawHouse(gl);
gl.glPushMatrix();
gl.glScaled(0.5,0.5,1);
drawHouse(gl);
gl.glPopMatrix();
gl.glPushMatrix();
gl.glRotated(45,0,0,1);
drawHouse(gl);
gl.glPopMatrix();
gl.glPopMatrix();
Scene Graphs
Consider drawing and animating a figure
such as this person:
We could calculate all the
vertices based on the
angles and lengths,
but this would
be long and error-prone.
Scene graph
To represent a complex scene we use a
scene graph. This tree describes how
different objects in the scene are connected
together: Torso
LU Arm Head
LL Arm
L Hand L Foot R Foot R Hand
LU Leg
LL Leg
RU Leg
RL Leg
RU Arm
RL Arm
Coordinate system
We draw each part in its own local
coordinate system:
// draw a foot
gl.glBegin(GL2.GL_POLYGON);
gl.glVertex2d(0, 0);
gl.glVertex2d(0, -1);
gl.glVertex2d(2, -1);
gl.glEnd();
(0, 0)
(0, -1) (2, -1)
x
y
Coordinate system
Then we transform the coordinate system:
translating
rotating
scaling
To get it into the position we want.
But from the object’s point of view, nothing
has changed.
(0, 0) (0, -1)
(2, -1)
Scene graph
Each part draws itself in its own local
coordinate frame and then transforms the
coordinate frame to draw its subparts
appropriately.
When a node in the graph is moved, all its
children move with it.
Scene graph
pseudocode
drawTree() {
push model-view matrix
translate to new origin
rotate
scale
draw this object
for all children:
child.drawTree()
pop matrix
}
Camera
So far we have assumed that the camera is
positioned at the world coordinate (0, 0).
It is useful to imagine the camera as an
object itself, with its own position, rotation
and scale.
View transform
The world is rendered as it appears in the
camera’s local coordinate frame.
The view transform converts the world
coordinate frame into the camera’s local
coordinate frame.
Note that this is the inverse of the
transformation that would convert the
camera’s local coordinate frame into world
coordinates.
View transform
Consider the world as if it was centered on
the camera. The camera stays still and the
world moves.
Moving the camera left
= moving the world right
Rotating the camera clockwise
= rotating the world anticlockwise
Growing the camera’s view
= shrinking the world
View transform
Mathematically if:
Then the view transform is:
Implementing a
camera
To implement a camera, we need to apply
the view transform before the model
transform:
gl.glMatrixMode(GL2.GL_MODELVIEW);
gl.glLoadIdentity();
// apply the view transform
gl.glScaled(1.0 / cameraScale, …);
gl.glRotated(-cameraAngle, 0, 0, 1);
gl.glTranslated(-camX, -camY, 0);
// apply the model transform + draw…
In the scene graph
We can add the camera as an object in our
scene graph:
Camera
Torso
LU Arm Head
LL Arm
L Hand L Foot R Foot R Hand
LU Leg
LL Leg
RU Leg
RL Leg
RU Arm
RL Arm
In the scene graph
We need to compute the camera’s
transformations in world coordinates (and
then get the inverse) in order to compute
the view transform.
We can do this by working recursively up
the scene graph.
We will cover the maths necessary to do
this calculation in the rest of this and the
following lecture.
Assignment 1
Game Engine: Scene Graph (Tree)
Provided code: Fill in Code in TODO
comments/tags
GameObject : node in the n-ary tree
– each node has t, r, s
(uniform scaling)
– 0..n children
– 1 parent unless it is the
special root node
.
Scene Graph Class
Diagram
GameObject
Polygonal
GameObject
Camera
Assignment 1
Automarking
• Junit 4 Unit Tests
• diff image files that you output
with required image output
Tutor subjective marking
• MyCoolGameObject
• Bonus Game (also course vote)
Exercise
Draw a scene graph for a sun similar to this
Create a MyCoolObject to create it.
Vector and Matrix
Revision
To represent coordinate frames and easily
convert points in one frame to another we
use vectors and matrices.
Some revision first.
Vectors
Having the right vector tools greatly
simplifies geometric reasoning.
A vector is a displacement.
A
B
v
Vectors
Having the right vector tools greatly
simplifies geometric reasoning.
A vector is a displacement.
We represent it as a
tuple of values in a particular coordinate
system.
A
B
v(1,1) (3,1)
(4,2)
Points vs Vectors
Vectors have
• length and direction
• no position
Points have
• position
• no length, no direction
Points and Vectors
The sum of a point and a vector is a point.
P + v = Q
Q
P
v
Points and Vectors
The sum of a point and a vector is a point.
P + v = Q
Which is the same as saying
The difference between two points is a
vector:
v = Q – P
Adding vectors
By adding components:
Subtracting vectors
By subtracting components:
Magnitude
Magnitude (i.e. length)
Normalisation(i.e. direction):
Warning: You can’t normalize the zero vector
1. What is the vector v from P to Q if
P = (4,0), Q = (1,3) ?
2. Find the magnitude of the vector (1,1)
3. Normalise the vector (8,6)
Exercises
1. What is the vector v from P to Q if
P = (4,0), Q = (1,3) ?
v = Q – P
= (1,3) – (4,0)
= (1 – 4 ,3 – 0 )
= (-3,3)
Solutions
P
Q
2. Find the magnitude of the vector (1,1)
|(1,1)| = sqrt(1^2 + 1^2)
= sqrt(2)
= 1.4
Magnitude is 1.4
Solutions
3. Normalise the vector (8,6)
|(8,6)| = sqrt(8^2 + 6^2)
= sqrt(64+36)
= 10
Normalised vector is (8, 6) / 10
= (0.8,0.6)
Solutions
Dot product
Definition:
Example: (1,2) . (-1,3) = 1*-1 + 2*3 = 5
Properties:
Angle between
vectors
Normals in 2D
If two vectors are perpendicular, their dot
product is 0.
If n = (nx, ny) is a normal to
p = (x, y)
p · n = xn x + yn y = 0
So either unless one is the 0 vector
n = (y, −x) or n = (−y, x)
Cross product
Only defined for 3D vectors:
Properties:
Can use to find normals
a
b
a × b
AxB vs BxA
Assuming a right handed co-ordinate
system: to find the direction of AxB curl
fingers of your right hand from A to B and
your thumb shows the direction.
BxA would be in the opposite direction.
Memory Aid
a x b = | i j k |
| a1 a2 a3 |
| b1 b2 b3 |
= a2b3 – a3b2 + a3b1 – a1 b3 + a1b2-a2b1
Cross product
The magnitude of the cross product is the
area of the parallelogram formed by the
vectors:
a
b
|a × b|
1. Find the angle between vectors (1,1)
and (-1,-1)
2. Is vector (3,4) perpendicular to (2,1)?
3. Find a vector perpendicular to vector a
where a = (2,1)
4. Find a vector perpendicular to vectors a
and b where a = (3,0,2) b = (4,1,8)
Exercises
Solutions
1. Find the angle between vectors (1,1) and
(-1,-1)
|(1,1)| = sqrt(2)
|(-1,-1)| = sqrt(2)
cos(t) = (1/sqrt(2),1/sqrt(2)).(-1/sqrt(2),-1/sqrt(2))
= -1
t = 180 degrees (ie anti-parallel)
Solutions
2. Is (3,4) perpendicular to (2,1)?
(3,4).(2,1) = 6 + 4 = 10
10 != 0 so not perpendicular ( < 90degrees) 3. Find a vector perpendicular to vector a where a = (2,1) (-1,2) or (1,-2) Solutions 4. Find a vector perpendicular to vectors a and b where a = (3,0,2) b = (4,1,8) axb = (0-2, 8-24,3-0) = (-2,-16,3) OR bxa = (2,16,-3) Matrices Matrix multiplication = Matrix multiplication = 1x2 + 0x0 +3x1 = 5 Matrix multiplication = Matrix multiplication = Matrix multiplication = Matrix multiplication = Matrix multiplication = Matrix multiplication = Matrix multiplication = And so on… Matrix multiplication = Homework Revise basics of vectors and matrix multiplication if you need to as we will use them extensively from next week on.