CSC 470 Computer Graphics

CSC 470 Computer Graphics Transformations of Objects CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 1

Transformations of objects - 2D CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 2

Using Transformations The arch is designed in its own coordinate system. The scene is drawn by placing a number of instances of the arch at different places and with different sizes. CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 3

Using Transformations cont d In 3D, many cubes make a city. CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 4

Using Transformations cont d A designer may want to view an object from different vantage points. Positioning and reorienting a camera can be carried out through the use of 3D affine transformations. CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 5

Using Transformations cont d In a computer animation, objects move. We make them move by translating and rotating their local coordinate systems as the animation proceeds. A number of graphics platforms, including OpenGL, provide a graphics pipeline: a sequence of operations which are applied to all points that are sent through it. A drawing is produced by processing each point. CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 6

The OpenGL Graphics Pipeline This version is simplified. CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 7

Graphics Pipeline (2) An application sends the pipeline a sequence of points P 1, P 2,... using commands such as: glbegin(gl_lines); glvertex3f(...); // send P1 through the pipeline glvertex3f(...); // send P2 through the pipeline... glend(); These points first encounter a transformation called the current transformation (CT), which alters their values into a different set of points, say Q 1, Q 2, Q 3. CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 8

Object transformations vs coordinate transformations There are two ways to view a transformation: as an object transformation or as a coordinate transformation. An object transformation alters the coordinates of each point on the object according to some rule, leaving the underlying coordinate system fixed. A coordinate transformation defines a new coordinate system in terms of the old one, then represents all of the object s points in this new system. The two views are closely connected, and each has its advantages, but they are implemented somewhat differently. CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 9

Affine transformations have a simple form: the coordinates of Q are linear combinations of those of P for some six given constants m11, m12, etc. Q x consists of portions of both of P x and Py, and so does Qy. This cross fertilization between the x- and y- components gives rise to rotations and shears. CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 10

CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 11 Affine Transformations - Vectors When vector V is transformed by the same affine transformation as point P, the result is Important: to transform a point P into a point Q, post-multiply M by P: Q = M P. = 0 1 0 0 0 23 22 21 13 12 11 y x y x V V m m m m m m W W

Geometric Effects of Affine Transformations Combinations of four elementary transformations: (a) a translation, (b) a scaling, (c) a rotation, and (d) a shear (all shown below). CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 12

Affine transformations - translation CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 13

Affine transformations - scaling Reflection Sx=3; Sy=-2 CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 14

Example of Scaling The scaling (Sx, Sy) = (-1, 2) is applied to a collection of points. Each point is both reflected about the y-axis and scaled by 2 in the y-direction. y x CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 15

Types of Scaling Pure reflections, for which each of the scale factors is +1 or -1. A uniform scaling, or a magnification about the origin: S x = S y, magnification S. Reflection also occurs if S x or S y is negative. If S < 1, the points will be moved closer to the origin, producing a reduced image. If the scale factors are not the same, the scaling is called a differential scaling. CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 16

Affine transformations - rotation CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 17

Affine transformations - shearing CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 18

CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 19 Inverse Translation and Scaling Inverse of translation T -1 : Inverse of scaling S -1 : = 1 1 0 0 1 0 0 1 1 P P t t Q Q y x y x y x = 1 1 0 0 0 1/ 0 0 0 1/ 1 P P S S Q Q y x y x y x Formulas:

CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 20 Inverse Rotation and Shear Inverse Rotation and Shear Inverse of rotation R -1 = R(-θ): Inverse of shear H -1 : generally h=0 or g=0. ( ) ( ) ( ) ( ) = 1 1 0 0 0 cos sin 0 sin cos 1 P P Q Q y x y x θ θ θ θ gh P P g h Q Q y x y x = 1 1 1 1 0 0 0 1 0 1 1

Affine transformations - concatenation A point P is first transformed by M1P and then by M2(M1P). Therefore the composition matrix is M=M2M1. Rotating About an Arbitrary Point CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 21

Composing Affine Transformations: Examples To rotate around an arbitrary point: translate P to the origin, rotate, translate P back to original position. Q = T P R T -P P Shear around an arbitrary point: Q = T P H T -P P Scale about an arbitrary point: Q = T P ST -P P CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 22

Affine transformations - concatenation Reflection about a tilted line cos(β) sin(β) CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 23

Affine transformations - properties Affine transformations preserve affine combinations of points. Affine transformations preserve lines and planes. Parallelism of lines and planes is preserved. The Columns of the Matrix reveal the Transformed Coordinate Frame. Relative Ratios Are Preserved. Effect of Transformations on the Areas of Figures. Every Affine Transformation is Composed of Elementary Operations. CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 24

Affine transformations - 3D Colored cube CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 25

Affine transformations - 3D - basic CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 26

Affine transformations - 3D - rotation CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 27

Rotations Rotations are more complicated. We start by defining a roll (rotation counter-clockwise around an axis looking toward the origin): CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 28

