Modeling in 2D and 3D +
Interactivity
Goals
 Become familiar with Cartesian Coordinate systems in







2D and 3D
Understand the difference between right-handed and
left-handed Coordinate systems
Get familiar with OpenGL “ModelView” way of thinking
Understand event-driven programming
Drawing with primitives
Nice graphics using fractals
Explicit and Implicit curves
Parametric curves
2D Coordinate System
 A way to associate points in a plane with numbers
 Each point can be represented as two real numbers,
usually called x-coordinate and y-coordinate
Polar coordinate system
 Polar coordinate system
 Polar to Cartesian
3D coordinate system
 Map points in our world to 3 real numbers.
Left-handed and right-handed
Coordinate systems
 OpenGL is right-handed

Positive rotations: counter clockwise
 DirectX is left-handed

Positive rotations: clockwise
Left-handed
y
y
Right-handed
z
x
x
z
Cylindrical coordinate system
 Radial projection, angle, and height
 From cylindrical to Cartesian (z is the same)
Spherical Coordinate System
 Radial distance and two angles
 From Spherical coordinate system to
Cartesian:
3D scene
 Scene = list of objects
 Object = list of surfaces
 surface = list of polygons
 Polygon = list of vertices
 Vertex = a point in 3D
scene
vertices
Polygonal Representation
 Any 3D object can be represented as a set of
polygonal surfaces obtained from a set of
vertices
V7
V8
V3
V4
V2
V1
V6
V5
Polygonal representation
 Objects with curved surfaces can be
approximated by polygons

For a better approximation, use more
polygons
Positioning objects in 3D scene
 OpenGL: move objects from object coordinates to View
coordinates



Set matrix mode to ModelView
Use glTranslate, glRotate, and glScale to move the object
coordinates to the eye coordinates
For hierarchical positioning using glPushMatrix and
glPopMatrix to store and restore ModelView matrices
 DirectX: move objects from object
coordinates to World coordinates

Use World transform to position
you objects
Typical Primitives
Points
Lines
Triangle
Triangle strip
Line Loop
Line strip
Quad
Polygon
Quad strip
Triangle Fan
Drawing in OpenGL
 To draw an object in OpenGL, you pass it a list of
vertices:
glBegin(primitiveType)
//the vertices with(out) color
glColor3f(0.0,1.0,0.0);
glVertex3f(0.0,1.0,1.0);
glEnd()



Notation:
The list starts with glBegin(arg); and ends with glEnd();
Arg determines the type of the primitive.
glEnd() sends drawing data down the OpenGL pipeline.
Setting Drawing Colors in GL
 glColor3f(red, green, blue);
// set drawing color
glColor3f(1.0, 0.0, 0.0);
 glColor3f(0.0, 1.0, 0.0);
 glColor3f(0.0, 0.0, 1.0);
 glColor3f(0.0, 0.0, 0.0);
 glColor3f(1.0, 1.0, 1.0);
 glColor3f(1.0, 1.0, 0.0);
 glColor3f(1.0, 0.0, 1.0);

// red
// green
// blue
// black
// bright white
// bright yellow
// magenta
A triangle with different colors at
each vertex
glBegin(GL_TRIANGLES);
glColor3f(1.0f, 0.0f, 0.0f); //pure red
glVertex3f(0.0f, 1.0f, 0.0f);
glColor3f(0.0f, 1.0f, 0.0f); //pure green
glVertex3f(-1.0f, -1.0f, 0.0f);
glColor3f(0.0f, 0.0f, 1.0f); //pure blue
glVertex3f(1.0f, -1.0f, 0.0f);
glEnd();
Event-driven Programs
 Respond to events, such as mouse click or
move, key press, or window reshape or
resize. System manages event queue.
 Programmer provides “call-back” functions to
handle each event.
 Call-back functions must be registered with
OpenGL to let it know which function handles
which event.
 Registering a function does NOT call it! It is
called when the event associated with it
occurs.
General structure of interactive CG
 Initialization functions: clearing, enabling of tests,
projection, viewports, etc.
 Functions to update the frame: do all of your updating
of the objects’ properties. They are called once per
frame so that you can update your object’s position or
other properties each frame.
 A function to render the frame: this is where we finally
do some rendering! This is also called once per frame
after updating functions are called.

It is better to separate the updating part from the
rendering part of your application.
 Functions to handle inputs: handles any interaction
