L02 - 2D Graphics and OpenGL Primer

C++

Download “Microsoft Visual Studio Professional” 2008 Not Express!

l d h k Please do it this week

h // d 70 http://msdn70.e-academy.com/elms/Storefront/Home.aspx?campus=socnusingapore csampus socnusingapore_cs

ObjectivesObjectives Draw nice picture in 2D

Geometry, linear algebra OpenGL primers

N     di i l  h Not a traditional approach Teach‐on‐demand approach

Problem driven   Problem driven,  or I will rather say motivation driven

With the help of GLUT library

Approach Not top‐down

Abstract/overall > details Bottoms‐up !!

Intuition/motivation firstB   f Be arty‐farty

OpenGL and GLUT In the old days, the first library for programming window system is called X‐windows You need to program two pages of code to open 1 single window…. with nothing.

OpenGL From the GL library (1992) from Silicon Graphics Handle graphics routine and window events handling

GLUT ‐ The OpenGL Utility Toolkitp y pronounced like the glut in gluttony

In a word, save you a lot of trouble by API: Application Programming InterfaceAPI: Application Programming Interface

Setup GLUT Library Download Glut (from the link in the course website) If you are using MS Windows, follow the README file Copy the files:

glut32.dll to %WinDir%\System,   \   d  glut32.lib to %your vc directory%\lib, and 

glut.h to %your vc directory%\include\GL

DONE! DONE!

First OpenGL ProgramFirst OpenGL Program#include <GL/glut.h>

void mydisplay(){glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_POLYGON);

l 2f( 0 5 0 5)glVertex2f(-0.5, -0.5); glVertex2f(0, 0.5); glVertex2f(0.5, -0.5);

glEnd();glEnd();glFlush();

}

int main(){

glutCreateWindow("CS3241: Hello OpenGL!"); l tDi l F ( di l )glutDisplayFunc(mydisplay);

glutMainLoop();}

First OpenGL Program May sound weird to you: passing a “function” as a int main()

{glutCreateWindow("CS3241: Hello OpenGL!");

// simply create a window

function  as a parameter

// p y// with title

glutDisplayFunc(mydisplay); // “register” the function

(0,+1)

// “register” the function // “mydisplay” for display

glutMainLoop();( 1 0) (+1 0)// starts the window loop

}

Default window size:

(‐1,0) (+1,0)

(‐1,‐1) to (+1,+1) (0,‐1)

First OpenGL ProgramFirst OpenGL Program#include <GL/glut.h>

void mydisplay(){glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_POLYGON);

l 2f( 0 5 0 5)glVertex2f(-0.5, -0.5); glVertex2f(0, 0.5); glVertex2f(0.5, -0.5);

glEnd();glEnd();glFlush();

}

Clear a kind of buffer (now it is the color buffer)

Note: the default colors for Note: the default colors for Note: the default colors for background and drawing are black and white respectively

Note: the default colors for background and drawing are black and white respectively

OpenGL Function Formatfunction name dimensions

glVertex3f(x,y,z)belongs to GL library

function name

x,y,z are floatsglVertex3fv(p)

For example: p is a pointer to an array

GLfloat p[2] = {-0.5,0.5};glBegin(GL_POLYGON);glvertex2fv(p);…

OpenGL Primitives

GL POINTSGL POINTS GL_POLYGONGL_POLYGONGL_POINTSGL_POINTS

GL_LINESGL_LINES GL_LINE_STRIPGL_LINE_STRIP

GL_LINE_LOOPGL_LINE_LOOP

GL TRIANGLESGL TRIANGLES

GL_QUAD_STRIPGL_QUAD_STRIP

GL_TRIANGLE_STRIPGL_TRIANGLE_STRIP GL_TRIANGLE_FANGL_TRIANGLE_FAN

__

See: http://www.opengl.org/sdk/docs/man/ [click glBegin()]

Polygon Issues OpenGL will only display polygons correctly if they are

Simple: edges cannot cross Convex: All points on line segment between two points in a polygon Convex: All points on line segment between two points in a polygon 

are also in the polygon Flat: all vertices are in the same plane (in 3D)

OpenGL may or may not produce desired output if these  OpenGL may or may not produce desired output if these conditions are violated 

The best is to use triangles

non‐simple polygon non‐convex polygon

Changing Colorsvoid mydisplay(){

glClearColor(1.0,1.0,1.0,1.0);glClear(GL_COLOR_BUFFER_BIT); lB i (GL POLYGON)

Set Clear color to be white(But nothing changed until 

glClear is called)glBegin(GL_POLYGON);

glColor3f(1.0,0.0,0.0);glVertex2f(-0.5, -0.5); glColor3f(0.0,1.0,0.0);g Co o 3 (0.0, .0,0.0);glVertex2f(0, 0.5); glColor3f(0.0,0.0,1.0);glVertex2f(0.5, -0.5); Set this 

glEnd();glFlush();

}

