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 URL Course 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

F ti t

• Functions to map

points from one place to another

• Geometric transforms

can be applied to

• Drawing primitives

(points, lines, conics, triangles) Pi l di t f

• Pixel coordinates of an

image

Demo

3

Demo

Translation Translation

T l ti h th f ll i f

• Translations have the following form:

x' = x + tx y' = y + ty

                     

x ' '

t t y x x

y y

y

• inverse function: undoes the translation:

         

y

t y y

x = x' - tx y = y' - ty

• 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

                           y x cos(30) sin(30) sin(30)

• cos(30)

cos(60) sin(60) sin(60)

• cos(60)

y x

' '

 

We can merge multiple rotations into

                     y x cos(90) sin(90) sin(90)

• cos(90)

y x

' '

• ne rotation matrix

        y cos(90) sin(90) y

6

Euclidean Transforms

E lid

Euclidean Transforms

• Euclidean group
• Translations + rotations
• Rigid body transforms
• Rigid body transforms
• Properties:

P di t

• Preserve distances
• 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

C l b th t d t t i

• Can use any planar subspace that does not contain

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

' '

                         1 y s y' 1 1

11

     

Example: World Space to NDC Example: World Space to NDC

1 t

w l w r (w.l) x 1) ( 1 1) ( x

w n

   

• 1

w.t

w.l w.r 1) ( 1    1 2 (w.l) x w

w.b x ?

1 2    w.l w.r (w.l) x x

w n

• 1

w.l 1 w.r xn? xw

xn = Axw + B

l w.l w.r B l A     , 2

12

w.l w.r w.l w.r  

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

            

   

y x y x

w w b w t 2 w.l w.r w.l w.r w.l w.r 2 n

                         

  

1 y 1 1 y

w w.b w.t w.b w.t w.b w.t 2 n

         

13

Shearing

Push things

Shearing

• 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 = Sv v = Rv where S and R are scaling

• E.g., v2= Sv1, v3= Rv2, where S and R are scaling

and Rotation matrix

• Then, we can use the following

Then, we can use the following representation:

• v3= R(Sv1) or
• v3= (RS)v1
• 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:      

'

                   y x a a a a a a y x

23 22 21 13 12 11 '

                  1

3

1 1

• Combinations of translations, rotations,

scaling, reflection, shears i

• Properties
• Parallel lines are preserved

Fi it i t t fi it i t

18

• Finite points map to finite points

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) { lCl (GL COLOR BUFFER BIT) glClear(GL_COLOR_BUFFER_BIT); glPushMatrix(); glPushMatrix(); glRotatef(spin, 0.0, 0.0, 1.0); glColor3f(1.0, 1.0, 1.0); g ( , , ); 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.

B ff i iti li ti

• Buffer initialization
• glClear(GL_COLOR_BUFFER_BI T);

glClearColor ( );

• glClearColor (..);
• Buffer creation

l tI itDi l M d (GLUT DOUBLE |

• glutI nitDisplayMode (GLUT_DOUBLE |

GLUT_RGB);

• Buffer swap

22

• Buffer swap
• glutSwapBuffers();

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

lT l t (t t t ) glTranslate(tx, ty, tz) glRotate(angleInDegrees, axisX, axisY, axisZ)

Concatenate with top of t t k

glMultMatrix(*arrayOf16InColumnMajorOrder)

current stack

glLoadMatrix (*arrayOf16InColumnMajorOrder) glLoadIdentity()

Overwrite top

• f current

stack

g y()

stack

24

Matrix Specification in OpenGL Matrix Specification in OpenGL

Column major ordering

• Column-major ordering

   

13 9 5 1

m m m m         

15 11 7 3 14 10 6 2

m m m m m m m m M

• Reverse to the typical C-convention (e.g., m

   

16 12 8 4

m m m m

[i][j] : row i & column j)

• Better to declare m [16]
• Also, glLoadTransportMatrix* () &

glMultTransposeMatrix* () are available

25

glMultTransposeMatrix* () are available

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

f d (f ) f i t ti frames per second (fps) for interactive applications ill l k i i l

• We will look at an animation example

based on idle-callback function

26

Idle based Animation Idle-based Animation

id (i t b tt i t t t i t i t ) void mouse(int button, int state, int x, int y) { 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); break; } void spinDisplay(void) { spin = spin + 2 0; } } spin = spin + 2.0; if (spin > 360.0) spin = spin - 360.0; l tP tR di l ()

27

glutPostRedisplay(); }

Class Objectives were: Class Objectives were:

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

28

Next Time Next Time

3D transformations

• 3D transformations

29