1. FUNDAMENTALS OF PROGRAMMING SM1204 Semester A 2011

2. 3D Programming in Processing

3. 3D Programming  First Step: Select rendering engine  size(w, h, P3D); OR size (w, h, OPENGL);  P3D (Processing 3D) - Fast 3D renderer for the web. Sacrifices rendering quality for quick 3D drawing.  OPENGL - High speed 3D graphics renderer that makes use of OpenGL-compatible graphics hardware is available.

4. Primitives 3D  light() - Sets the default ambient light, directional light, falloff, and specular values.  box() - A box with equal dimension on all sides is a cube.  sphere() - A sphere is a hollow ball made from tessellated triangles.  sphereDetial() - Controls the detail used to render a sphere by adjusting the number of vertices of the sphere.

5. Primitive 3D size(640, 360, P3D); background(0); lights(); noStroke(); pushMatrix(); translate(130, height/2, 0); rotateY(1.25); rotateX(-0.4); box(100); popMatrix(); noFill(); stroke(255); pushMatrix(); translate(500, height*0.35, -200); sphere(280); popMatrix(); http://processing.org/learning/3d/primitives3d.html

6. Default Light float spin = 0.0; void setup() { size(640, 360, P3D); noStroke(); } void draw() { background(51); lights(); spin += 0.01; pushMatrix(); translate(width/2, height/2, 0); rotateX(PI/9); rotateY(PI/5 + spin); box(150); popMatrix(); } http://processing.org/learning/3d/lights1.html

7. Lights  pointLight() - Adds a point light.  spotLight() - Adds a spot light.  directionalLight() - Adds a directional light.  ambientLight() - Adds an ambient light.  Lights need to be included in the draw() to remain persistent in a looping program.

8. Default Light void setup() { size(640, 360, P3D); noStroke(); } void draw() { background(0); translate(width / 2, height / 2); // Orange point light on the right pointLight(150, 100, 0, // Color 200, -150, 0); // Position // Blue directional light from the left directionalLight(0, 102, 255, // Color 1, 0, 0); // The x-, y-, z-axis direction // Yellow spotlight from the front spotLight(255, 255, 109, // Color 0, 40, 200, // Position 0, -0.5, -0.5, // Direction PI / 2, 2); // Angle, concentration rotateY(map(mouseX, 0, width, 0, PI)); rotateX(map(mouseY, 0, height, 0, PI)); box(150); } http://processing.org/learning/3d/lights2.html

9. Vertices  beginShape(MODE )  endShape()  Using the beginShape() and endShape() functions allow creating more complex forms.  The MODEs available are POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, and QUAD_STRIP  vertex() - used to specify the vertex coordinates for points.

10. Vertices http://processing.org/learning/3d/rgbcube.html

11. Cubic Grid http://processing.org/learning/3d/cubicgrid.html

12. Texture  texture() - Sets a texture to be applied to vertex points.  textureMode() - Sets the coordinate space for texture mapping (either IMAGE or NORMALIZED). http://processing.org/learning/3d/texture1.html

13. Camera  ortho() - Sets an orthographic projection and defines a parallel clipping volume.  perspective() - Sets a perspective projection applying foreshortening, making distant objects appear smaller than closer ones.  camera() - Sets the position of the camera through setting the eye position, the center of the scene, and which axis is facing upward.

14. Camera void setup() { size(640, 360, P3D); fill(204); } void draw() { lights(); background(0); // Change height of the camera with mouseY camera(30.0, mouseY, 220.0, // eyeX, eyeY, eyeZ 0.0, 0.0, 0.0, // centerX, centerY, centerZ 0.0, 1.0, 0.0); // upX, upY, upZ noStroke(); box(90); stroke(255); line(-100, 0, 0, 100, 0, 0); line(0, -100, 0, 0, 100, 0); line(0, 0, -100, 0, 0, 100); } http://processing.org/learning/3d/moveeye.html

15. Ortho vs Perspective void setup() { size(640, 360, P3D); noStroke(); fill(204); } void draw() { background(0); lights(); if(mousePressed) { float fov = PI/3.0; float cameraZ = (height/2.0) / tan(PI * fov / 360.0); perspective(fov, float(width)/float(height), cameraZ/2.0, cameraZ*2.0); } else { ortho(-width/2, width/2, -height/2, height/2, -10, 10); } translate(width/2, height/2, 0); rotateX(-PI/6); rotateY(PI/3); box(160); } http://processing.org/learning/3d/orthovsperspective.html