1. © 2008, Fayyaz A. Afsar, DCIS, PIEAS.
Allah says
o عَلَّمَهُ الْبَيَانَ
He has taught him speech (and intelligence).
Al-Qur'an, (Ar-Rahman)
© 2008, Fayyaz A. Afsar, DCIS, PIEAS.

2. Majed Bouchahma boumaged@unizwa.edu.om University of Nizwa
2D Transformations
Majed Bouchahma
University of Nizwa

3. Contents In today’s lecture we’ll cover the following:
Why transformations
Transformations
Translation
Scaling
Rotation
Homogeneous coordinates
Matrix multiplications
Combining transformations

4. Why Transformations?
Images taken from Hearn & Baker, “Computer Graphics with OpenGL” (2004)
In graphics, once we have an object described, transformations are used to move that object, scale it and rotate it

5. Translation Simply moves an object from one position to another
xnew = xold + dx ynew = yold + dy
Note: House shifts position relative to origin y x 1 2 3 4 5 6 7 8 9 10

6. Translation Example y x (2, 3) (1, 1) (3, 1) 1 2 3 4 5 6 7 8 9 101 2 3 4 5 6 7 8 9 10
(2, 3)
Translate by (5, 3)
x’ = x + dx
y’ = y + dy
(1, 1)
(3, 1)

7. Scaling Scalar multiplies all coordinates
WATCH OUT: Objects grow and move!
xnew = Sx × xold ynew = Sy × yold
Note: House shifts position relative to origin y x 1 2 3 4 5 6 7 8 9 10

8. Scaling Example y (2, 3) (1, 1) (3, 1) 1 2 3 4 5 6 7 8 9 101 2 3 4 5 6 7 8 9 10
(2, 3)
Scale by (2, 2)
x’ = sx*x
y’ = sy*y
(1, 1)
(3, 1)

9. Rotation Rotates all coordinates by a specified angle
xnew = xold × cosθ – yold × sinθ
ynew = xold × sinθ + yold × cosθ
Points are always rotated about the origin y 6 5 4 3 2 1 x 1 2 3 4 5 6 7 8 9 10

10. Rotation Example y (4, 3) (3, 1) (5, 1) 1 2 3 4 5 6 7 8 9 101 2 3 4 5 6 7 8 9 10
(4, 3)
xnew = xold × cosθ – yold × sinθ
ynew = xold × sinθ + yold × cosθ
1 radian = 180/π degrees
cos(π/6)=0.866
sin(π/6)=0.5
x’(4, 3) = 4*0.866 – 3*0.5 = 3.46 – 1.5 = 1.96
y’(4, 3) = 4* *0.866 = = 4.598
x’(3, 1) = 3*0.866 – 1*0.5 = – 0.5 = 2.098
y’(3, 1) = 3* *0.866 = = 2.366
x’(5, 1) = 5*0.866 – 1*0.5 = 4.33 – 0.5 = 3.83
y’(5, 1) = 5* *0.866 = = 3.366
(3, 1)
(5, 1)

11. Homogeneous Coordinates
A point (x, y) can be re-written in homogeneous coordinates as (xh, yh, h)
The homogeneous parameter h is a non- zero value such that:
We can then write any point (x, y) as (hx, hy, h)
We can conveniently choose h = 1 so that (x, y) becomes (x, y, 1)

12. Why Homogeneous Coordinates?
Mathematicians commonly use homogeneous coordinates as they allow scaling factors to be removed from equations
We will see in a moment that all of the transformations we discussed previously can be represented as 3*3 matrices
Using homogeneous coordinates allows us use matrix multiplication to calculate transformations – extremely efficient!

13. Homogeneous Translation
The translation of a point by (dx, dy) can be written in matrix form as:
Representing the point as a homogeneous column vector we perform the calculation as:

14. Remember Matrix Multiplication
Recall how matrix multiplication takes place:

15. Homogenous Coordinates
To make operations easier, 2-D points are written as homogenous coordinate column vectors
Translation:
Scaling:

16. Homogenous Coordinates (cont…)
Rotation:

17. Inverse Transformations
Transformations can easily be reversed using inverse transformations

18. Combining Transformations
A number of transformations can be combined into one matrix to make things easy
Allowed by the fact that we use homogenous coordinates

19. Generalized Pivot Point Rotation
Imagine rotating a polygon around a point (xr,yr) other than the origin
Transform to centre point to origin
Rotate around origin
Transform back to centre point

20. Generalized Pivot Point Rotation…1 2 3 4

21. Generalized Pivot Point Rotation…
The three transformation matrices are combined as follows
REMEMBER: Matrix multiplication is not commutative so order matters

22. Generalized Fixed Point Scaling
Consider a fixed point (xf,yf) with respect to which scaling is to be performed
Steps
Translate object so that the fixed point coincides with the origin
Scale the object with respect to the origin
Use the inverse translation to return the object to its original position

23. Generalized Fixed Point Scaling…1 2 3 4