Example A barn in its original orientation, and after a -70 x-roll, a 30 y-roll, and a -90 z-roll. a). the barn b). -70 0 x-roll c). 30 0 y-roll d). -90 0 z-roll CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 29

Affine transformations - using OpenGL CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 30

Example When glvertex2d()is called with argument V, the vertex V is first transformed by the CT to form point Q. Q is then passed through the window to viewport mapping to form point S in the screen window. CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 31

Example cont d The principal routines for altering the modelview matrix are glrotated(), glscaled(), and gltranslated(). These don t set the CT directly; instead each one postmultiplies the CT (the modelview matrix) by a particular matrix, say M, and puts the result back into the CT. That is, each of these routines creates a matrix M as required for the new transformation, and performs: CT = CT *M. CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 32

Example cont d Of course, we have to start with some MODELVIEW matrix: The sequence of commands is glmatrixmode (GL_MODELVIEW); glloadidentity(); // transformations 1, 2, 3,... (in reverse order) CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 33

Example cont d Code to draw house #2: note translate is done before rotate (reverse order). setwindow(...); setviewport(..); // set window to viewport // mapping initct(); // get started with identity // transformation translate2d(32, 25); // CT includes translation rotate2d(-30.0); // CT includes translation and // rotation house(); // draw the transformed house CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 34

Example 2: Star A star made of interlocking stripes: starmotif() draws a part of the star, the polygon shown in part b. (Help on finding polygon s vertices in Case Study 5.1.) To draw the whole star we draw the motif five times, each time rotating the motif through an additional 72. a). b). (x1,y1) CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 35

Example: Dino Patterns The dinosaurs are distributed around a circle in both versions. Left: each dinosaur is rotated so that its feet point toward the origin; right: all the dinosaurs are upright. CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 36

Example dino drawdino() draws an upright dinosaur centered at the origin. In a) the coordinate system for each motif is rotated about the origin through a suitable angle, and then translated along its y-axis by H units. Note that the CT is reinitialized each time through the loop so that the transformations don t accumulate. An easy way to keep the motifs upright (as in part b) is to pre-rotate each motif before translating it. CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 37

CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 38

Summary of the OpenGL Transforms Projection Clips and sizes the viewing volume Viewing Specifies the location of the viewer or camera Modeling Moving the model around the scene Modelview Describes the quality of viewing and modeling transformations Viewport Scales the final output to the window CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 39

Objectives Learn how to carry out transformations in OpenGL Rotation Translation Scaling Introduce OpenGL matrix modes Model-view Projection CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 40

OpenGL Matrices In OpenGL matrices are part of the state Three types Model-View (GL_MODELVIEW) Projection (GL_PROJECTION) Texture (GL_TEXTURE) (ignore for now) Single set of functions for manipulation Select which to manipulated by glmatrixmode(gl_modelview); glmatrixmode(gl_projection); CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 41

Current Transformation Matrix (CTM) Conceptually there is a 4 x 4 homogeneous coordinate matrix, the current transformation matrix (CTM) that is part of the state and is applied to all vertices that pass down the pipeline The CTM is defined in the user program and loaded into a transformation unit vertices p C CTM p =Cp vertices CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 42

CTM operations The CTM can be altered either by loading a new CTM or by postmutiplication Load an identity matrix: C I Load an arbitrary matrix: C M Load a translation matrix: C T Load a rotation matrix: C R Load a scaling matrix: C S Postmultiply by an arbitrary matrix: C CM Postmultiply by a translation matrix: C CT Postmultiply by a rotation matrix: C CR Postmultiply by a scaling matrix: C CS CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 43

Rotation about a Fixed Point Start with identity matrix: C I Move fixed point to origin: C CT -1 Rotate: C CR Move fixed point back: C CT Result: C = T -1 RT Each operation corresponds to one function call in the program. Note that the last operation specified is the first executed in the program CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 44

CTM in OpenGL OpenGL has a model-view and a projection matrix in the pipeline which are concatenated together to form the CTM Can manipulate each by first setting the matrix mode CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 45

Rotation, Translation, Scaling Load an identity matrix: glloadidentity() Multiply on right: glrotatef(theta, vx, vy, vz) theta in degrees, (vx, vy, vz) define axis of rotation gltranslatef(dx, dy, dz) glscalef( sx, sy, sz) Each has a float (f) and double (d) format (glscaled) CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 46

Example Rotation about z axis by 30 degrees with a fixed point of (1.0, 2.0, 3.0) glmatrixmode(gl_modelview); glloadidentity(); gltranslatef(1.0, 2.0, 3.0); glrotatef(30.0, 0.0, 0.0,.10); gltranslatef(-1.0, -2.0, -3.0); Remember that last matrix specified in the program is the first applied CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 47

