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

z

x

y

z

x

yRight-handedLeft-handed

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

verticesscene

Polygonal Representation

Any 3D object can be represented as a set of polygonal surfaces obtained from a set of vertices

V1

V2V3

V4

V5V8

V7 V6

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 Line strip Polygon

Triangle Quad Quad strip

Triangle strip Triangle Fan

Lines

Line Loop

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() 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.

Notation:

Setting Drawing Colors in GL

glColor3f(red, green, blue); // set drawing color glColor3f(1.0, 0.0, 0.0); // red glColor3f(0.0, 1.0, 0.0); // green glColor3f(0.0, 0.0, 1.0); // blue glColor3f(0.0, 0.0, 0.0); // black glColor3f(1.0, 1.0, 1.0); // bright white glColor3f(1.0, 1.0, 0.0); // bright yellow glColor3f(1.0, 0.0, 1.0); // magenta

A triangle with different colors at each vertex

glBegin(GL_TRIANGLES);

glColor3f(1.0f, 0.0f, 0.0f); //pure redglVertex3f(0.0f, 1.0f, 0.0f);

glColor3f(0.0f, 1.0f, 0.0f); //pure greenglVertex3f(-1.0f, -1.0f, 0.0f);

glColor3f(0.0f, 0.0f, 1.0f); //pure blueglVertex3f(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 librariesvoid 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:

1

60°

K1:

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

2D: y = f(x); E.g., y = m*x + b, y = x2. 3D: z = f(x,y); E.g., z = x2+y2

Implicit 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.

a). b).

P1

Pm

P2

P(t) = (x(t), y(t))@ t = 0

@ t = T

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.

a). b).

P1

Pm

P2

P(t) = (x(t), y(t))@ t = 0

@ t = T

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):

e is eccentricity: e = 1 : parabola e = 0 : circle 0 e 1: ellipse e 1: hyperbola

)cos(1

1)(

er