computer graphics - villanova computer science · computer graphics 2d opengl primitives ... •...
Post on 31-Mar-2018
248 Views
Preview:
TRANSCRIPT
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
Homogeneous Coordinates
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
θθθθ
Homogeneous Coordinates
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();
glTranslatef( 2, 2, 0 );
glPushMatrix();
glRotatef( 30, 0, 0, 1 );
glPopMatrix();
glPopMatrix();
glTranslatef( 3, 3, 0 );
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
top related