by Jim X. Chen George Mason University Transformation and Viewing.1. Plane Example: J2_0_2DTransform

by Jim X. Chen George Mason University Transformation and Viewing.2. 2D TRANSFORMATIONS Translate We have: P’ P d x d y y x

by Jim X. Chen George Mason University Transformation and Viewing.3. Scale or

by Jim X. Chen George Mason University Transformation and Viewing.4. Rotate or P’ = RP x’ = rcos(  ); y’ = rsin(  ); x’ = r(cos  cos  – sin  sin  ); y’ = r(sin  cos  + cos  sin  ); r 

by Jim X. Chen George Mason University Transformation and Viewing.5. Homogeneous coordinates P’ = T+P; P’ = S*P; P’ = R*P; If points are expressed in homogeneous coordinates, all three transformations can be treated as multiplications. That is, P’ = T(d x,d y ) P That is, P’ = S (S x,S y ) P That is, P’ = R(  ) P

by Jim X. Chen George Mason University Transformation and Viewing.6. // Let’s say the current matrix on matrix[3][3] is M my2dLoadIdentity();// M<=I; my2dTranslatef(float dx, float dy); // M<=MT(dx, dy); my2dRotatef(  ); // M<= MR(  ); my2dScalef(float sx, float sy); // M<=MS(sx, sy); Example: J2_0_2DTransform Float M[3][3]; // Current Matrix multiply Implementation (my2dGL)

by Jim X. Chen George Mason University Transformation and Viewing.7. Combination of translations and transformation matrix  ' 22 '' 11 ',,,PddTPPddTp yxyx  p ''  Float matrix[3][3]; my2dLoadIdentity(); my2dTranslatef(dx2,dy2); my2dTranslatef(dx1,dy1); transDraw(p); // what is transDraw? transDraw(object); // vertices are transformed first // before rendering transDraw(float x, y) { mult(&x, &y, matrix); // (x, y) is transformed by the matrix Draw(x, y); }  2211,,ddTPddT yxyx p p’ p’’

