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

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

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

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

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

Translation Example y x (2, 3) (1, 1) (3, 1) 1 2 3 4 5 6 7 8 9 10 1 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)

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

Scaling Example y (2, 3) (1, 1) (3, 1) 1 2 3 4 5 6 7 8 9 10 1 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)

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

Rotation Example y (4, 3) (3, 1) (5, 1) 1 2 3 4 5 6 7 8 9 10 1 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.5 + 3*0.866 = 2.0 + 2.598 = 4.598 x’(3, 1) = 3*0.866 – 1*0.5 = 2.598 – 0.5 = 2.098 y’(3, 1) = 3*0.5 + 1*0.866 = 1.5 + 0.866 = 2.366 x’(5, 1) = 5*0.866 – 1*0.5 = 4.33 – 0.5 = 3.83 y’(5, 1) = 5*0.5 + 1*0.866 = 2.5 + 0.866 = 3.366 (3, 1) (5, 1)

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)

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!

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:

Remember Matrix Multiplication Recall how matrix multiplication takes place:

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

Homogenous Coordinates (cont…) Rotation:

Inverse Transformations Transformations can easily be reversed using inverse transformations

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

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

Generalized Pivot Point Rotation… 1 2 3 4

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

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

Generalized Fixed Point Scaling… 1 2 3 4

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?

Scaling in generalized directions 1 2 3 4

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

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

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.5 2 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 -1 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;

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 -1 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([-1 +5 -2 +5]) 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

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

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

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

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

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); }

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).

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).