Kevin Song
I'm a student at UT (that's the one in Austin) who studies things.
Transformations
Shapes and Hierarchies
Shapes form complex structures via hierarchies. These make it easier to manipulate structures.
How do we actually do the manipulations?
Example: We should be able to just rotate stick person's arm at the shoulder, and ball will move (instead of having to move everything individually).
Transformations
- One of the foundations of rendering in computer graphics
- Allow us to manipulate objects within a scene
Mathematical Representations
The field of linear algebra has deep connections to transformations in both 2D and 3D
Students spend their whole first month struggling with the linear algebra in spite of this.
In graphics for CS majors, we have a prerequisite of linear algebra for the course.
Representations
A point \(p\) is a vector:
p = \begin{bmatrix}
x \\
y
\end{bmatrix}
A transformation \(M\) is a matrix:
M
=
\begin{bmatrix}
a & b \\
c & d
\end{bmatrix}
We perform matrix multiplication to apply the transformation: \( p' = M p\)
\begin{bmatrix}
x'\\
y'
\end{bmatrix}
=
\begin{bmatrix}
a & b \\
c & d
\end{bmatrix}
\begin{bmatrix}
x\\
y
\end{bmatrix}
Matrix Multiplication
\begin{bmatrix}
x'\\
y'
\end{bmatrix}
=
\begin{bmatrix}
a & b \\
c & d
\end{bmatrix}
\begin{bmatrix}
x\\
y
\end{bmatrix}
\begin{bmatrix}
x'\\
y'
\end{bmatrix}
=
\begin{bmatrix}
a & b \\
c & d
\end{bmatrix}
\begin{bmatrix}
x\\
y
\end{bmatrix}
x' = ax + by
y' = cx + dy
I = \begin{bmatrix}
1 & 0 \\
0 & 1
\end{bmatrix}
What if we multiply by the so-called identity matrix?
Scaling
(1,1)
(2,2)
M_1 = \begin{bmatrix}
2 & 0 \\
0 & 2
\end{bmatrix}
M_2 = \begin{bmatrix}
0.5 & 0 \\
0 & 2
\end{bmatrix}
(2,2)
(4,4)
Reflection
Shear
\begin{bmatrix}
1 & b\\
0 & 1
\end{bmatrix}
x' = x + by
y' = y
Rotation
\theta
\begin{bmatrix}
1\\
0
\end{bmatrix}
\rightarrow
\begin{bmatrix}
\cos(\theta)\\
\sin(\theta)
\end{bmatrix}
\begin{bmatrix}
0\\
1
\end{bmatrix}
\rightarrow
\begin{bmatrix}
-\sin(\theta)\\
\cos(\theta)
\end{bmatrix}
M_r = R(\theta) = \begin{bmatrix}
\cos(\theta) && -\sin(\theta)\\
\sin(\theta) && \cos(\theta)
\end{bmatrix}
Linear Transformations
All of these transformations are considered linear transformations:
- Scaling
- Reflection
- Shearing
- Rotation
What very important operation is missing?
Translation
We want to be able to move objects through space.
But we can't do this using our standard linear algebra...
\begin{bmatrix}
x'\\
y'
\end{bmatrix}
=
\begin{bmatrix}
a & b \\
c & d
\end{bmatrix}
\begin{bmatrix}
0\\
0
\end{bmatrix}
Homogeneous Coordinates
\begin{bmatrix}
x'\\
y'\\
1
\end{bmatrix}
=
\begin{bmatrix}
a & b & t_x\\
c & d & t_y\\
0 & 0 & 1
\end{bmatrix}
\begin{bmatrix}
x\\y\\1
\end{bmatrix}
p' = M p
Combining Transformations
If we have a single, complex matrix, we can simply apply it to our object to get the resulting transform.
But we can (and often should!) think about it as a sequence of simpler transformations:
Order Matters!
Mathematical reason: matrix multiplication is generally not commutative.
Intuitive: what happens if we translate then reflect vs reflect then translate?
No Transformations Applied
Translate Only
Rotate Only
translate()
rotate()
draw()
rotate()
translate()
draw()
Transformations in Processing
-
translate(x, y): applies a translation which moves points by (x,y) -
rotate(θ): rotates by θ radians scale(p): Scales by p, where 1.0 is no change.
Transformations in Processing
Transformations are a little like modes, where the transformation function affects all future draw calls.
Two major differences:
- Transforms stack instead of replacing the previous transform.
- The transform is reset at the top of the draw() loop.
void draw(){
translate(100, 100);
ellipse(0, 0, 100, 100);
translate(200, 200);
ellipse(0, 0, 60, 60);
translate(300, 300);
ellipse(0, 0, 35, 35);
}
Undoing Transformations
Ctrl+Z 101
Cancelling out a Transform
rotate(radians(45));
translate(200, 0);
// Undo our transformation
rotate(radians(-45));
translate(-200, 0);
shape(ref);
Wuh woh.
Shoes-Socks Theorem
Cancelling out a Transform, but properly
rotate(radians(45)); // shoes
translate(200, 0); // socks
translate(-200, 0); // isocks
rotate(radians(-45)); // ishoes
shape(ref);Bookmarking Transformations
- Processing gives us tools to save and restore transformations.
-
pushMatrix()takes the current global transformation and records it in a matrix stack. You can think of this as a global variable that is hidden from you and can only be accessed with the functions here.
-
popMatrix()pops a transformation matrix off of the stack and makes it the current transformation matrix.
- These functions let us manipulate objects at different levels in the scene hierarchy.
void draw(){
pushMatrix();
translate(100, 100);
ellipse(0, 0, 100, 100);
popMatrix();
pushMatrix();
translate(200, 200);
ellipse(0, 0, 60, 60);
popMatrix();
pushMatrix();
translate(300, 300);
ellipse(0, 0, 35, 35);
popMatrix();
}
Why Transformations?
We can already emulate scale by passing parameters to rect(). Why not just add a rotation parameter?
rect(0, 0, 100, 20, PI/8)
?
Composing transformations lets us describe very complex motion with simple code.
By author Zorgit on Wikimedia, CC-BY-SA 3.0: https://commons.wikimedia.org/wiki/File:Cycloid_f.gif
Composing transformations lets us describe very complex motion with simple code.
void draw(){
translate(300, 300);
rotate(frameCount * 0.03);
translate(50, 0);
translate(30, 0);
rotate(frameCount * 0.05);
translate(10, 0);
rotate(frameCount * 0.1);
rect(0, 0, 100, 100);
}
In 3D, the "rotate" parameter gets complex
We need at least four* parameters to describe a rotation in three dimensions.
* terms and conditions apply
We need more spatial arguments as well!
box(x, y, z, width, height, depth, rot1, rot2, rot3, rot4);In 3D, transformations are heavily used to avoid parameter explosions:
- Boxes are always created at the origin
- Spheres are always created at the origin
- There are no ellipsoids (you have to scale a sphere)
Hands-On: Using Transformations
- Translate the screen so that the origin (0,0) is at the center of the screen. Draw a solid black circle at (0,0) to demonstrate this.
- Draw a shape of your choice. Before drawing it, translate, then rotate, then scale the shape (pick your own parameters for the transforms).
- Draw the same shape as you did in step 2, with the same parameters for the transforms. However, this time, apply the scale first, then rotate, then translate.
- Draw an object of your own choice and apply your own set of transformations to it.
- OPTIONAL: Animate a rectangle orbiting your black circle using only transformations. See if you can keep the rectangle axis-aligned while it orbits!
The transformation in step 1 should apply to all of the other steps. For Steps 2-5, you may want to pushMatrix() and popMatrix() so that your transformations don't get too confusing.
Index Cards!
- Your name and EID.
- One thing that you learned from class today. You are allowed to say "nothing" if you didn't learn anything.
- One question you have about something covered in class today. You may not respond "nothing".
- (Optional) Any other comments/questions/thoughts about today's class.
[08b]: Transforms
By Kevin Song