vertex to be red

Here comes the mathematicsHere comes the mathematics

2D Transformation Vectors Reference Frame Transformation

Translationi Rotation

Scaling

Vector/Matrix Representations A vector (x,y) can be represented by a column or row matrices: 

or

yx

1yxor

Which is called Homogeneous coordinates Wh t if th  l t  di t  i   t  ?

1y 1yx

What if the last coordinate is not 1?

),(wy

wxwyx

If w=0, the point is at infinity in the direction (x,y)  E.g. (0,1,0) is the point the “north” most

In this course, we will use the column matrix representation, p

L t’ St t F ThiLet’s Start From Thisvoid drawASmallTri(){

glBegin(GL_POLYGON); glColor3f(1.0,0.0,0.0);glVertex2f(-0.2, -0.2); lC l 3f(0 0 1 0 0 0)glColor3f(0.0,1.0,0.0);glVertex2f(0, 0.2); glColor3f(0.0,0.0,1.0);glVertex2f(0.2, -0.2);glVertex2f(0.2, 0.2);

glEnd();}void mydisplay(){

glClearColor(1.0,1.0,1.0,1.0);glClear(GL_COLOR_BUFFER_BIT); drawASmallTri();lFl h()glFlush();

}

How Do I Draw This? The left triangle is the original

a: (-0.2,-0.2) b: (0.2,-0.2) c: (0,0.2)

Th   i ht   i The right one is (0.2,-0.2) = a + (0.4,0) (0 6 -0 2) = b + (0 4 0) (0.6, 0.2) b + (0.4,0) (0.4,-0.2) = c + (0.4,0)

Translation t = (0.4,0)

We called this kind of movement a translationwith a translation vector 

I   h   i    ),( yx ttt

)040( In the previous case  Every vertex of the triangle adds the vector t With h   di t     t  ( )  ill 

)0,4.0(t

With homogeneous coordinates, every vertex (x,y) will be moved to a new position (x’,y’) by

01' tt

111001001

1''

y

x

y

x

tytx

yx

tt

yx

111001

Old positionNew position

glTranslate(x,y,z)void mydisplay(){glClearColor(1.0,1.0,1.0,1.0);glClear(GL_COLOR_BUFFER_BIT);

glLoadIdentity();drawASmallTri(); Original

Triangle

glTranslatef(0.4,0,0);drawASmallTri(); New

TriangleglFlush();

}

g

Reference Frame For every coordinates, there is a reference frame E.g. p=(2,4) meaning p is 2 units right of and 4 units 

b   h   i i   f  fabove the origin reference frame

p=(2,4)

R f FReference Frame By applying a translation, it means moving the 

f  f         i ireference frame to a new position For example glTranslatef(4.0,4.0,0) Th   h    d   t (2 4) ith  t t  th   Then when we draw p at (2,4) with respect to the NEW reference frame

It finally becomes p’=(6 0 8 0) with respect to the It finally becomes p (6.0, 8.0) with respect to the original frame

p=(2,4)p

p’=(6,8)

t=(4,4)

Reference Frame

glTranslate(x,y,z)void mydisplay(){glClearColor(1.0,1.0,1.0,1.0);glClear(GL_COLOR_BUFFER_BIT);

glLoadIdentity();drawASmallTri();

glTranslatef(0.4,0,0);drawASmallTri();

glFlush(); }

Translation Moving the reference frame by a vector

01' xx txxtx

1110010

1' y

x

y

x

tyyty ),(' yx tytxp

By a translation matrix

),( yxp

1001

)(x

tt

ttT),( yx ttt

100

10),( yyx tttT

glRotatef(angle,x,y,z)void mydisplay(){glClearColor(1.0,1.0,1.0,1.0);glClear(GL_COLOR_BUFFER_BIT);

glLoadIdentity();drawASmallTri();

glRotatef(60,0,0,1);drawASmallTri();

glFlush(); }

Rotation Rotation all vertices around the origin Anti‐clockwise Old points

cossinsincos

0cossin0sincos

''

yxyx

yx

yx

111001

yyy

New points By a rotational matrix

0sincos

1000cossin)( R

Rotation Before rotation For any point p = (x,y), we can represent p in the polar 

dicoordinates

cosrx

22 yxr

1

sin1

ryp

p (x y)

sinrr

p=(x,y)

cosr

Rotation Rotate by an angle  

)cos( r

The new point

1

)sin(' rpp’

r

p

Rotation

sincoscossinsinsincoscos

)sin()cos(

'

rrrr

rr

p 11

sincos

rr

yx

p

11

yp

cossinsincos

)sin()cos(

'

yxyx

rr

p 11

Rotation Rotation all vertices around the origin Anti‐clockwise

cossinsincos

0cossin0sincos

''

yxyx

yx

yx

111001

yyy

By a rotational matrix

0sincos

1000cossin)( R

Reference Frame By applying a rotation, it means rotating the reference frame to a new orientation

  l   For example glRotatef(60.0,0,0,1) Rotating 60 degree around the vector (0,0,1)

60

glRotatef(angle,x,y,z)void mydisplay(){glClearColor(1.0,1.0,1.0,1.0);glClear(GL_COLOR_BUFFER_BIT);

glLoadIdentity();drawASmallTri();

glRotatef(60,0,0,1);drawASmallTri();

glFlush(); }

Scaling Shrink or grow Simply

xax

1),(

1' y

xbaSby

axp

a and b could be ‐ve

11

00a

By a scaling matrix

OpenGL function:

10000),( bbaS

p glScalef(x,y,z);

Why Matrices?? Because we can combine many transformations into one matrix

)5.0,0(T )45( R

pRTp )45()5.0,0('' pp )(),(

Mpp '' Mpp

Composite Transformation Note that you can do as many transformation as you can

pRTSRTp )45()...3,2()20,5.0()10()1,0(''

first

And also note the “order”

first

first

Composite Transformation Whenever you add a new transformation, you add it to the RIGHT of the matrices

pTp )5.0,0('pRTp )45()500('' pRTp )45()5.0,0(

In OpenGLvoid drawLine(){

glBegin(GL_LINES);glVertex2f(0,0);lV t 2f(0 0 5)glVertex2f(0,0.5);

glEnd();}

void mydisplay(){

Clear the transformation matrix to void mydisplay(){

…

glLoadIdentity();

matrix to identity

drawLine();glTranslatef(0,0.5,0);glRotatef(-45,0,0,1);drawLine();glFlush();

}

What if I want to draw this Draw the first vertical line Do two transformations and d   h   i h  lidraw the right line:

R t th  t f ti)45()5.0,0( RT

Reset the transformation Do another two transformations to draw the left lineto draw the left line

)45()5.0,0( RT

Transformation Stack in OpenGL You can save the transformation in any moment into a stackmoment into a stack

From there you can “resume” or “save” at anytime and add or  save  at anytime and add on new transformation

Save a matrix glPushMatrix()

Retrieve a matrix glPopMatrix()

In OpenGLvoid drawFork(){

drawLine();glPushMatrix();

glTranslatef(0,0.5,0);glPushMatrix();glPushMatrix();

glRotatef(-45,0,0,1);drawLine();

glPopMatrix();glPushMatrix();

glRotatef(45,0,0,1);

Resume to T(0,0.5)

glRotatef(45,0,0,1);drawLine();

glPopMatrix();glPopMatrix();

}

Resume to nothing

void mydisplay(){glClear(GL_COLOR_BUFFER_BIT); glColor3f(0,0,0);glMatrixMode(GL_MODELVIEW);drawFork();glFlush();glFlush();

}

You can mess up the 

A Nicer “Y”transformation within a pair of Push/Pop

void drawFork(){

drawLine();glPushMatrix();

glTranslatef(0,0.5,0);glPushMatrix();

glRotatef(-45,0,0,1);glScalef(0.5,0.5,0.5);g ( , , )drawLine();

glPopMatrix();glPushMatrix();

glRotatef(45,0,0,1);glRotatef(45,0,0,1);glScalef(0.5,0.5,0.5);drawLine();

glPopMatrix();glPopMatrix();glPopMatrix();

}

A Fractal Treevoid drawFork(int n){

drawLine();if (n==0) return;lP hM t i ()glPushMatrix();

glTranslatef(0,0.5,0);glPushMatrix();

glRotatef(-45,0,0,1);glScalef(0 5 0 5 0 5);glScalef(0.5,0.5,0.5);drawFork(n-1);

glPopMatrix();glPushMatrix();

glRotatef(45,0,0,1);gglScalef(0.5,0.5,0.5);drawFork(n-1);

glPopMatrix();glPopMatrix();

}

A Fractal Treevoid drawFork(int n){

drawLine();if (n==0) return;lP hM t i ()glPushMatrix();

glTranslatef(0,0.2,0);glPushMatrix();

glRotatef(-30,0,0,1);glScalef(0 7 0 7 0 7);glScalef(0.7,0.7,0.7);drawFork(n-1);

glPopMatrix();glPushMatrix();

glRotatef(60,0,0,1);gglScalef(0.4,0.4,0.4);drawFork(n-1);

glPopMatrix();glPopMatrix();

}

Finally

Vector/Matrix Representations

In this course, we will use a column matrix to represent   ia point

yx

p pRTp )45()5.0,0(''

H     t i   l   k

1

However, row matrices also work

Tpyxq 1 TTT pTqRq )''()5.0,0()45(''

Finally, all the math make y,sense!!!