Hi
Look at the three dimensional animation here:
https://p5js.org/reference/#/p5/applyMatrix
Lets say I want it to rotate the opposite direction. However, instead of just changing the signs of the existing matrix, I want to rotate the whole cube by 180 degrees (around the x-axis… which, when I think about it, I am not sure where is…).
So, I guess I have two questions:
- if I needed to rotate the cube before the animation, how would I do it? In other words; Where would I place the snippet of code below?
var ct = cos(3.14);
var st = sin(3.14);
applyMatrix( 1.0, 0.0, 0.0, 0.0,
0.0, ct, -st, 0.0,
0.0, st, ct, 0.0,
0.0, 0.0, 0.0, 1.0);
- Where exactly are the axes in 3D processing? Or, rather, where is the origin of this cartesian space?
Edit.
I just noticed that the following code works. So, I guess after each frame, the space readjusts to y pointing down and z point out from the screen. So, Processing doesn’t store coordinates for the axes of the coordinate system. However, I am still unsure about the placement of the origin. It’s clearly in the middle of the screen in terms of the x- and y-axes. However, how about the z-axis? How does that work? How “far away” is the origin from us?
function setup() {
createCanvas(100, 100, WEBGL);
noFill();
}
function draw() {
background(200);
rotateY(PI / 6);
stroke(153);
box(35);
var rad = millis() / 1000;
// Set rotation angles
var ct = cos(3.14);
var st = sin(3.14);
applyMatrix( 1.0, 0.0, 0.0, 0.0,
0.0, ct, -st, 0.0,
0.0, st, ct, 0.0,
0.0, 0.0, 0.0, 1.0);
var ct = cos(rad);
var st = sin(rad);
// Matrix for rotation around the Y axis
applyMatrix( ct, 0.0, st, 0.0,
0.0, 1.0, 0.0, 0.0,
-st, 0.0, ct, 0.0,
0.0, 0.0, 0.0, 1.0);
stroke(255);
box(50);
}