# 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:** 1\
**Showing post:** 9

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

---

_[View the full topic](https://discourse.processing.org/t/rotating-entire-space-before-animation/11174)._