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