Example: J2_0_2DTransform public void display(GLAutoDrawable drawable) { if (cnt 200) { flip = -flip; } cnt = cnt+flip; gl.glClear(GL.GL_COLOR_BUFFER_BIT); // white triangle is scaled gl.glColor3f(1, 1, 1); my2dLoadIdentity(); my2dScalef(cnt, cnt); transDrawTriangle(vdata[0], vdata[1], vdata[2]); // red triangle is rotated and scaled gl.glColor3f(1, 0, 0); my2dRotatef((float)cnt/15); transDrawTriangle(vdata[0], vdata[1], vdata[2]); // green triangle is translated, rotated, and scaled gl.glColor3f(0, 1, 0); my2dTranslatef((float)cnt/100, 0.0f); transDrawTriangle(vdata[0], vdata[1], vdata[2]); } 2002 by Jim X. Chen George Mason University

Transformation and Viewing.9. COMPOSITION OF 2D TRANSFORMATION To rotate about a point P1 1. Translate so that P1 is at the origin 2. Rotate 3. Translate so that the point returns to P1(x1, y1) T(x1, y1)R(  )T(-x1, -y1) 2D Examples Plane Lab Plane Lab x y o    B f C f A f Example J2_1_Clock2d

by Jim X. Chen George Mason University Transformation and Viewing.10. Example 1: draw a current time clock in 2D space h’=T(c)R(-  )T(-c)h drawHand(c, h’); y y y y x' 1 y' x y  cos  sin 0  sin–  cos x 0 – 0 1 y 0 – x 1 y 1 1 =

by Jim X. Chen George Mason University Transformation and Viewing.11. h’=T(c)R(-  )T(-c)h drawHand(c, h’); Float matrix[3][3]; my2dLoadIdentity(); my2dTranslatef(x0, y0); my2dRotatef(-  ); my2dTranslatef(-x0, -y0); transDraw(c, h); //transVertex(V, V1);

J2_1_Clock2d public void display(GLAutoDrawable glDrawable) { my2dLoadIdentity(); my2dTranslatef(c[0], c[1]); my2dRotatef(-hAngle); my2dTranslatef(-c[0], -c[1]); transDrawClock(c, h); } 2002 by Jim X. Chen George Mason University

Transformation and Viewing.13. Example 2: Reshape a rectangular area: T(P 2 )S(s x,s y )T(-P 1 )P After reshaping, the area and all the vertices (or models) in the area go through the same transformation Example: J2_2_Reshape

J2_2_Reshape: Mouse 2002 by Jim X. Chen George Mason University public class J2_2_ReshapePushPop extends J2_1_Clock2d implements MouseMotionListener { // the point to be dragged as the lowerleft corner private static float P1[] = {-WIDTH/4, -HEIGHT/4}; // the lowerleft and upperright corners of the rectangle private static float v0[] = {-WIDTH/4, -HEIGHT/4}; private static float v1[] = {WIDTH/4, HEIGHT/4}; // reshape scale value private float sx = 1, sy = 1; ……

J2_2_Reshape: Mouse 2002 by Jim X. Chen George Mason University public class J2_2_ReshapePushPop extends J2_1_Clock2d implements MouseMotionListener { …… // when mouse is dragged, a new lowerleft point and scale value for the rectangular area public void mouseDragged(MouseEvent e) { float wd1 = v1[0]-v0[0]; float ht1 = v1[1]-v0[1]; // The mouse location, new lowerleft corner P1[0] = e.getX()-WIDTH/2; P1[1] = HEIGHT/2-e.getY(); float wd2 = v1[0]-P1[0]; float ht2 = v1[1]-P1[1]; // scale value of the current rectangular area sx = wd2/wd1; sy = ht2/ht1; }

J2_2_Reshape: display 2002 by Jim X. Chen George Mason University public void display(GLAutoDrawable glDrawable) { // reshape according to the current scale my2dLoadIdentity(); my2dTranslatef(P1[0], P1[1]); my2dScalef(sx, sy); my2dTranslatef(-v0[0], -v0[1]); … }

by Jim X. Chen George Mason University Transformation and Viewing.17. Robot Arm Robot Arm Example 3: draw an arbitrary 2D robot arm: Example: J2_3_Robot2d

by Jim X. Chen George Mason University

y o A B C x y o  A f B’ C’ x y o    B f C f A f x y o   B f C ’ ’ A f Initial position: (A, B, C) Step 1 Step 2Step 3 Final position Method I: x Float matrix[3][3]; my2dLoadIdentity(); // Af=R(a)A; B1=R(a)B; C1=R(a)C; my2dRotatef(  ); transVertex(A, Af); transVertex(B, B1); transVertex(C, C1); Draw (O, Af); my2dLoadIdentity(); // M=T(Af)R(b)T(-Af); my2dTranslatev(Af); my2dRotatef(  ); my2dTranslatev(-Af); //Bf=MB1; C2=MC1 transVertex(B1, Bf); transVertex(C1, C2); Draw(Af, Bf); my2dLoadIdentity(); // M = T(Bf)R(g)T(-Bf); my2dTranslatev(Bf); my2dRotatef(  ); my2dTranslatev(-Bf); transVertex(C2, Cf); Draw(Bf, Cf);

C y o A B Step 1 x 2002 by Jim X. Chen George Mason University x y o  C’’ A B’ x y o  C’ A B Step 2 Method II:  A f = R(  )A; B f = R(  )B’ = R(  )T(A)R(  )T(-A)B; C f = R(  )C’’ = R(  )T(A)R(  )T(-A)T(B)R(  )T(-B)C. OpenGL doesn’t return the transformed positions Float matrix[3][3]; my2dLoadIdentity(); my2dRotatef(  ); transDraw(O, A); // I*R(a) // we may consider local coordinates: origin at A my2dTranslatev(A); my2dRotatef(  ); my2dTranslatev(-A); transDraw(A, B); // I*R(a)T(A)R(b)T(-A) // we may consider local coordinates: origin at B my2dTranslatev(B); my2dRotatef(  ); my2dTranslatev(-B); transDraw(B, C); x y o    B f C f A f

by Jim X. Chen George Mason University A f = R(  )A; B f = T(A f )T(-A)B’ =T(A f )R(  )T(-A)B; C f = T(B f )T(-B)C’ =T(B f )R(  )T(-B)C. Float matrix[3][3]; my2dLoadIdentity(); my2dRotatef(  ); transVertex(A, Af); Draw (O, Af); my2dLoadIdentity(); my2dTranslatev(Af); my2dRotatef(  +  ); my2dTranslatev(-A); transVertex(B, Bf); Draw (Af, Bf); my2dLoadIdentity(); my2dTranslatev(Bf); my2dRotatef(  +  ); my2dTranslatev(-B); transVertex(C2, Cf); Draw(Bf, Cf); x y o    B f C f A f Step 3 Final position C y o A B Step 1 x

by Jim X. Chen George Mason University Transformation and Viewing.22. TRANSFORMATION MATRIX STACK Simulate a real clock? Animate robot arm? Need multiple matrices to save different states? Matrix stack Float matrix[POINTER][3][3]; myPushMatrix(); pointer++; copy the matrix from (pointer – 1); myPopMatrix(); pointer--; multiply

Matrix Stack J2_2_Reshape my2dLoadIdentity(); my2dTranslatef(P1[0], P1[1]); my2dScalef(sx, sy); my2dTranslatef(-v0[0], -v0[1]); my2dTranslatef(c[0], c[1]); my2dScalef(1.2f, 1.2f); my2dRotatef(-hAngle); my2dTranslatef(-c[0], -c[1]); transDrawClock(c, h); J2_2_ReshapePushPop my2dLoadIdentity(); my2dTranslatef(P1[0], P1[1]); my2dScalef(sx, sy); my2dTranslatef(-v0[0], -v0[1]); my2dPushMatrix(); my2dTranslatef(c[0], c[1]); my2dRotatef(-hAngle); my2dTranslatef(-c[0], -c[1]); transDrawClock(c, h); my2dPopMatrix(); 2002 by Jim X. Chen George Mason University At this point of program running, the current matrix on the matrix stack is different

OpenGL Matrix Stacks & Transformation 2002 by Jim X. Chen George Mason University public void reshape(GLAutoDrawable drawable, int x, int y, int w, int h) { super.reshape(drawable, x, y, w, h); //1. specify drawing into only the back_buffer gl.glDrawBuffer(GL.GL_BACK); //2. origin at the center of the drawing area gl.glMatrixMode(GL.GL_PROJECTION); gl.glLoadIdentity(); gl.glOrtho(-w / 2, w / 2, -h / 2, h / 2, -1, 1); // matrix operations on MODELVIEW matrix stack gl.glMatrixMode(GL.GL_MODELVIEW); gl.glLoadIdentity(); //3. interval to swap buffers to avoid rendering too fast gl.setSwapInterval(1); }

OpenGL Transformation Implementation my2dLoadIdentity(); transDrawArm(O, A); my2dTranslatef(A[0], A[1]); my2dRotatef(b); my2dTranslatef(-A[0], -A[1]); transDrawArm(A, B); my2dTranslatef(B[0], B[1]); my2dRotatef(g); my2dTranslatef(-B[0], -B[1]); transDrawArm(B, C); gl.glLoadIdentity(); drawArm(O, A); gl.glTranslatef(A[0], A[1], 0.0f); gl.glRotatef(beta, 0.0f, 0.0f, 1.0f); gl.glTranslatef(-A[0], -A[1], 0.0f); drawArm(A, B); gl.glTranslatef(B[0], B[1], 0.0f); gl.glRotatef(gama, 0.0f, 0.0f, 1.0f); gl.glTranslatef(-B[0], -B[1], 0.0f); drawArm(B, C); 2002 by Jim X. Chen George Mason University Example: J2_3_Robot2d Example: J2_4_Robot

by Jim X. Chen George Mason University Transformation and Viewing.26. Homework 1. Build up your own matrix system that includes - Double matrix[POINTER][3][3]; - void my2dLoadIdentity(); - void my2dTranslated(double x, double y); - void my2dRotated(double a); - void my2dScaled(double x, double y); - void myTransVertex(double x, double y, double x1, double y1); - void my2dPushMatrix(); - void my2dPopMatrix(); 2. Use your system to achieve the rotation of your pentagon or other objects in your circle. Then, you add a clock hand at each vertex of your pentagon or objects.

by Jim X. Chen: 27 HW5: 2012 Fall Class 1.Continue from previous homework; 2.Modify your code: draw a unit-size sphere at the origin; 3.Using OpenGL transformation on MODELVIEW Matrix Stack, rotate, scale, and translate the spheres to the locations in animation; (40%) 4.Use PushMatrix and PopMatrix on the Matrix Stack (40%)