between the program and the user. Some updating can
be done in these functions.
Skeleton Event-driven Program
// include OpenGL libraries
void main(){
//register the redraw function
glutDisplayFunc(myDisplay);
//register the reshape function
glutReshapeFunc(myReshape);
//register the mouse action function
glutMouseFunc(myMouse);
//register the mouse motion function
glutMotionFunc(myMotionFunc);
//register the keyboard action function
glutKeyboardFunc(myKeyboard);
//… perhaps initialize other things…
glutMainLoop();//enter the unending main loop
}
//… all of the callback functions are defined here
Callback Functions
 glutDisplayFunc(myDisplay);
 (Re)draws screen when window opened or another
window moved off it.
 glutReshapeFunc(myReshape);
 Reports new window width and height for reshaped
window. (Moving a window does not produce a
reshape event.)
 glutIdleFunc(myIdle);
 when nothing else is going on, simply redraws display
using void myIdle() {glutPostRedisplay();}
Callback Functions (2)
 glutMouseFunc(myMouse);

Handles mouse button presses. Knows mouse
location and nature of button (up or down and
which button).
 glutMotionFunc(myMotionFunc);

Handles case when the mouse is moved with
one or more mouse buttons pressed.
Callback Functions (3)
 glutPassiveMotionFunc(myPassiveMotionFunc)
Handles case where mouse enters the window with
no buttons pressed.
 glutKeyboardFunc(myKeyboardFunc);
 Handles key presses and releases. Knows which
key was pressed and mouse location.
 glutMainLoop()
 Runs forever waiting for an event. When one occurs, it
is handled by the appropriate callback function.

Setting Up a 2D coordinate system
void myInit(void) {
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(0, 640.0, 0, 480.0);
}
// sets up coordinate system for window from
(0,0) to (679, 479)
Simple User Interaction with Mouse
and Keyboard
 Register functions:


glutMouseFunc (myMouse);
glutKeyboardFunc (myKeyboard);
 Write the function(s)
 NOTE that to be able to update your frame, you need
to redraw the frame after updating any object’s
properties. Depending on the application you can use
glutPostRedisplay() (Invalidate() in DirectX) or
glutIdleFunc().
 For DirectX use DirectInput to handle inputs from the
keyboard, mouse, and joystick.



Create a device for each input
Call a function that reads the state of the devices in the
drawing method
Handle the events in your read function
Example Mouse Function
 void myMouse(int button, int state, int x, int y);
 Button is one of GLUT_LEFT_BUTTON,
GLUT_MIDDLE_BUTTON, or
GLUT_RIGHT_BUTTON.
 State is GLUT_UP or GLUT_DOWN.
 The integers x and y are mouse position at
the time of the event.
Example Mouse Function (2)
 The x value is the number of pixels from the left of
the window.
 The y value is the number of pixels down from the top
of the window.
 In order to see the effects of some activity of the
mouse or keyboard, the mouse or keyboard handler
must call either myDisplay() or glutPostRedisplay().
 Code for an example myMouse() is in Fig. 2.40.
Using Mouse Motion Functions
 glutMotionFunc(myMovedMouse);
moved with button held down
 glutPassiveMotionFunc(myMovedMouse);
moved with buttons up
 myMovedMouse(int x, int y); x and y are the
position of the mouse when the event occurred.
Example Keyboard Function
void myKeyboard(unsigned char theKey, int mouseX, int mouseY) {
GLint x = mouseX;
GLint y = screenHeight - mouseY; // flip y value switch(theKey) {
case ‘p’: drawDot(x, y); break; // draw dot at mouse position
case ‘E’: exit(-1);//terminate the program
default: break;
// do nothing
}
}
 Parameters to the function will always be (unsigned char
key, int mouseX, int mouseY).
 The y coordinate needs to be flipped.
 Body is a switch with cases to handle active keys (key
value is ASCII code).
 Remember to end each case with a break!
Example Keyboard Function (DirectX)
protected override void OnPaint(PaintEventArgs e){
//….
this.Invalidate();
ReadKeyBoard();
}
public void ReadKeyBoard() {
KeyboardState keys = keyb.GetCurrentKeyboardState();
if (keys[Key.LeftArrow]) {
//update your objects’ properties
}
if (keys[Key.RightArrow]) {
//update your objects’ properties
}
}
Fractals
 A fractal is an object or quantity that displays
self-similarity on all scales.

