Transformasi 2D

CS475 COMPUTER GRAPHICS

Maharishi University of Management
Fall 2008
AGENDA
 2D Transforms
 Translation
 Rotation
 Scaling

 Composition
 Homogeneous Coordinates
2D TRANSFORMS
 In many applications it is necessary to modify the
position, orientation or size of a 2D object.
 The most widely used transformations are:
 Translation: move one object to another position
 Rotation: rotate the object around the origin
 Scaling: change the size of the object
2D TRANSFORMS
 We are going to see how to transform one point.
 In order to transform an object, we transform the
points that define it. For instance:
 Polygon: its vertices
 Circle: its center and, perhaps, its radius
2D TRANSFORMS – TRANSLATION
 Adda distance in x
and y to the point.
T P’

P
TRANSLATION
Can be expressed as
components or as
addition of column x'  x  d x , y '  y  d y
vectors
 x'  x  d x 
P'   , P   , T   
 y '  y d y 
P'  P  T
SCALING
Changing the size of an
object
In the figure, sx = sy = 0.5.
The size of the line is
reduced and moved closer
to the origin.
SCALING
 Again as individual
components or as
operations with column
x '  s x  x, y '  s y  y
vectors and matrices.
 x '  sx 0  x 
 '     
 y   0 sy   y
P'  S  P
ROTATION
 A point is rotated around
the origin. x’, y’
 Rotation is through an
angle q. q x, y
ROTATION
Again as components or as
matrix multiplication.

x'  x  cos q  y  sin q

y '  x  sin q  y  cos q
 x'  cos q  sin q   x 
 y '   sin q   
cos q   y 
  
P'  R  P
NOTE ON MATRIX OPERATIONS
 We can represent
points as vector
columns and pre-
multiply by the P'  R  P
matrices,
 Or… P'  (R  P)
T T
 Represent points as
row columns and
post-multiply by the
P'  P  R
T T T

transposed matrices
HOMOGENEOUS COORDINATES
We can represent scaling and
rotations as matrix
multiplications.
P'  T  P
But translations are vector
additions. P'  S  P
This makes composition of
transforms harder.
Why?
P'  R  P
HOMOGENEOUS COORDINATES
So, how do we represent translations as matrix
multiplications?
HOMOGENEOUS COORDINATES
In H.C., a point (x,y) is represented as (x, y,
W).
Two sets (x, y, W) and (x’, y’ W’) represent
the same point in 2D iff a set is a multiple
of the other.
In fact, all tuples (tx, ty, tW) where t!= 0
represent the same point and form a line
in 3D.
When we normalize (divide by W) we get (x,
y, 1).
TRANSFORMS IN H.C.
Translation is  x'  1 0 d x   x 
represented as a  y '  0 1 d    y 
   y  
multiplication. 1  0 0 1  1 

P '  T ( d x , d y )  P,

Or: 1 0 d x 
T (d x , d y )  0 1 d y 
0 0 1 
SCALING
Scaling matrix becomes:  x´  s x 0 0  x 
 y´   0 sy 0   y 
  
1   0 0 1 1 

Or, P´ S ( s x , s y )  P,
sx 0 0
S ( s x , s y )   0 sy 0
 0 0 1
ROTATIONS
Rotation matrix becomes:  x'  cos q  sin q 0  x 
 y'   sin q cos q 0   y 
  
1   0 0 1 1 

Or,
P'  R(q )  P
cos q  sin q 0
R(q )   sin q cos q 0
 0 0 1
RIGID BODY TRANSFORMS
Angles and lengths of lines
are kept. For instance:  r11 r12 t x 
combinations of rotations r r t 
and translations.  21 22 y 
 0 0 1 
If the 2x2 top left
submatrix is orthogonal cos q  sin q 0
(row vectors are  sin q cos q 0
orthogonal and each 
vector has unit length).  0 0 1
For instance: the
rotation matrix.
AFFINE TRANSFORMS
Parallel lines keep parallel. Lengths and
angles may changed.
For instant: start with a square, rotate 45
degrees and apply non-uniform scaling:
COMPOSITION OF TRANSFORMATIONS

Example: Rotate an object around an

arbitrary point.
1. Translate P so that the axis is at the origin
2. Rotate the object
3. Translate the object so that P returns to its position
COMPOSITION OF TRANSFORMATIONS
The final transform becomes a
multiplication of several matrices.

