From Squares to Cubes

Shape Description Syntax
ellipseMode() The origin of the ellipse is modified by the ellipseMode() function. The default ellipse mode is ellipseMode(CORNER) , which specifies the location of the ellipse to be the upper left bounding box enclosing the shape. The ellipseMode(CENTER) function call draws the shape from its center point. The parameter must written in "ALL CAPS" because Processing is a case sensitive language. ellipseMode(MODE)

MODE can be CORNER, CORNERS, CENTER, CENTER_RADIUS
rectMode() The origin of the rectangle is modified with the rectMode() function. The default rectangle mode is rectMode(CORNER), which specifies the location to be the upper left corner of the shape. The rectMode(CENTER) function call draws the shape from its center point. With rectMode(CORNERS), the parameters to the rectangle function define the two corners of the shape. The parameter must written in "ALL CAPS" because Processing is a case sensitive language. rectMode(MODE)

MODE can be CORNER, CORNERS, or CENTER

To draw a square in Processing, you would use the rect() function: 
void setup(){
  size(200,100);
}
void draw(){
  background(0);
  fill(0);
  stroke(255);
  rectMode(CENTER);
  rect(mouseX, mouseY, 20,20);
}


But in 3D space you cannot use the rect() function to create a cube. Instead, Processing provides the box() function where you specify the x,y and z parameters. If you just provide one parameter, that value will be assigned to all three axis.

Drawing in three-dimensions on a 2D screen is an illusion. The addition of lighting is a simulation of the idea of real world lighting—useful as some objects, like spheres, do not appear three-dimensional until they are lit.

The lights() function sets the default ambient light, directional light, falloff, and specular values. The default parameters are ambientLight(128, 128, 128) and directionalLight(128, 128, 128, 0, 0, -1), lightFalloff(1, 0, 0), and lightSpecular(0, 0, 0). This function needs to be included in the draw() to remain persistent in a looping program. Placing them in the setup() will cause them to only have an effect the first time through the loop.



This is how you would create a cube: 
void setup() {
  size(100, 100, P3D);
}

void draw() {
  background(100);
  noStroke();
  lights();
  pushMatrix();
  translate(width/2, height/2, 0);
  rotateY(map(mouseX, 0, width, -PI, PI));
  rotateX(map(mouseY, 0, height, PI, -PI));
  box(20);
  popMatrix();
}




The sphere() function takes one parameter: the radius.

The sphereDetail() function can be used to change the way a sphere looks. If you don’t use this function, Processing will use the default setting of 30. You can use the function with one (number of segments (minimum of 3) used per full circle revolution) or two parameters (number of segments used longitudinally per full circle revolution, number of segments used latitudinally from top to bottom).

Play around with sphereDetail() parameters to see what happens.to a sphere. This is how you would draw a sphere: 
void setup() {
  size(400, 400, P3D);
}

void draw() {
  background(100);
  fill(255);
  stroke(0);
  lights();
  pushMatrix();
  translate(width/2, height/2, 0);
  rotateY(map(mouseX, 0, width, -PI, PI));
  rotateX(map(mouseY, 0, height, PI, -PI));
  sphereDetail((int) map(mouseX, 0, width, 3, 30), (int) map(mouseY, 0, width, 3, 30));
  sphere(100);
  popMatrix();
}

Exercise:

Create a sphere on top of a rectangular base.

A Sphere Example 
void setup() { 
  size(400,400, P3D); 
  noStroke(); 
  sphereDetail(12); 
}

void draw() { 
  lights();
  background(0); 
  translate(width/3, height/3, -200); 
  rotateZ(map(mouseY, 0, height, 0, PI));
  rotateY(map(mouseX, 0, width, 0, HALF_PI)); 
  for (int y = -2; y < 2; y++) { 
    for (int x = -2; x < 2; x++) { 
      for (int z = -2; z < 2; z++) {
        pushMatrix(); 
        translate(120*x, 120*y, -120*z);
        sphere(30); 
        popMatrix();
      }
    }
  }
}