Modeling in 2D and 3D + Interactivity

1. Modeling in 2D and 3D + Interactivity

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

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

4. Polar coordinate system • Polar coordinate system • Polar to Cartesian

5. 3D coordinate system • Map points in our world to 3 real numbers.

6. Left-handed and right-handed Coordinate systems • OpenGL is right-handed • Positive rotations: counter clockwise • DirectX is left-handed • Positive rotations: clockwise Left-handed Right-handed y y z x x z

7. Cylindrical coordinate system • Radial projection, angle, and height • From cylindrical to Cartesian (z is the same)

8. Spherical Coordinate System • Radial distance and two angles • From Spherical coordinate system to Cartesian:

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

10. Polygonal Representation • Any 3D object can be represented as a set of polygonal surfaces obtained from a set of vertices V7 V6 V8 V5 V3 V2 V4 V1

11. Polygonal representation • Objects with curved surfaces can be approximated by polygons • For a better approximation, use more polygons

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

13. Typical Primitives Line Loop Points Lines Line strip Polygon Triangle Quad Quad strip Triangle strip Triangle Fan

14. 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:

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

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

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

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

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

20. 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();}

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

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

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

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

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

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

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

28. 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!

29. 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} }

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

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

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

33. Koch Curves (2) • The second-order curve K2 is formed by building a bump on each of the four line segments of K1.

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

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

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

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

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

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

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

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

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

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