Rotating entire space before animation

#1

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:

  1. 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);
  1. 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);
}
2 Likes
#2

Depends what kind of method, you are using. I’m assuming using the native rotate function is out of the question, so normally you would use the standard rotation matrix, which you have, although you seem to have an extra column in your matrices. So next you apply the dot product to the matrix.

this is how its normally done.
</>
this.dot = function(matrix2){

  var a =[];
  var x = matrix.length;
  var y = matrix2.length;
  var z = matrix2[0].length;
  
  for (var i=0;i<x;i++){
      a[i]=[0];
      for (var j=0;j<y;j++){
  //        a[i][j]=0;
           for (var k=0;k<z;k++){
               
  a[i][j] += matrix[i][k] * matrix2[j][k];
  //a[i][j]=0;
           }}}
  this.m1 = a;
  matrix = a;
  return a;

};
</>

#3

if you need anymore help look up Dan Shifman’s videos on youtube, this is where this code was taken from.

#4

also here is my example on khan
https://www.khanacademy.org/computer-programming/calculations/4695545714671616

1 Like
#5

I don’t need help doing linear algebra (I am a mathematician). It’s more me trying to figure out how 3d geometry is implemented in Processing, and also how animation is done in Processing.

Also, applymatrix has that extra column inherited from WebGL, and I don’t know that standard well enough to know why. Heck, if I did, I probably wouldn’t need to ask the second question.

#6

Ok, whell i’m still on p5.js for now and have yet to unravel processing completely, so I can’t really help any further than that.

#7

That’s alright :slight_smile: I’ll just wait for that one person who knows the answers.

#9

Hi @Avatrin
your code is incomplete and not formatted using the

</> code tag

but best is ( when using p5.js ) you
share your
https://editor.p5js.org/
version ( for the problem only )
so everyone can easy check and play
and you might have a faster response.


not related to appyMatrix
but to rotation generally:
-a- first walk to the rotation center

translate( width/2,height/2);

-b- then rotate around that.

-c- to understand axis thinking just use the
https://p5js.org/reference/#/p5/rotateX
https://p5js.org/reference/#/p5/rotateY
https://p5js.org/reference/#/p5/rotateZ
first, so all even just with a look at the reference
how the axis thinking is would be clear.


finally is i follow your link to
https://p5js.org/reference/#/p5/applyMatrix
and use
example 5

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(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);
}

and i get
/*
TypeError: this._renderer.applyMatrix is not a function (sketch: line 16)
p5.RendererGL: enabled webgl context
*/
https://editor.p5js.org/kll/sketches/Yqo8JYiPw
show me what you see there?


anyhow see that you posted 2 times

and assume your question is resolved.

#10

Well, I was told to use this editor instead:
https://www.openprocessing.org/sketch/create

I still don’t know how the z-axis is calculated. So, that part of the question still needs an answer.

#11

and your code is still not complete and not formatted

#12

Yeah, you’re right. I’ve edited the post and replaced the code with fully functioning code (at least in openprocessing):

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);
}
#13

Select all your codes, and press Ctrl+Shift+C. So everyone will be easier to see.
That’s how your codes formatted

#14

the center seems to be in the upper left corner

see tutorial

https://www.processing.org/tutorials/p3d/

void setup() {
  size(700, 700, P3D);
  background(111);
  noStroke();
}

void draw() {
  background(111); 
  lights();

  // SPHERE at 0,0,0
  fill(255, 0, 0); // red 
  sphere(44);

  // SPHERE at center
  pushMatrix();
  translate(width/2, height/2, 0);
  fill(0, 0, 255); // blue 
  sphere(44);
  popMatrix(); 

  // SPHERE at center-122 and in the back 
  pushMatrix();
  translate(width/2, height/2-122, -333);
  fill(0, 255, 0); // green 
  sphere(44);
  popMatrix();
}

The smaller Z is, the more it is away from you (into the screen). The green sphere is farer away (Z=-333) than the other two.

3 Likes