2D Imaging and Transformation Sung-Eui Yoon ( ) ( ) C Course - PowerPoint PPT Presentation

Introduction to Computer Graphics and OpenGL Introduction to Computer Graphics and OpenGL 2D Imaging and Transformation Sung-Eui Yoon ( 윤성의 ) ( 윤성의 ) C Course URL: URL http://jupiter.kaist.ac.kr/~sungeui/ETRI_CG

Class Objectives Class Objectives ● Write down simple 2D transformation Write down simple 2D transformation matrixes ● Understand the homogeneous coordinates ● Understand the homogeneous coordinates and its benefits ● Know OpenGL-transformation related API ● Know OpenGL-transformation related API ● I mplement idle-based animation method 2

2D Geometric Transforms 2D Geometric Transforms ● Functions to map F ti t points from one place to another ● Geometric transforms can be applied to ● Drawing primitives (points, lines, conics, triangles) ● Pi Pixel coordinates of an l di t f image Demo Demo 3

Translation Translation ● Translations have the following form: T l ti h th f ll i f t  x '  x x' = x + t x     x           y y' = y + t y y t t y y y '         y         y ● inverse function: undoes the translation: x = x' - t x y = y' - t y ● identity : leaves every point unchanged x' = x + 0 x = x + 0 y' = y + 0 4

2D Rotations 2D Rotations ● Another group - rotation about the origin: Another group rotation about the origin: 5

Rotations in Series Rotations in Series ● We want to rotate the object 30 degree We want to rotate the object 30 degree and, then, 60 degree  x '  cos(60) - sin(60) cos(30) - sin(30) x                sin(60) cos(60) sin(30) cos(30) y y '             We can merge multiple rotations into one rotation matrix x ' cos(90) - sin(90) x              sin(90) sin(90) cos(90) cos(90) y y y y '                 6

Euclidean Transforms Euclidean Transforms ● Euclidean group E lid ● Translations + rotations ● Rigid body transforms ● Rigid body transforms ● Properties: ● Preserve distances P di t ● Preserve angles ● How do you represent these functions? ● How do you represent these functions? 7

Problems with this Form Problems with this Form ● Translation and rotation considered Translation and rotation considered separately ● Typically we perform a series of rotations and ● Typically we perform a series of rotations and translations to place objects in world space ● I t’s inconvenient and inefficient in the previous form ● I nverse transform involves multiple steps ● How can we address it? ● How can we represent the translation as a matrix multiplication? 8

Homogeneous Coordinates Homogeneous Coordinates ● Consider our 2D plane as a subspace within Consider our 2D plane as a subspace within 3D (x y) (x, y) ( (x, y, z) ) 9

Matrix Multiplications and Homogeneous Coordinates Homogeneous Coordinates ● Can use any planar subspace that does not contain C l b th t d t t i the origin ● Assume our 2D space lies on the 3D plane z = 1 Assume our 2D space lies on the 3D plane z 1 ● Now we can express all Euclidean transforms in matrix form: form: 10

Scaling Scaling ● S is a scaling factor g  x '  s x     0 0             y ' ' s y    0 0          1          1 0 0 1     11

Example: World Space to NDC Example: World Space to NDC x ( 1) x (w.l)    n  w 1 1 1 ( ( 1) 1) w r w.r w l w.l    w.t t x w x  (w.l) (w.l) -1 x  w  2 2 1 1 w.b n w.r w.l  x ? x n ? -1 1 x w x n = Ax w + B w.l w.r w.r w.l  2 A B    , w.r w.l l w.r w.l l   12

Example: World Space to NDC Example: World Space to NDC ● Now, it can be accomplished via a matrix Now it can be accomplished via a matrix multiplication ● Also conceptually simple ● Also, conceptually simple         x 0 x 2 w.r w.l   n w w.r w.l w.r w.l                 y y 0 0 y y w.t w t w.b w b 2 2         n w w.t w.b w.t w.b           1 0 0 1 1             13

Shearing Shearing ● Push things Push things sideways ● Shear along x axis ● Shear along x-axis ● Shear along y-axis 14

Reflection Reflection ● Reflection about x-axis Reflection about x axis ● Reflection about y-axis ● Reflection about y axis 15

