Processing: Creative Coding and Computational Art

PROCESSING: CREATIVE CODING AND COMPUTATIONAL ART
638
float rotX, rotY;
void setup(){
size(400, 400, P3D);
}
void draw(){
background(150);
translate(width/2, height/2, 200);
rotateX(rotX);
rotateY(rotY);
box(50, 50, 50);
}
void mouseMoved(){
rotX = radians(mouseY);
rotY = radians(mouseX);
}
So that was the easy way. Of course, you by now know that I can’t leave well enough alone.
Next, I’ll show you how to re-create the functionality of Processing’s three rotation functions,
which mostly just means altering the trig functions. Here they are, along with some
declared variables to help illustrate how they work. (Please note that this code is not
meant to be run.)
float originalX, originalY, originalZ;
float x2, y2, z2;
float x3, y3, z3;
float finalX, finalY, finalZ;
// rotation around x-axix
y2 = cos(angleX) * originalY - sin(angleX) * originalZ;
z2 = sin(angleX) * originalY + cos(angleX) * originalZ;
// rotation around y-axis
z3 = cos(angleY) * z2 - sin(angleY) * x2;
x3 = sin(angleY) * z2 + cos(angleY) * x2;
// rotation around z-axis
finalX = cos(angleZ) * x3 - sin(angleZ) * y3;
finalY = sin(angleZ) * x3 + cos(angleZ) * y3;
Although the expressions may at first seem a little confusing, if you look at them carefully,
you’ll see that they’re pretty redundant. A key feature to using these expressions, which
some books don’t seem to clarify properly, is that the expressions use existing x, y, and z
values as inputs. So, for example, if you wanted to do rotations around all three axes,
you’d need to keep feeding the new values calculated from the previous axis rotations into
the next set of expressions, as I illustrated by using the different variables. I accomplish this
in the next example by using three separate vertices arrays in addition to the original array
of vertices; it’s mostly an organizational problem.