An object is said to be self-similar if it looks
"roughly" the same on any scale.
 Fractals are usually constructed using:
 iterative function systems
 recursive relations on complex numbers.
Fractals as a successive refinement of
curves
 Very complex curves can be fashioned
recursively by repeatedly “refining” a simple
curve.
 Example: the Koch curve, which produces an
infinitely long line within a region of finite area.
Koch Curves
 Successive generations of the Koch curve are
denoted K0, K1, K2,…
 The 0-th generation shape K0 is just a
horizontal line of length 1.
 The curve K1 is created by dividing the line K0
into three equal parts, and replacing the
middle section with a triangular bump having
sides of length 1/ 3. The total line length is
evidently 4 / 3.
Koch Curves (2)
 The second-order curve K2 is formed by
building a bump on each of the four line
segments of K1.
K2:
K1:
60°
1
1
Koch Snowflake (3 joined curves)
 Perimeter: the i-th generation shape Si is three times
the length of a simple Koch curve, 3(4/3)i, which
grows forever as i increases.
 Area inside the Koch snowflake: grows quite slowly,
and in the limit, the area of S∞ is only 8/5 the area of
S0.
S0
S1
S2
Three ways to specify curves
 Three forms of equation for a given curve:
 Explicit



Implicit



2D: y = f(x); E.g., y = m*x + b, y = x2.
3D: z = f(x,y); E.g., z = x2+y2
2D: F(x, y) = 0; E.g., y – m*x –b = 0, y-x2=0.
3D: F(x,y,z)=0; E.g., z- x2-y2=0, z3+x-y2=0.
Parametric


2D: x = f(t), y = g(t), t is a parameter; usually 0 ≤ t ≤ 1.
E.g., x= x1*(1-t) + x2*t, y= y1*(1-t) + y2*t.
3D: x = f(t), y = g(t), z = h(t). E.g. x = t, y = t2, z = t3
Specific Parametric Forms
 line:

x = x1*(1-t) + x2*t, y = y1*(1-t) + y2*t
 circle:

x = r*cos(2π t), y = r*sin(2π t)
 ellipse:


x = W*r*cos(2π t), y = H*r*sin(2π t)
W and H are half-width and half-height.
Finding Implicit Form from Parametric
Form
 Combine the x(t) and y(t) equations to
eliminate t.
 Example: ellipse: x = W*cos(2π t), y =
H*sin(2π t)


X2 = W2cos2(2π t), y2 = H2sin2(2π t).
Dividing by the W or H factors and adding
gives (x/W)2 + (y/H)2 = 1, the implicit form.
Drawing Parametric Curves
 For a curve C with the parametric form P(t) =
(x(t), y(t), z(t)) as t varies from 0 to T, we use
samples of P(t) at closely spaced instants.
Drawing Parametric Curves (2)


The position Pi = P(ti) = (x(ti), y(ti),z(ti)) is
calculated for a sequence {ti} of times.
The curve P(t) is approximated by the polyline
based on this sequence of points Pi.
Drawing Parametric Curves (3)
 Code (2D):
// draw the curve (x(t), y(t)) using
// the array t[0],..,t[n-1] of sample times
glBegin(GL_LINES);
for(int i = 0; i < n; i++)
glVertex2f((x(t[i]), y(t[i]));
glEnd();
Parametric Curves: Advantages
 For drawing purposes, parametric forms
circumvent all of the difficulties of implicit and
explicit forms.
 Curves can be multi-valued, and they can
self-intersect any number of times.
 Verticality presents no special problem: x(t)
simply becomes constant over some interval
in t.
Polar Coordinates Parametric Form
 x = r(θ)*cos(θ), y = r(θ)*sinθ



cardioid: r(θ) = K*(1 + cos(θ)), 0 ≤ θ ≤ 2π
rose: r(θ) = K cos(n*θ), 0 ≤ θ ≤ 2nπ, where n is
number of petals (n odd) or twice the number of
petals (n even)
spirals:



Archimedean: r(θ) = Kθ
logarithmic: r(θ) = Keaθ
K is a scale factor for the curves.
Polar coordinates Parametric Form (2)
 conic sections (ellipse, hyperbola, circle,
parabola):
1
r ( ) 
1  e cos( )

e is eccentricity:
e = 1 : parabola
 e = 0 : circle
 0  e  1: ellipse
 e  1: hyperbola