P'  T ( x1 , y1 )  R(q )  T ( x1 , y1 )  P
COMPOSITION OF TRANSFORMATIONS
Example: Scale an object in its place
COMPOSITION OF TRANSFORMATIONS
Again, a multiplication of matrices

P'  T ( x1 , y1 )  S ( S x , S y )  T ( x1 , y1 )  P
INVERSE TRANSFORMATIONS
 The inverse of the transformation is the inverse
of its matrix
 Translation:

1 0  t x 
1  
T  0 1  t y 
0 0 1 
INVERSE TRANSFORMATIONS
 Rotation:

 cos q sin q 0 
1 
R   sin q cos q 0
 0 0 1 
INVERSE TRANSFORMATIONS
 Scaling:

1 / sx 0 0
 
S ( s x , s y )   0 1 / s y 0
 0 0 1
TRANSFORMATION COMPOSITION
PROPERTIES

 Multiplication of matrices is associative

M 3  M 2  M1  (M 3  M 2 )  M1  M 3  (M 2  M1 )
TRANSFORMATION COMPOSITION
PROPERTIES

 Multiplication of matrices is not commutative:

M2  M1  M1  M2
TRANSFORMATION COMPOSITION
PROPERTIES
OTHER TWO-DIMENSIONAL
TRANSFORMATIONS

 What does this transformation matrix do?

1 0 0
0  1 0
 
0 0 1
 Reflection around the x axis.
OTHER TWO-DIMENSIONAL
TRANSFORMATIONS

 What about this one?

  1 0 0
 0 1 0
 
 0 0 1
OTHER TWO-DIMENSIONAL
TRANSFORMATIONS

 And this one?

  1 0 0
 0  1 0
 
 0 0 1
SHEAR
 A transformation that distorts the shape of an
object such that the transformed shape appears
as if the object were composed of internal layers
that had been caused to slide over each other is
called a shear.

1 shx 0
0 1 
0

0 0 1
SHEAR
 The transformed positions are:

x  x  shx  y, y  y
' '
CREDITS
 Images taken from Hearn & Baker. Computer
Graphics with OpenGL. 3rd Ed.
#include <windows.h>
#include <gl\glut.h>
Contoh Translasi
#include <gl\gl.h>
#include <gl\glu.h>

void display()
{
glClear(GL_COLOR_BUFFER_BIT);
glColor3f(0.0,0.0,0.5);

// Gambar kotak pertama di sudut kiri bawah

glRecti(0,0, 10, 10);

//rotasi kotak kedua sebesar 15 derajat terhadap sumbu koordinat(titik kiri bawah)
glRotated(15, 0, 0, 1.0);
glRecti(20,20, 30, 30);

glFlush();
}

void myinit()
{
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(0.0,50.0,0.0,50.0);
glMatrixMode(GL_MODELVIEW);
glClearColor(1.0,1.0,1.0,1.0);
glColor3f(0.0,0.0,0.0);
}
int main(int argc, char* argv[])
{

glutInit(&argc,argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize(400,400);
glutInitWindowPosition(100,100);
glutCreateWindow("Transform");
glutDisplayFunc(display);
myinit();
glutMainLoop();

return 0;
}
CONTOH PROGRAM ROTASI
#include <windows.h>
#include <gl\glut.h>
#include <gl\gl.h>
#include <gl\glu.h>

void display()
{
glClear(GL_COLOR_BUFFER_BIT);
glColor3f(0.0,0.0,0.5);

// Gambar kotak pertama di sudut kiri bawah

glRecti(0,0, 10, 10);

//rotasi kotak kedua sebesar 15 derajat terhadap sumbu koordinat(titik kiri bawah)
glRotated(15, 0, 0, 1.0);
glRecti(20,20, 30, 30);

glFlush();
}
void myinit()
{
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(0.0,50.0,0.0,50.0);
glMatrixMode(GL_MODELVIEW);
glClearColor(1.0,1.0,1.0,1.0);
glColor3f(0.0,0.0,0.0);
}
int main(int argc, char* argv[])
{
glutInit(&argc,argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize(400,400);
glutInitWindowPosition(100,100);
glutCreateWindow("Transform");
glutDisplayFunc(display);
myinit();
glutMainLoop();
SOAL LATIHAN
 Buat checker board (papan catur) Tegak dengan
menggunakan Transformasi Translasi