How OpenGL operates OpenGL is organized to postmultiply each new transformation matrix to combine it with the current transformation. Thus it will often seem more natural to the modeler to think in terms of successively transforming the coordinate system involved, as the order in which these transformations is carried out is the same as the order in which OpenGL computes them. OpenGL maintains a so-called modelview matrix, and every vertex that is passed down the graphics pipeline is multiplied by it. We need only set up the modelview matrix to embody the desired transformation. CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 48

The principal routines for altering the modelview matrix are glrotated(), glscaled(), and gltranslated(). These don t set the CT directly; instead each postmultiplies the CT (the modelview matrix) by a particular matrix, say M, and puts the result back into the CT. That is, each of these routines creates a matrix M as required for the new transformation, and performs: The order is important. As we saw earlier, applying CT * M to a point is equivalent to first performing the transformation embodied in M, followed by performing the transformation dictated by the previous value of CT. Or if we are thinking in terms of transforming the coordinate system, it is equivalent to performing one additional transformation to the existing current coordinate system. Since these routines only compose a transformation with the CT, we need some way to get started: to initialize the CT to the identity transformation. OpenGL provides glloadidentity(). And because these functions can be set to work on any of the matrices that OpenGL supports, we must inform OpenGL which matrix we are altering. This is accomplished using glmatrixmode(gl_modelview). CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 49

Stack of transformations The top matrix on the stack is the actual CT, and operations like rotate2d() compose their transformation with it. To save this CT for later use a copy of it is made and pushed onto the stack using a routine pushct(). This makes the top two items on the stack identical. The top item can now be altered further with additional calls to scale2d() and the like. To return to the previous CT the top item is simply popped off the stack using popct(), and discarded. CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 50

Order of Transformations in OpenGL The current transform matrix (CTM) is the cumulative state of transformations that have been specified before a vertex is defined. In OpenGL, a list of transformations is postmultiplied to the CTM. This means that the transformation specified most recently is the one applied first. Picture this a stack of transformations... CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 51

Order of Transformations in OpenGL (cont.) If we specify a list of transformations, and then define vertices - all the the transformations specified will be applied to those vertices according to the postmultiplication rule. If we subsequently want to draw vertices without any transformations we can: Keep a copy of the transformations that have been applied to the CTM, and negate them by applying their opposites to the CTM in the correct order. or Save the untransformed CTM using glpushmatrix() perform our transforming/vertex drawing, then recall the original CTM with glpopmatrix(). CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 52

Saving the CT for Later Use Ex.: Tilings made easy cvs.pushct(); // so we can return here cvs.translate2d(w, H); // position for the first motif for(row = 0; row < 3; row++) // draw each row { cvs.pushct(); // draw the next row for(col = 0; col < 4; col++) { motif(); // move to the right cvs.translate2d(l, 0); } cvs.popct(); // back to the start of this row // move up to the next row cvs.translate2d(0, D); } cvs.popct(); // back to where we started CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 53

Order of Transformations in OpenGL (cont.) glpushmatrix(); apply scaling drawcube(); glpushmatrix(); apply translation... drawcube(); glpopmatrix(); apply scaling drawcube(); saves the original CTM applies a scaling to the CTM saves the CTM with scaling restores the CTM that was pushed last glpopmatrix(); drawcube(); restores the original CTM CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 54

Using Transformations Example: use idle function to rotate a cube and mouse function to change direction of rotation Start with a program that draws a cube (colorcube.c) in a standard way Centered at origin Sides aligned with axes Will discuss modeling in next lecture CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 55

main.c void main(int argc, char **argv) { glutinit(&argc, argv); glutinitdisplaymode(glut_double GLUT_RGB GLUT_DEPTH); glutinitwindowsize(500, 500); glutcreatewindow("colorcube"); glutreshapefunc(myreshape); glutdisplayfunc(display); glutidlefunc(spincube); glutmousefunc(mouse); glenable(gl_depth_test); glutmainloop(); } CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 56

Idle and Mouse callbacks void spincube() { theta[axis] += 2.0; if( theta[axis] > 360.0 ) theta[axis] -= 360.0; glutpostredisplay(); } void mouse(int btn, int state, int x, int y) { if(btn==glut_left_button && state == GLUT_DOWN) axis = 0; if(btn==glut_middle_button && state == GLUT_DOWN) axis = 1; if(btn==glut_right_button && state == GLUT_DOWN) axis = 2; } CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 57

Display callback void display() { glclear(gl_color_buffer_bit GL_DEPTH_BUFFER_BIT); glloadidentity(); glrotatef(theta[0], 1.0, 0.0, 0.0); glrotatef(theta[1], 0.0, 1.0, 0.0); glrotatef(theta[2], 0.0, 0.0, 1.0); colorcube(); glutswapbuffers(); } Note that because of fixed from of callbacks, variables such as theta and axis must be defined as globals Camera information is in standard reshape callback CSC 470 Computer Graphics, Dr.N. Georgieva, CSI/CUNY 58