Week 8 -- Intro to 3D concepts

Coordinate Systems

We know that to describe the pixels on a 2D screen, we use cartesian (named after René Descartes's) coordinates to identify any point, i.e. we have to coordinates: (x,y). X refers to the horizontal axis and y the vertical. In 3 dimensions, we add a z-axis, referring to the depth of any given point. The coordinates become: (x,y,z). Cartesian 3D systems can be described as "left-handed" or "right-handed". If you point your index finger in the positive y direction (up) and your thumb in the positive x direction (to the right), the rest of your fingers will point towards the postive z direction. It's left-handed if you use your left hand and do the same. In processing, the system is left-handed (since postive y is the downward direction), i.e.:

Translate / Rotate

There are two ways we can "transform" the screen matrix in order to be able to move objects in our virtual 3D space -- translate and rotate.

For example, in previous examples, we've used translate in 2D in order to move the origin (0,0) from the top left corner of the screen, i.e.

void setup() {
  size(100,100);
}

void loop() {
  background(0);
  translate(50,50);
  rectMode(CENTER_DIAMETER);
  stroke(200);
  fill(50);
  rect(0,0,50,50);
}

Now, let's also translate by a "z" value (and while we're at it, let's use sine so that we have a nice oscillation)

float theta = 0.0f;

void setup() {
  size(100,100);
  rectMode(CENTER_DIAMETER);
}

void loop() {

  background(0);
  theta += 0.1f;
  float z = sin(theta)*20.0f;
  translate(50,50,z);
  stroke(200);
  fill(50);
  rect(0,0,50,50);
}

We can also rotate the screen matrix by any angle (expressed in radians) along any axis: x,y, or z using rotateX, rotateY, rotateZ

void loop() {
  background(0);
  theta += 0.05f;
  float z = sin(theta)*20.0f;
  translate(50,50,z);
  rotateZ(theta);
  stroke(200);
  fill(50);
  rect(0,0,50,50);
}

void loop() {
  background(0);
  theta += 0.05f;
  float z = sin(theta)*20.0f;
  translate(50,50,z);
  rotateX(theta);
  stroke(200);
  fill(50);
  rect(0,0,50,50);
}

void loop() {
  background(0);
  theta += 0.05f;
  float z = sin(theta)*20.0f;
  translate(50,50,z);
  rotateY(theta);
  stroke(200);
  fill(50);
  rect(0,0,50,50);
}

CONTINUE ON TO 2. . .

back to syllabus