Week 7 -- Midterm Workshop

back to syllabus

This week we'll discuss the scope for the midterm project, due next week. Here are the requirements:

Develop an idea for a project built with processing. Write a very brief project description (2-3 sentences is fine.)

Break the project down into smaller parts.

Pick one part to focus on as the midterm goal (Remember, the idea here is to simplify the problem so keep the parts small and manageable.)

Post your result as well as a brief evaluation of your progress towards completing the initial goal. If you are using any libraries that don't allow your project to run as a web applet (serial, video, etc.) post screenshots of your result along with your code.

Following is a side topic not necessarily related to the midterm.

SIDE TOPIC -- Transformation (translate,rotate,push,pop)

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