# Rotating entire space before animation

**URL:** <https://discourse.processing.org/t/rotating-entire-space-before-animation/11174>\
**Category:** Coding Questions\
**Created:** [May 12, 2019, 3:24pm UTC](https://discourse.processing.org/t/rotating-entire-space-before-animation/11174 "2019-05-12T15:24:26Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Avatrin](https://avatars.discourse-cdn.com/v4/letter/a/97f17d/32.png) [@Avatrin](https://discourse.processing.org/u/Avatrin)\
**Post date:** [May 12, 2019, 3:24pm UTC](https://discourse.processing.org/t/rotating-entire-space-before-animation/11174/1 "2019-05-12T15:24:26Z")

</div>

Hi

Look at the three dimensional animation here:  
[https://p5js.org/reference/#/p5/applyMatrix](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?

```auto
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?

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

```

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [May 12, 2019, 3:31pm UTC](https://discourse.processing.org/t/rotating-entire-space-before-animation/11174/2 "2019-05-12T15:31:49Z")

</div>

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;

```

};  
\</\>

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [May 12, 2019, 3:32pm UTC](https://discourse.processing.org/t/rotating-entire-space-before-animation/11174/3 "2019-05-12T15:32:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [May 12, 2019, 3:33pm UTC](https://discourse.processing.org/t/rotating-entire-space-before-animation/11174/4 "2019-05-12T15:33:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Avatrin](https://avatars.discourse-cdn.com/v4/letter/a/97f17d/32.png) [@Avatrin](https://discourse.processing.org/u/Avatrin)\
**Post date:** [May 12, 2019, 3:34pm UTC](https://discourse.processing.org/t/rotating-entire-space-before-animation/11174/5 "2019-05-12T15:34:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [May 12, 2019, 3:36pm UTC](https://discourse.processing.org/t/rotating-entire-space-before-animation/11174/6 "2019-05-12T15:36:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Avatrin](https://avatars.discourse-cdn.com/v4/letter/a/97f17d/32.png) [@Avatrin](https://discourse.processing.org/u/Avatrin)\
**Post date:** [May 12, 2019, 3:38pm UTC](https://discourse.processing.org/t/rotating-entire-space-before-animation/11174/7 "2019-05-12T15:38:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [May 13, 2019, 2:39am UTC](https://discourse.processing.org/t/rotating-entire-space-before-animation/11174/9 "2019-05-13T02:39:40Z")

</div>

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

```auto
</> code tag

```

* * *

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

> **[p5.js Web Editor](https://editor.p5js.org/)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

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

```auto
translate( width/2,height/2);

```

-b- then rotate around that.

-c- to understand axis thinking just use the

> **[reference | p5.js](https://p5js.org/reference/#/p5/rotateX)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

> **[reference | p5.js](https://p5js.org/reference/#/p5/rotateY)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

> **[reference | p5.js](https://p5js.org/reference/#/p5/rotateZ)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

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

> **[reference | p5.js](https://p5js.org/reference/#/p5/applyMatrix)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

and use  
example 5

```auto
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  
\*/

> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/Yqo8JYiPw)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

show me what you see there?

* * *

anyhow see that you posted 2 times

> [@Understanding applymatrix() and linear algebra](https://discourse.processing.org/t/understanding-applymatrix-and-linear-algebra/11068/5):
>
> Well, I figured it out myself: To convert between the usual depiction of the coordinates and the ones used here, the space has to be rotated 180 degrees about the x-axis first.

and assume your question is resolved.

---

<div class="post-metadata">

**Author:** ![Avatrin](https://avatars.discourse-cdn.com/v4/letter/a/97f17d/32.png) [@Avatrin](https://discourse.processing.org/u/Avatrin)\
**Post date:** [May 13, 2019, 7:35am UTC](https://discourse.processing.org/t/rotating-entire-space-before-animation/11174/10 "2019-05-13T07:35:36Z")

</div>

Well, I was told to use this editor instead:  
[https://www.openprocessing.org/sketch/create](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.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [May 13, 2019, 9:33am UTC](https://discourse.processing.org/t/rotating-entire-space-before-animation/11174/11 "2019-05-13T09:33:00Z")

</div>

and your code is still not complete and not formatted

---

<div class="post-metadata">

**Author:** ![Avatrin](https://avatars.discourse-cdn.com/v4/letter/a/97f17d/32.png) [@Avatrin](https://discourse.processing.org/u/Avatrin)\
**Post date:** [May 13, 2019, 9:49am UTC](https://discourse.processing.org/t/rotating-entire-space-before-animation/11174/12 "2019-05-13T09:49:19Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![humayung](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/humayung/32/6089_2.png) [@humayung](https://discourse.processing.org/u/humayung)\
**Post date:** [May 16, 2019, 8:48am UTC](https://discourse.processing.org/t/rotating-entire-space-before-animation/11174/13 "2019-05-16T08:48:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 16, 2019, 9:04am UTC](https://discourse.processing.org/t/rotating-entire-space-before-animation/11174/14 "2019-05-16T09:04:57Z")

</div>

the center seems to be in the upper left corner

see tutorial

[https://www.processing.org/tutorials/p3d/](https://www.processing.org/tutorials/p3d/)

```auto
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.

 ![Coord3Da](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f704506568f0122524805ee042de5326a71c7a84.jpeg)