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 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 y Right-handed Left-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 V2 V3 V4 V5 V8 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 stripPolygon TriangleQuadQuad strip Triangle stripTriangle 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 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

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 K 0, K 1, K 2,… The 0-th generation shape K 0 is just a horizontal line of length 1. The curve K 1 is created by dividing the line K 0 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 K 2 is formed by building a bump on each of the four line segments of K 1.

Koch Snowflake (3 joined curves) Perimeter: the i-th generation shape S i 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 S 0.

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 = x 2. 3D: z = f(x,y); E.g., z = x 2 +y 2 Implicit 2D: F(x, y) = 0; E.g., y – m*x –b = 0, y-x 2 =0. 3D: F(x,y,z)=0; E.g., z- x 2 -y 2 =0, z 3 +x-y 2 =0. Parametric 2D: x = f(t), y = g(t), t is a parameter; usually 0 ≤ t ≤ 1. E.g., x= x 1 *(1-t) + x 2 *t, y= y 1 *(1-t) + y 2 *t. 3D: x = f(t), y = g(t), z = h(t). E.g. x = t, y = t 2, z = t 3

Specific Parametric Forms line: x = x 1 *(1-t) + x 2 *t, y = y 1 *(1-t) + y 2 *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) X 2 = W 2 cos 2 (2π t), y 2 = H 2 sin 2 (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 P i = P(t i ) = (x(t i ), y(t i ),z(t i )) is calculated for a sequence {t i } of times. The curve P(t) is approximated by the polyline based on this sequence of points P i.

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(θ) = Ke aθ 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