24. Scaling in generalized directions
Rotate the points by the specified angle so that the scaling axes correspond to the XY axes
Perform scaling
Rotate back
What about scaling in a generalized direction about a fixed point?

25. Scaling in generalized directions1 2 3 4

26. Reflection Produces a mirror image of an object
Reflection about the x-axes is done by

27. Reflection… About the y-axis
Rotate the original point by 90 degrees (interchange the x and y axes)
Reflect about the x-axes (original y-axes)
Rotate by -90 degrees

28. Generalized Reflection…
If the reflection is to be made about a line y=(Δy/ Δx)x+c
Translate the point by –c in the y direction
Rotate the point by -arctan(Δy, Δx)
Perform reflection about the x-axis
Rotate the point by arctan(Δy, Δx)
Translate the point by +c in the y direction
function reflecttest
P=[1 1 1; 2 1 1; ;1 1 1]';
dx=2;dy=8;c=-1.5;
t=atan2(dy,dx)*180/pi;
M=trxy(0,c)*rot(t)*[1 0 0; ; 0 0 1]*rot(-t)*trxy(0,-c)
Pn=M*P; P
plot(P(1,:),P(2,:),'.-'), hold on,plot(Pn(1,:),Pn(2,:),'r.-'),axis equal
x=0:0.1:3;y=(dy/dx)*x+c;plot(x,y,'k-'),grid 1
function R=rot(t)
t=t*pi/180;
R=[cos(t) -sin(t) 0;
sin(t) cos(t) 0;
0 0 1];
function T=trxy(dx,dy)
T=[1 0 dx;
0 1 dy;

29. y=(3/2)x-2 function test close all P=[1 1 1; 2 1 1; 1.5 3 1;1 1 1]';
dx=2;dy=3;c=-2;
t=atan2(dy,dx)*180/pi;
M{1}=trxy(0,-c);
M{2}=rot(-t);
M{3}=[1 0 0; ; 0 0 1];
M{4}=rot(t);
M{5}=trxy(0,c);
Pn=P;
x=-1:0.1:5;y=(dy/dx)*x+c;
XY0=[x;y;ones(size(x))];
XY=XY0;
for k=1:length(M)
Pn=M{k}*Pn;
XY=M{k}*XY;
figure
plot(P(1,:),P(2,:),'m.-','linewidth',2),hold on
plot(XY0(1,:),XY0(2,:),'b-','linewidth',2) ,
plot(XY(1,:),XY(2,:),'k-','linewidth',2) ,
plot(Pn(1,:),Pn(2,:),'r.-','linewidth',2)
axis([ ])
axis equal
legend('Original Points','Original Line','Transformed Line','Transformed Points')
grid
end
function R=rot(t)
t=t*pi/180;
R=[cos(t) -sin(t) 0;
sin(t) cos(t) 0;
0 0 1];
function T=trxy(dx,dy)
T=[1 0 dx;
0 1 dy;
y=(3/2)x-2

30. 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
The x-coordinate of each point changes depending upon its y-coordinate and the y-coordinate remains constant
x’=x+shxy
y’=y

31. Transformations between coordinate systems
Cartesian to Non Cartesian Transformation
To polar: (x,y) to (r,θ)

32. Transformations between coordinate systems…
Cartesian to Cartesian Transformations x’ y’
(0’,0’) x y
(0,0) θ
(x0,y0)

33. Affine Transformation
A transformation of the form
Linear
Parallel lines map to parallel lines
Finite points map to finite points
Translation, rotation, scaling, reflection and shear
Are affine transformation
Any 2D affine transform can be written as a combination of these transforms

34. Transformations in OpenGL
The model view transform is responsible for performing object or camera transformations
Set the matrix mode to GL_MODELVIEW in the reshape function and set the transformation matrix as identity matrix in the reshape even handler (call back function)
void reshape (int w, int h) {
// on reshape and on startup, keep the viewport to be the entire size of the window
glViewport (0, 0, (GLsizei) w, (GLsizei) h);
glMatrixMode (GL_PROJECTION);
glLoadIdentity ();
// keep our logical coordinate system constant
gluOrtho2D(0.0, 160.0, 0.0, 120.0);
glMatrixMode(GL_MODELVIEW); }

35. Transformations in OpenGL
Before drawing the transformed version of an object whose real world coordinate drawing is done by draw_something(), call the corresponding transform functions
void Display(void) { …
//reset transformation state
glLoadIdentity();
// apply translations as required
glTranslatef(xpos,ypos, 0.);
glScalef(sx,sy, 1.);
glRotatef(rot, 0.,0.,1.);
// draw the object
draw_something(); }
void glRotatef( GLfloat angle, GLfloat x, GLfloat y, GLfloat z )
glRotate computes a matrix that performs a counterclockwise rotation of angle degrees about the
vector from the origin through the point (x, y, z).

36. End of Lecture-5
Work expands so as to fill the time available for its completion.
Cyril Northcote Parkinson (1909–1993)
British political scientist, historian, and writer.
Parkinson's Law (1958).