High School level (years 9-10 in Australia, ages 14-16) introduction to programming course, based on the language Processing, includes class material, exercises, examples, and tests. Course ran for 2 terms in 2014. Feel free to use as is, borrow ideas, etc. 13th and final class, 3d graphics.

1. Introduction to Programming
Class 13
Paul Brebner

2. 3d tutorial
• https://www.processing.org/tutorials/p3d/

3. 2d -> 3d
• So far we’ve worked in 2d (x,y) dimensions
– E.g. Line, rectangles, ellipses, etc.
• How about 3d? (x,y,z)?
– Spheres, Cubes, etc
– Problem: Computer screen is 2d
– But Video card can display 3d world on 2d screen
• Tell Processing to use 3d
void setup()
{
size(200, 200, P3D); // 3rd parameter
}

4. 3d co-ordinates and shapes
• X dimension is horizontal (+ to the right)
• Y dimension is vertical (+ down, - up)
• Z dimension is in/out (+ towards you, - away)
• 3d shapes are:
– box(size)
– sphere(size)
– Custom using vertex()
– Box and sphere only have 1 argument! Size
• How do you draw them in a (x,y,z) location???

5. Box (sketch_3dA)
void setup()
{
size(200, 200, P3D); // go 3d!
}
void draw()
{
background(0);
box(100); // where's my box? Try making it bigger
}

6. Translate – move the screen!
• All 3d objects are drawn at (0,0,0)
• To draw them somewhere else, move the
screen with the translate(x,y,z) function
void setup()
{
size(200, 200, P3D); // go 3d!
}
void draw()
{
background(0);
translate(50, 0, 0); // move screen 50 across
box(100);
}

7. Box (sketch_3dB)
void setup()
{
size(500, 500, P3D); // go 3d!
}
void draw()
{
background(0);
// translate(frameCount, 0, 0); // move in x direction only
// translate(0, frameCount, 0); // move in y direction only
// translate(0, 0, frameCount); // move in x direction only
// translate(frameCount, frameCount, 0); // move in x and y
// translate(frameCount, frameCount, frameCount); // x y and z
// translate(frameCount, frameCount, -frameCount); // vanishing act
translate(mouseX, mouseY, 0); // use mouse for x and y
box(100); // where's my box?
}

8. Box + rotate (sketch_3dC)
rotate(radians(degrees))
void setup()
{
size(500, 500, P3D); // go 3d!
}
void draw()
{
background(0);
translate(frameCount, frameCount, 0);
rotateX(radians(frameCount)); // let’s SPIN!
rotateY(radians(frameCount));
rotateZ(radians(frameCount));
box(100);
}

9. Box + scale (sketch_3dD)
scale(1, 1, 1) same size, scale(2, 2, 2)
x2 size etc
void setup()
{
size(500, 500, P3D); // go 3d!
}
void draw()
{
background(0);
translate(frameCount, frameCount, 0);
rotateX(radians(frameCount)); // let’s SPIN!
rotateY(radians(frameCount));
rotateZ(radians(frameCount));
scale(frameCount, frameCount, frameCount); // explode!
// scale(frameCount, frameCount/10, frameCount/10); // what does this do?
box(100);
}

10. Add some colour 3dE
void setup()
{
size(500, 500, P3D); // go 3d!
}
void draw()
{
background(0);
fill( frameCount * 3 % 255,
frameCount * 5 % 255,
frameCount * 7 % 255);
translate(frameCount, frameCount, 0);
rotateX(radians(frameCount)); // let’s SPIN!
rotateY(radians(frameCount));
rotateZ(radians(frameCount));
scale(frameCount, frameCount/10, frameCount/10);
box(1);
}

11. Lights 3dF
void setup()
{
size(500, 500, P3D); // go 3d!
}
void draw()
{
background(0);
translate(width/2, height/2, 0); // move it to the centre
rotateX(radians(frameCount)); // let’s SPIN!
rotateY(radians(frameCount));
rotateZ(radians(frameCount));
if (mousePressed) lights(); // lights are turned off each frame, default
box(100); // try sphere();
}

12. Lights 3dG
Other lights
// ambient light just has a colour
ambientLight(0,0,255); // RGB arguments for blue ambient
// directional light has colour and direction
directionalLight(0, 255, 0, 0, -1, 0); // RGB colour and direction (1,0,-1) for (x,y,z)
// spotlight has colour, location, direction, angle, concentration
spotLight(255, 0, 0, width/2, height/2, 400, 0, 0, -1, PI/4, 2);

13. Lights 3dG
void setup()
{
size(500, 500, P3D); // go 3d!
}
void draw()
{
background(0);
translate(width/2, height/2, 0); // move it to the centre
// directionalLight(0, 255, 0, 1, -1, -1);
spotLight(255, 0, 0, mouseX-(width/2), mouseY-(height/2), 400, 0, 0, -1, PI/4, 100);
// box(100);
sphere(100);
}

14. More
• Lights, camera, action
• camera() sets where the viewer is
• perspective() sets how far away you are
• texture() add image to 3d objects
• Try
– Java Examples, Demos, Graphics, Planets