Rotating entire space before animation

Avatrin · May 12, 2019, 3:24pm

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

paulgoux · May 12, 2019, 3:31pm

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;

};
</>

paulgoux · May 12, 2019, 3:32pm

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

paulgoux · May 12, 2019, 3:33pm

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

Avatrin · May 12, 2019, 3:34pm

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.

paulgoux · May 12, 2019, 3:36pm

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.

Avatrin · May 12, 2019, 3:38pm

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

kll · May 13, 2019, 2:39am

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

</> code tag

but best is ( when using p5.js ) you
share your

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

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

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
*/

show me what you see there?

anyhow see that you posted 2 times

and assume your question is resolved.

Avatrin · May 13, 2019, 7:35am

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.

kll · May 13, 2019, 9:33am

and your code is still not complete and not formatted

Avatrin · May 13, 2019, 9:49am

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

humayung · May 16, 2019, 8:48am

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

Chrisir · May 16, 2019, 9:04am

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.

Topic		Replies	Views
Rotating in 3D Help Processing	2	557	August 12, 2018
3D Rotations: Rotating around the screen axes Coding Questions	28	6334	October 8, 2019
Amazing spiral! Help? Coding Questions	1	270	November 16, 2018
Rotate image implementation Coding Questions	2	1078	November 17, 2018
Standing a Cube on its Corner Project Guidance	1	369	November 13, 2021

Rotating entire space before animation

Related topics