Composition of 2D Transformation Transformation ● Quite common to apply more than one Quite common to apply more than one transformations to an object ● E.g., v 2 = Sv 1, v 3 = Rv 2, where S and R are scaling ● E g v = Sv v = Rv where S and R are scaling and Rotation matrix ● Then, we can use the following Then, we can use the following representation: ● v 3 = R(Sv 1 ) or ● v 3 = (RS)v 1 ● why? 16

Transformation Order Transformation Order ● Order of transforms is very important Order of transforms is very important ● Why? 17

Affine Transformations Affine Transformations ● Transformed points (x’, y’) have the Transformed points (x’ y’) have the following form: x '     a a a x         11 12 13       y ' a a a y              21 22 23 3      1      1 0 0 1   ● Combinations of translations, rotations, scaling, reflection, shears ● Properties i ● Parallel lines are preserved ● Finite points map to finite points Fi it i t t fi it i t 18

Rigid-Body Transforms in OpenGL OpenGL glTranslate (tx, ty, tz); glRotate (angleInDegrees, axisX, axisY, axisZ); glScale(sx, sy, sz); OpenGL uses matrix format internally. p y 19

OpenGL Example – Rectangle Animation (double c) Animation (double.c) Demo 20

Main Display Function Main Display Function void display(void) { glClear(GL_COLOR_BUFFER_BIT); lCl (GL COLOR BUFFER BIT) glPushMatrix(); glPushMatrix(); glRotatef(spin, 0.0, 0.0, 1.0); g glColor3f(1.0, 1.0, 1.0); ( , , ); glRectf(-25.0, -25.0, 25.0, 25.0); glPopMatrix(); glutSwapBuffers(); } } 21

Frame Buffer Frame Buffer ● Contains an image for the final Contains an image for the final visualization ● Color buffer depth buffer etc ● Color buffer, depth buffer, etc. ● Buffer initialization B ff i iti li ti ● glClear(GL_COLOR_BUFFER_BI T); ● glClearColor (..); glClearColor ( ); ● Buffer creation ● glutI nitDisplayMode (GLUT_DOUBLE | l tI itDi l M d (GLUT DOUBLE | GLUT_RGB); ● Buffer swap ● Buffer swap ● glutSwapBuffers(); 22

Matrix Stacks Matrix Stacks ● OpenGL maintains matrix stacks OpenGL maintains matrix stacks ● Provides pop and push operations ● Convenient for transformation operations ● Convenient for transformation operations ● glMatrixMode() sets the current stack ● glMatrixMode() sets the current stack ● GL_MODELVI EW, GL_PROJECTI ON, or GL TEXTURE GL_TEXTURE ● glPushMatrix() and glPopMatrix() are used to manipulate the stacks p 23

OpenGL Matrix Operations OpenGL Matrix Operations glTranslate(tx, ty, tz) lT l t (t t t ) Concatenate with top of glRotate(angleInDegrees, axisX, axisY, axisZ) current stack t t k glMultMatrix(*arrayOf16InColumnMajorOrder) Overwrite top glLoadMatrix (*arrayOf16InColumnMajorOrder) of current glLoadIdentity() g y() stack stack 24

Matrix Specification in OpenGL Matrix Specification in OpenGL ● Column-major ordering Column major ordering   m m m m 1 5 9 13     m m m m    2 6 10 14 M   m m m m 3 7 11 15       m m m m 4 8 12 16 ● Reverse to the typical C-convention (e.g., m [i][j] : row i & column j) ● Better to declare m [16] ● Also, glLoadTransportMatrix* () & glMultTransposeMatrix* () are available glMultTransposeMatrix* () are available 25

Animation Animation ● I t consists of “redraw” and “swap” I t consists of “redraw” and “swap” ● I t’s desirable to provide more than 30 frames per second (fps) for interactive f d (f ) f i t ti applications ● We will look at an animation example ill l k i i l based on idle-callback function 26

Idle based Animation Idle-based Animation void mouse(int button, int state, int x, int y) id (i t b tt i t t t i t i t ) { switch (button) { case GLUT_LEFT_BUTTON: if (state == GLUT_DOWN) glutIdleFunc (spinDisplay); g ( p p y); break; case GLUT_RIGHT_BUTTON: if (state == GLUT DOWN) if (state GLUT_DOWN) glutIdleFunc (NULL); void spinDisplay(void) break; { } } spin = spin + 2.0; spin = spin + 2 0; } if (spin > 360.0) spin = spin - 360.0; glutPostRedisplay(); l tP tR di l () } 27