Computer Graphics - Villanova Computer Science · Computer Graphics 2D OpenGL Primitives ... •...

Computer Graphics

2D OpenGL Primitives2D Transformations

What is OpenGL?

• A low‐level 3D graphics API– Separate code you access through an API– An interface to hardware– Primitive‐based

• A state machine– Functions are global and change the state of the OpenGL environment

– State can be pushed onto stacks and popped back off

OpenGL Graphics Programming

• OpenGL– Industry standard API for 3D graphics– Supported on all computer platforms

• OpenGL API (gl)– Core functions

• OpenGL Utility API (glu)– Additional functionality (eg., basic shapes)

• OpenGL Utility Toolkit (glut)– Menus, events, more shapes

OpenGL Software Organization

GLUT

GLU

OpenGL

X, Win32, Mac O/S

software and/or hardware

application program

A Glimpse at OpenGL 3D Models

GLUT Objects

glutWireCone()

glutWireTorus()

glutWireTeapot()

GLUT Platonic Objects

glutWireTetrahedron()

glutWireOctahedron()

glutWireDodecahedron()

glutWireIcosahedron()

GLU Models

• GLUT does not provide a Cylinder object

• GLU provides:

diskpartial disk

sphere cylinder

All models built from:Points, Lines, Polygons

Reading: Chapter 2 of the Redbookhttp://www.glprogramming.com/red/chapter02.html

Vertices

• A vertex is a location in the plane – Specified by its x and y coordinates– Used to define geometric primitives– The simplest geometric primitive is a point

• General form: glVertex*– Examples:

• glVertex2i(int x, int y);• glVertex3f(float x, float y, float z);• glVertex3fv(float vcoord);

glVertex*

OpenGL Primitives

glBegin( GL_POINTS );glVertex2i(100, 100);glVertex2i(400, 100);glVertex2i(250, 400);

glEnd(); x

y Viewing (Clipping) Rectangle

500

500

x

y

500

500glBegin( GL_LINE_LOOP );glVertex2i(100, 100);glVertex2i(400, 100);glVertex2i(250, 400);

glEnd();

Drawing Stuff

glBegin ( drawing mode );glVertex... glVertex......

glEnd();

• Modes:

GL_POINTSGL_POLYGONGL_LINES GL_LINE_STRIP GL_LINE_LOOPGL_TRIANGLES GL_TRIANGLE_STRIP GL_TRIANGLE_FANGL_QUADS GL_GUAD_STRIP

Example – Drawing Lines

Given four points: P0, P1, P2, and P3

GL_LINES GL_LINE_STRIP GL_LINE_LOOP

P0 P1

P3 P2

Example – GL_TRIANGLES

1

0

2

3

4

5

Example – GL_TRIANGLE_STRIP

0

5

4

1 2

3

Example – GL_TRIANGLE_FAN

1

0

2

3

4

5

All Drawing Modes

Example

• How do you create a smooth cone?

• Approximating curves:

Color Interpolation

glBegin (GL_LINES)glColor3f (1.0,0.0,0.0); // redglVertex2f(1.0,0.0);glColor3f (1.0,1.0,0.0); // yellowglVertex2f(0.0,1.0);

glEnd();

• We get a line that starts out red and turns yellow– assuming we left the default as– glShadeModel (GL_SMOOTH)– instead of GL_FLAT

Line Properties

• Changing the width– glLineWidth (float)– default is 1.0

• Creating dashed and dotted lines– glEnable (GL_LINE_STIPPLE)– glDisable (…)– glLineStipple (int repeatfactor, short pattern)

• (1, 0xAAAA) yields - - - - - - - -• (2, 0xAAAA) yields -- -- -- --

More Stippled Line Examples

Polygon Properties

• Fill Pattern– glEnable (GL_POLYGON_STIPPLE);– glPolygonStipple ( mask );

• GLubyte mask[] = {0x00, 0x03, …• mask is 32x32 bitmap

• Polygon Outline– glPolygonMode (GL_FRONT_AND_BACK, GL_LINE);– default is GL_FILL– note that you can make the front filled while the back is outlined!!!

OpenGL State

• Once an attribute is set, it stays that value until you later change it.

• Examples setting state:

glColor3f( 1.0, 0.0, 0.0 );glClearColor( 1.0, 1.0, 1.0, 1.0 );glPointSize( 4.0 );glLineWidth( 2.0 );

Try it Out

• Create an image of your choice. Use a stipple pattern for filling in one of the polygons in your image.

• Example: A mouse

Event Handling in OpenGL

Types of Events

• Mouse click event

• Mouse motion event

• Key press event

• Window reshape event

Event Based Programming

Operating System

void Mouse( int b, int x, int y) {// code here to execute // when mouse is pressed

}

void Keyboard( char k, int x, int y ) {// code here to execute // when key is pressed

}

void main( int argc, char ** argv ) {// code here telling OS which function // above to associate with each event

}

Callback function:

Registering a callback function:

Mouse Click Events

void Mouse( int button, int state, int x, int y) { …. }

Title Here x

y

(0,0) (500,0)

(0,500) x

y

(0,0) (500,0)

(0,500)

Screen (graphics) window

Viewing (clipping) window

Screen vs. Viewing Window

• glutInitWindowSize(500, 500);– Set the screen (graphics) window to 500 by 500 pixels

• glOrtho2D(0, 500, 0, 500);– Specifies the viewing (clipping) window in world coordinates– Arguments are in order: leftx, rightx, bottomy, topy– OpenGL maps world‐to‐screen coordinates

Converting Screen to World Coordinates

Title Here X x

y

(0,0) (500,0)

(0,500) x

y

(0,0) (500,0)

(0,500)

Title Here X x

y

(0,0) (500,0)

(0,500)

x

y

(250,0)(‐250,0)

(0,250)

Mouse click at x=400, y=100 corresponds to world coordinates:

Mouse click at x=400, y=100 corresponds to world coordinates:

(0,‐250)

Hands-on Session

• The events.cpp Program

• Compile, Run & Play

• Understand all event-related code

– Registering callbacks

– Keyboard, Mouse, MouseMotion

Hands-on Session• Draw a simple image, and make it change when the left mouse button is clicked. Example:

• Add a keyboard event that causes the image to zoom in when ‘+’ is pressed and to zoom out when ‘‐’ is pressed. Zooming in and out should be with respect to the center of the image. You will need to resize your viewing window for this.

2D Transformations

Transformations in OpenGL

• Designed for 3D

• For 2D, simply ignore z dimension

• Translation:

glTranslatef(tx, ty, tz)

glTranslatef(tx, ty, 0) for 2D

• Rotation:

glRotatef(angle, vx, vy, vz)

glRotatef(angle, 0, 0, 1) for 2D

• Scaling:

glScalef(sx, sy, sz)

glScalef(sx, sy, 1) for 2D

Math Background: Vectors

Vectors: Direction and Magnitude

• Vectors have no fixed position!

• Identical Vectors:

• Multiplication:

• Inverse:

• Sum (head‐to‐tail rule):

• Difference?

Combination of Vectors

Vector‐Point Addition

• Subtract 2 points vector

• v = P – Q

• Q + v = P

• Magnitude of vector a:

• Unit vector:

• The magnitude of a unit vector is:

Magnitude of a Vectory

x

a

• Given a = (a1, a2) and b = (b1, b2)

• Dot product

a b = a1b1+ a2b2

• For example, if a = (2,3) and b = (0,4) then

Dot Product (Scalar Product)

.

a b = .

Angle between two vectors

Angle between two vectors

• Find the angle between the vectors

b = (3,4) and c = (5,2)

Math Background: 2D Transformations

Introduction to Transformations

• Transformations change an object:– Position (translation)– Size (scaling)– Orientation (rotation)– Shapes (shear)

• We start with 2D, build intuition

• Later, talk about 3D

• Transform object by applying sequence of matrix multiplications to object vertices

Why Matrices?

• All transformations can be performed using matrix/vector multiplication

• Allows pre‐computation of all matrices

• Note: point (x,y) needs to be represented as (x,y,1), also called homogeneous coordinates

Point Representation• We use a column matrix (2x1 matrix) to represent a 2D point

• General form of transformation of a point (x,y) to (x’,y’) can be written as:

Translation

• To reposition a point along a straight line

• Given point (x,y) and translation distance (tx , ty)

• The new point: (x’,y’)

2D Translation Matrix

• Note: it becomes a matrix‐vector multiplication

Tx,y

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛++

=⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛=

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛′′

11100

10

01

1y

x

y

x

ty

tx

y

x

t

t

y

x

⎟⎟⎠

⎞⎜⎜⎝

⎛++

=⎟⎟⎠

⎞⎜⎜⎝

⎛′′

y

x

ty

tx

y

x

Homogeneous Coordinates

Translation of Objects

• How to translate an object with multiple vertices?

• Translate individual vertices

2D Scaling

• Scale: Alter object size by scaling factor (sx, sy)

Uniform vs. non‐uniform scaling

• Uniform: sx = sy

• Non‐uniform: sx ≠ sy

x

y

x

2D Scaling Matrix

Sx,y

( )yx,

( )yx ′′,

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛=

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛=

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛′′

11100

00

00

1

ys

xs

y

x

s

s

y

x

y

x

y

x

⎟⎟⎠

⎞⎜⎜⎝

⎛=⎟⎟

⎠

⎞⎜⎜⎝

⎛⎟⎟⎠

⎞⎜⎜⎝

⎛=⎟⎟

⎠

⎞⎜⎜⎝

⎛′′

ys

xs

y

x

s

s

y

x

y

x

y

x

0

0


fixed point

2D Reflection

• Along X‐axis

• Along Y‐axis

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛−=

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛−=

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛′′

11100

010

001

1

y

x

y

x

y

x

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛−=

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛−=

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛′′

11100

010

001

1

y

x

y

x

y

x

2D Shearing

• Along X‐axis: y‐coordinates unaffected

• Along Y‐axis

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛ +=

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛=

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛′′

11100

010

01

1

y

dyx

y

xd

y

x

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛+=

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛=

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛′′

11100

01

001

1

dxy

x

y

x

dy

x

2D Rotation

• Default rotation center is origin (0,0)

θ > 0: Rotate counterclockwise

θ < 0: Rotate clockwise

• (x,y) ‐> Rotate about the origin by θ (x’, y’)• How to compute (x’, y’) ?

• x = r cos (θ) y = r sin (θ)

• x’ = r cos (φ + θ) y’ = r sin (φ + θ)

Rotation

Rotation• Using trig identities

cos(θ +φ) = cosθ cos φ ‐ sinθ sin φsin(θ +φ) = sinθ cos φ + cosθ sin φ

• We get

x’ = x cosθ – y sinθy’ = y cosθ + x sinθ

• Matrix form?

2D Rotation Matrix

Rθ

( )yx,( )yx ′′,

θ

⎟⎟⎠

⎞⎜⎜⎝

⎛⎟⎟⎠

⎞⎜⎜⎝

⎛ −=⎟⎟

⎠

⎞⎜⎜⎝

⎛′′

y

x

y

x

θθθθ

cossin

sincos

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛ −=

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛′′

1100

0cossin

0sincos

1

y

x

y

x

θθθθ


fixed point

Rotation

• How to rotate an object with multiple vertices?

Where is the fixed rotation point?

Arbitrary Rotation Center

• To rotate about arbitrary point P = (xr, yr) by θ:– Translate object by (‐xr, ‐yr) so that P is at origin

– Rotate the object by θ– Translate object back by (xr, yr)

• In matrix form:

),()(),( rrrr yxTRyxT −−⋅⋅ θ

Arbitrary Rotation Center

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛−−+−−

=

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛−−

⋅⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛ −⋅

⎟⎟⎟

⎠

⎞

⎜⎜⎜

⎝

⎛=

−−⋅⋅

100

sin)cos1(cossin

sin)cos1(sincos

100

10

01

100

0cossin

0sincos

100

10

01

),()(),(

θθθθθθθθ

θθθθ

θ

rr

rr

r

r

r

r

rrrr

xy

yx

y

x

y

x

yxTRyxT

Composing Transformations

• Composing transformation– applying several transforms in succession to form one overall transformation

• Be careful with the order!

• For example:– Translate by (5,0) then rotate 60 degrees

is NOT same as

– Rotate by 60 degrees then translate by (5,0)

Example

• Suppose we want,

• We have to compose two transformations

)90( °−R )3,(xT

Composing Transformations

• Matrix multiplication is not commutative!

)90()3,()3,()90( °−⋅≠°− RTTR xx

Translationfollowed by

rotation

Rotationfollowed bytranslation

Hands‐On Session

• 2D Transformation Applet at

http://www.csc.villanova.edu/~mdamian/graphics/applets/Transformations2D.html

• Request handout from the instructor

OpenGL Transformations

Basic OpenGL Transformations

• Translation:

glTranslatef(tx, ty, tz)

glTranslatef(tx, ty, 0) for 2D

• Rotation:

glRotatef(angle, vx, vy, vz)

glRotatef(angle, 0, 0, 1) for 2D

• Scaling:

glScalef(sx, sy, sz)

glScalef(sx, sy, 1) for 2D

The MODELVIEW Matrix

• glMatrixMode (GL_MODELVIEW);

– modelview mode tells OpenGL that we will be specifying geometric transformations. The command simply says that the current matrix operations will be applied on the MODELVIEW matrix.

– The other mode is the projection mode, which specifies the matrix that is used for projection transformations (i.e., how a scene is projected onto the screen)

Transformations in OpenGL

• MODELVIEW Matrix:– Before any point is drawn on the display, it is first multiplied by this matrix to get the transformed location

void DrawPoint(){

glBegin( GL_POINTS );glVertex2f( 1.0, 3.0 );

glEnd();}

y

x

131

MVPoint location on display:

MODELVIEW Matrixvoid Display(){

glMatrixMode(GL_MODELVIEW);glLoadIdentity();DrawPoint(); // point#1

// MV =

glTranslatef(4.0, 2.0, 0,0 );DrawPoint(); // point#2

// MV =

y

x

MODELVIEW MatrixglRotatef(30.0, 0, 0, 1 );DrawPoint(); // point#3

// MV =

glScalef(2, 2, 1 );DrawPoint(); // point#4

// MV =

} // end Display

y

x

Consider This!• Suppose you have a function called DrawSquare() that draws a

square centered at the origin with sides 1.

• Write an OpenGL code fragment that draws the table below. The table top is centered at (0,0) and has dimensions 2 x 10. The table legs have dimensions 2x4 and they attach to the underside of thetable top at points (‐4,‐1) and (4,‐1). To get you started, two lines of code are included below. Your code should call DrawSquare() three times to draw the table top and legs.

y

x

glMatrixMode( GL_MODELVIEW );glLoadIdentity();

Consider This!

x

glMatrixMode( GL_MODELVIEW );glLoadIdentity();

glPushMatrix and glPopMatrix

• Motivating Example:

void Display() {glTranslatef( 8, 8, 0 );

// MV =

DrawRing(); // 16x4DrawPlanet(); // 8x8

}

• Use DrawUnitCircle to implement Display

Motivating gl(Push,Pop)Matrix

void DrawRing() {

// MV =

glRotatef( 45, 0, 0, 1 );glScalef( 8, 2, 1 );

// MV =

DrawUnitCircle();}

Motivating gl(Push,Pop)Matrix

void DrawPlanet() {

// MV =

glScalef( 4, 4, 1 );DrawUnitCircle();

}

Using gl(Push,Pop)Matrix

void DrawRing() {

glPushMatrix();glRotatef( 45, 0, 0, 1 );glScalef( 8, 2, 1 );DrawUnitCircle();glPopMatrix();

}

void DrawPlanet() {

glPushMatrix();glScalef( 4, 4, 1 );DrawUnitCircle();glPopMatrix();

}

void Display() {

glTranslatef( 8, 8, 0 );

// MV =

DrawRing();DrawPlanet();

}

Practice gl(Push,Pop)MatrixglLoadIdentity(); MV = I

glPushMatrix(); MV = I

glTranslatef( 1, 1, 0 ); MV = T1,1glScalef( 2, 2, 1 ); MV = T1,1S2,2glPushMatrix();


glPushMatrix();

glRotatef( 30, 0, 0, 1 );

glPopMatrix();

glPopMatrix();


glPopMatrix();

Hands‐On Session

• OpenGL Transformation Applet at

http://www.csc.villanova.edu/~mdamian/graphics/applets/OpenGLTransformations.html

• Request handout from the instructor

Summary

• OpenGL:– Primitives (points, lines, polygons, …)– Attributes (color, thickness, fill patterns, …)– Events and callbacks

• 2D Transformations – Homogeneous coordinates– 3x3 transformation matrices

• Transformations in OpenGL:– The MODELVIEW Matrix– glLoadIdentity, glTranslatef, glRotatef, glScalef– glPushMatrix, glPopMatrix

Computer Graphics - Villanova Computer Science · Computer Graphics 2D OpenGL Primitives ... •...

Documents

Transcript of Computer Graphics - Villanova Computer Science · Computer Graphics 2D OpenGL Primitives ... •...