# 3D Rotations: Rotating around the screen axes

**URL:** <https://discourse.processing.org/t/3d-rotations-rotating-around-the-screen-axes/14239>\
**Category:** Coding Questions\
**Created:** [September 27, 2019, 2:23pm UTC](https://discourse.processing.org/t/3d-rotations-rotating-around-the-screen-axes/14239 "2019-09-27T14:23:51Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![raetrakt](https://avatars.discourse-cdn.com/v4/letter/r/97f17d/32.png) [@raetrakt](https://discourse.processing.org/u/raetrakt)\
**Post date:** [September 27, 2019, 2:23pm UTC](https://discourse.processing.org/t/3d-rotations-rotating-around-the-screen-axes/14239/1 "2019-09-27T14:23:51Z")

</div>

I wanted a sphere to rotate in a way that the point closest to the viewer always rotates up when the cursor is moved upwards and always left and right when the cursor is moved left and right.  
I had problems because after the transformation matrix caused the rotation axis to no longer correspond to the screen axis when using e.g. rotateY();

In this version of the sketch I managed to make it work along one axis, but I feel like I need some more complicated trigonometry to subtract out the rotation along both axes.

```auto
function setup() {
	createCanvas(windowWidth, windowHeight, WEBGL);
	smooth();
	noFill();
}

function windowResized() {
	resizeCanvas(windowWidth, windowHeight, WEBGL);
}

function draw() {
	background(255);

	let x = map(mouseX, 0, width, -PI ,PI);
	let y = map(mouseY, 0, height, -PI, PI);

	rotateY(x);
	rotate(-y, [cos(x), 0, sin(x)]);

	ellipse(0, 0, height / 2, height / 2, 50);
	rotateX(HALF_PI);
	ellipse(0, 0, height / 2, height / 2, 50);
	rotateY(HALF_PI);
	ellipse(0, 0, height / 2, height / 2, 50);
}

```

---

<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:** [September 27, 2019, 6:39pm UTC](https://discourse.processing.org/t/3d-rotations-rotating-around-the-screen-axes/14239/2 "2019-09-27T18:39:19Z")

</div>

do you mean this?

```auto
void setup() {
  size(1200, 800, P3D);
  smooth();
  noFill();
}

void draw() {
  background(255);

  translate(width/2, height/2); 
  float x = map(mouseX, 0, width, -PI, PI);
  float y = map(mouseY, 0, height, -PI, PI);

  rotateY(x);
  rotateX(-y);//[cos(x), 0, sin(x)]);

  ellipse(0, 0, 50, 50);

  pushMatrix();
  translate(40, 0);
  rotateX(HALF_PI);
  ellipse( 0, 0, 50, 50);
  popMatrix(); 

  pushMatrix();
  translate(0, 40);
  rotateY(HALF_PI);
  ellipse( 0, 0, 50, 50);
  popMatrix();
}

```

---

<div class="post-metadata">

**Author:** ![raetrakt](https://avatars.discourse-cdn.com/v4/letter/r/97f17d/32.png) [@raetrakt](https://discourse.processing.org/u/raetrakt)\
**Post date:** [September 28, 2019, 3:50pm UTC](https://discourse.processing.org/t/3d-rotations-rotating-around-the-screen-axes/14239/3 "2019-09-28T15:50:30Z")

</div>

This does not achieve the effect I tried to describe.  
The three ellipses are supposed to form a sphere.  
Now, on this sphere, the imagine the point that is closest to the viewer, which is always in the center of the canvas.  
This point should always rotate in the direction the mouse is moving in.

 ![](https://i.imgur.com/bWhwNBG.jpg)  
I already implemented this for one axis, but cant make it work in both x and y direction.  
Would appreciate it a lot if someone took another look at this, because i feel like this is doable but you need some trigonometry formula i can’t quite figure out.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [September 28, 2019, 4:22pm UTC](https://discourse.processing.org/t/3d-rotations-rotating-around-the-screen-axes/14239/5 "2019-09-28T16:22:20Z")

</div>

Chrisir has a good example for you to work with.  
A little tweaking and you can achieve what you want; I did.

Hint:

- Think about where you want the rotateX() and rotateY()
- [https://processing.org/tutorials/p3d/](https://processing.org/tutorials/p3d/)

🙂

---

<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:** [September 28, 2019, 4:33pm UTC](https://discourse.processing.org/t/3d-rotations-rotating-around-the-screen-axes/14239/6 "2019-09-28T16:33:14Z")

</div>

2nd example…

```auto
void setup() {
  size(1200, 800, P3D);
  smooth();
  noFill();
}

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

  translate(width/2, height/2);

  // these are your ANGLES: 
  float x = map(mouseX, 0, width, -PI, PI);
  float y = map(mouseY, 0, height, -PI, PI);

  //x=0;
  //y=0;

  text(nf(x, 1, 2)+","+nf(y, 1, 2), 
    50, -50);

  noFill(); 
  stroke(0); 

  rotateY(x);
  rotateX(-y);//[cos(x), 0, sin(x)]);

  ellipse(0, 0, 50, 50);

  pushMatrix();
  translate(0, 0);
  rotateX(HALF_PI);
  ellipse( 0, 0, 50, 50);
  popMatrix(); 

  pushMatrix();
  translate(0, 0);
  rotateY(HALF_PI);
  ellipse( 0, 0, 50, 50);
  popMatrix();

  // red sphere 
  pushMatrix();
  translate(0, 0, 25);
  rotateY(HALF_PI);
  noStroke();
  fill(255, 0, 0); 
  sphere( 5 );
  popMatrix();
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [September 28, 2019, 4:34pm UTC](https://discourse.processing.org/t/3d-rotations-rotating-around-the-screen-axes/14239/7 "2019-09-28T16:34:07Z")

</div>

All I did was add color to @Chrisir example:

> void setup() {  
> size(1200, 800, P3D);  
> smooth();  
> noFill();  
> strokeWeight(3);  
> }
> 
> void draw() {  
> background(255);
> 
> translate(width/2, height/2);  
> rotateY(-TAU/32);
> 
> float x = map(mouseX, 0, width, -PI, PI);  
> float y = map(mouseY, 0, height, -PI, PI);
> 
> rotateY(x);  
> rotateX(-y);//[cos(x), 0, sin(x)]);
> 
> stroke(0, 255, 0);  
> ellipse(0, 0, 150, 150);
> 
> pushMatrix();  
> translate(40, 0);  
> rotateX(HALF\_PI);  
> rotateY(x);  
> stroke(255, 0, 0);  
> ellipse( 0, 0, 150, 150);  
> popMatrix();
> 
> pushMatrix();  
> translate(0, 40);  
> rotateY(HALF\_PI);  
> rotateX(-y);  
> stroke(0, 0, 255);  
> ellipse( 0, 0, 150, 150);  
> popMatrix();  
> }

When I first worked with translations and rotations I created labeled axes to understand these.

I went a little overboard with this example but enjoyed the ride:

[![](https://img.youtube.com/vi/69t6ZC3HJ-8/maxresdefault.jpg "Rotating Axes") ](https://www.youtube.com/watch?v=69t6ZC3HJ-8)

This worked on PC and my Android (I moved the scrollbars to bottom later):

[![](https://img.youtube.com/vi/fj_UebW246k/maxresdefault.jpg "Exploring 3D Space") ](https://www.youtube.com/watch?v=fj_UebW246k)

And later this:

[![](https://i.ytimg.com/vi/26J7U-Pkr50/hqdefault.jpg "3D Translations and Rotations") ](https://www.youtube.com/watch?v=26J7U-Pkr50)

Scrollbars are in Processing examples; mouseX and mouseY are often enough.

🙂

---

<div class="post-metadata">

**Author:** ![raetrakt](https://avatars.discourse-cdn.com/v4/letter/r/97f17d/32.png) [@raetrakt](https://discourse.processing.org/u/raetrakt)\
**Post date:** [September 28, 2019, 4:47pm UTC](https://discourse.processing.org/t/3d-rotations-rotating-around-the-screen-axes/14239/8 "2019-09-28T16:47:01Z")

</div>

The “red dot” might help to clarify what I mean.  
The point on the sphere that moves in the way the mouse does, is not supposed to be a fixed point on the sphere. Rather, in every rotated form of the sphere, the point i want to move is the point of the sphere in the exact center of the sketch.  
This is my problem, because, after a rotation of e.g. 90 degrees around the y axis, moving the mouse upwards doesn’t move the point in the middle upwards, but instead the red point which was fixed in the beginning.  
To accomplish what I what, I think, you have to calculate the y axis, which represents the y axis of my screen and not the y axis of the currently rotated coordinate system. Hence why I started messing around with trigonometry as above. Though there an upward movement behaves as I want with a rotation along the y axis already applied, it does not the other way around.

---

<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:** [September 28, 2019, 4:50pm UTC](https://discourse.processing.org/t/3d-rotations-rotating-around-the-screen-axes/14239/9 "2019-09-28T16:50:50Z")

</div>

> [@raetrakt](#):
>
> Rather, in every rotated form of the sphere, the point i want to move is the point of the sphere in the exact center of the sketch.

I don’t understand

please elaborate

Chrisir

---

<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:** [September 28, 2019, 4:52pm UTC](https://discourse.processing.org/t/3d-rotations-rotating-around-the-screen-axes/14239/10 "2019-09-28T16:52:07Z")

</div>

Are you referring to my **second** example when you say red dot?

---

<div class="post-metadata">

**Author:** ![raetrakt](https://avatars.discourse-cdn.com/v4/letter/r/97f17d/32.png) [@raetrakt](https://discourse.processing.org/u/raetrakt)\
**Post date:** [September 28, 2019, 5:00pm UTC](https://discourse.processing.org/t/3d-rotations-rotating-around-the-screen-axes/14239/11 "2019-09-28T17:00:00Z")

</div>

Yes, referring to your second example.  
In it, after a 90 degree rotation around y, the red dot travels up the side of the sphere when you move the mouse upward.  
What I want is, with the same setup, that the red dot stays in its place and the point of the sphere in the center of the sketch, moves upward. This is no longer achievable by rotateX(), because a rotation matrix has already been applied.  
I should note that I actually switched to p5js because it allows me to rotate around a specified axis, instead of just x, y and z.

`rotate(-y, [cos(x), 0, sin(x)]);`

This is not possible in Java Processing afaik.

---

<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:** [September 28, 2019, 6:08pm UTC](https://discourse.processing.org/t/3d-rotations-rotating-around-the-screen-axes/14239/12 "2019-09-28T18:08:44Z")

</div>

I can’t help you with that

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [September 28, 2019, 7:08pm UTC](https://discourse.processing.org/t/3d-rotations-rotating-around-the-screen-axes/14239/13 "2019-09-28T19:08:00Z")

</div>

> [@raetrakt](#):
>
> I should note that I actually switched to p5js because it allows me to rotate around a specified axis, instead of just x, y and z.
> 
> `rotate(-y, [cos(x), 0, sin(x)]);`
> 
> This is not possible in Java Processing afaik.

Take a look here:

> [@Understanding rotate before translate](https://discourse.processing.org/t/help-with-understanding-rotate-before-translate/8631/12):
>
> I thought it would clash with an existing P3D rotate() method but it seems not. Always thought it should be more like rotateAt() or rotateAround(). I have a few extra methods like that in PraxisLIVE (such as 7 parameter image()) but haven’t quite got around to this one yet. Interestingly, there is a 4 parameter version of rotate() in Processing already though - /\*\* \* Rotate around an arbitrary vector, similar to glRotate(), except that it \* takes radians (instead of degrees). \*/ publ…

> **[3D Rotations in Processing (Vectors, Matrices, Quaternions)](https://behreajj.medium.com/3d-rotations-in-processing-vectors-matrices-quaternions-10e2fed5f0a3)**
>
> This tutorial introduces how to rotate objects in 3D beyond Euler angles; to do this, it looks at the basics of matrices and quaternions…

🙂

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [September 28, 2019, 8:25pm UTC](https://discourse.processing.org/t/3d-rotations-rotating-around-the-screen-axes/14239/14 "2019-09-28T20:25:55Z")

</div>

Example of rotate(float angle, float v0, float v1, float v2):

```auto
float angle;

void setup()
{
size(500, 500, P3D);
}

void draw()
{
background(255);
translate(width/2, height/2);

strokeWeight(3);
stroke(128);
line(-100, -100, 0, 100, 100, 0);

rotate(angle, 100, 100, 0);

pushMatrix();
shape();
popMatrix();

angle += TAU/1000;
}

void shape()
{
stroke(128);
strokeWeight(3);
line(0, 0, 0, 100 *cos(TAU/8), -100* cos(TAU/8), 0);
strokeWeight(10);
point(100 *cos(TAU/8), -100* cos(TAU/8), 0);
}

```

Example code I provided rotating around line\axes;

 ![image.png](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/99cd7620d2cdc11dbf343bbb40dd82d80d50c6d2.png)

Rotating around line\axes with ellipses:

 ![image.png](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e26c72f03a86bc944ed78ecc30f0994092605dc7.png)

🙂

---

<div class="post-metadata">

**Author:** ![raetrakt](https://avatars.discourse-cdn.com/v4/letter/r/97f17d/32.png) [@raetrakt](https://discourse.processing.org/u/raetrakt)\
**Post date:** [September 28, 2019, 8:32pm UTC](https://discourse.processing.org/t/3d-rotations-rotating-around-the-screen-axes/14239/15 "2019-09-28T20:32:39Z")

</div>

Thank you for your effort, but that only gets me to the point of where I quit in p5.  
I tried my best to understand some of the maths in the [medium.com](http://medium.com) article, but I still can’t figure out how to calculate the “screen axis” that is needed to turn the rotated sphere as intended.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [September 29, 2019, 3:05am UTC](https://discourse.processing.org/t/3d-rotations-rotating-around-the-screen-axes/14239/16 "2019-09-29T03:05:38Z")

</div>

I ported your code for Java Processing:

```auto
void setup() 
  {
  size(500, 500, P3D);
  smooth();
  noFill();
  // ortho();
  }

void draw() 
  {
  background(255);

  float x = map(mouseX, 0, width, -PI ,PI);
  float y = map(mouseY, 0, height, -PI, PI);

  translate(width/2, height/2);

  rotateY(x);
  rotateX(-y);
  
  box(2*40, 2*10, 2*90);

  ellipse(0, 0, height/2, height/2);
  rotateX(HALF_PI);
  ellipse(0, 0, height/2, height/2);
  rotateY(HALF_PI);
  ellipse(0, 0, height/2, height/2);
  }

```

Is that what you are trying to achieve?

Change the ranges (smaller) for the mapping to get a better sense of rotations.  
Using ortho() sometimes helps; default is perspective().

🙂

References:

> **[Euler angles](https://en.wikipedia.org/wiki/Euler_angles)**
>
> The Euler angles are three angles introduced by Leonhard Euler to describe the orientation of a rigid body with respect to a fixed coordinate system. They can also represent the orientation of a mobile frame of reference in physics or the orientation of a general basis in 3-dimensional linear algebra.
> Euler angles can be defined by elemental geometry or by composition of rotations. The geometrical definition demonstrates that three composed elemental rotations (rotations about the axes of a coor...

  

> **[3D Transformations in Processing](https://medium.com/@behreajj/3d-transformations-in-processing-de11acdd1fbc)**
>
> This tutorial explores how translation, rotation and scale — taken together under the umbrella term affine transformations — work in…

---

<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:** [September 29, 2019, 4:35am UTC](https://discourse.processing.org/t/3d-rotations-rotating-around-the-screen-axes/14239/17 "2019-09-29T04:35:19Z")

</div>

> [@raetrakt](#):
>
> I quit in p5

> [@glv](#):
>
> I ported your code for Java

actually i think there is view problem,  
while for a full 3D view the mouse interpretation like

```auto
mouseX, 0, width, -PI ,PI 

```

is optimal, it looks bad.

a much more natural view i feel with

```auto
mouseX, 0, width, -PI/2, PI/2

```

anyhow the whole concept with this mouse requires the thinking  
that NULL is when the mouse points at the CENTER of the canvas,  
( a other approach would be to use delta values…)

to repair the processing y axis points down,  
can use a (-1)\*…

as we play here 3D view, what is that without a ZOOM  
use mouseWheel.

add i try to separate the

- view code
- axis code
- user circles code

```auto
float x=0,y=0,zmag = 1;
float Y = -1; // to invert processing y axis

void setup() {
  size(500, 500, P3D);
  noSmooth();
  noFill();
  //ortho();
  strokeWeight(2);
  println("use: mouse X Y, wheel for zoom");
}

void draw() {
  background(200, 200, 0);
  my_Camera();
  my_Drawing();
}

void my_Drawing() {
  axis();
  spheres();
}

void axis() {
  stroke(200, 0, 0);
  line(0, 0, 0, height/4, 0, 0);
  sphereAt(height/4, 0, 0, 6);
  stroke(0, 200, 0);
  line(0, 0, 0, 0, Y*height/4, 0);
  sphereAt(0, Y*height/4, 0, 6);
  stroke(0, 0, 200);
  line(0, 0, 0, 0,0,height/4);
  sphereAt(0,0,height/4, 6);
}

void spheres() {
  push();
  stroke(0, 200, 0);
  ellipse(0, 0, height/2, height/2);
  rotateX(HALF_PI);
  stroke(200, 0, 0);
  ellipse(0, 0, height/2, height/2);
  rotateY(HALF_PI);
  stroke(0, 0, 200);
  ellipse(0, 0, height/2, height/2);
  pop();
}

void my_Camera() { // limit from +- PI to +- PI/2 like more natural view??
  x = map(mouseX, 0, width, -PI/2, PI/2);
  y = Y*map(mouseY, 0, height, -PI/2, PI/2); // invert processing Y
  translate(width/2, height/2);
  scale(zmag);
  rotateY(x);
  rotateX(y);  
  // here the view is axis correct if mouse is middle/center of canvas!!!
  // right hand rule: thumb X RIGHT (RED), point finger Y UP(GREEN), middle finger Z FRONT (BLUE)( points to you )
}

void sphereAt(float x, float y, float z, float diam ) {
  push();
  translate(x, y, z);
  sphere(diam);
  pop();
}

void mouseWheel(MouseEvent event) {
  float e = event.getCount(); //println(e);
  zmag += e*0.01;
}

```

p5.js version 🙂

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

does that operation feel better?

---

<div class="post-metadata">

**Author:** ![raetrakt](https://avatars.discourse-cdn.com/v4/letter/r/97f17d/32.png) [@raetrakt](https://discourse.processing.org/u/raetrakt)\
**Post date:** [September 29, 2019, 9:24am UTC](https://discourse.processing.org/t/3d-rotations-rotating-around-the-screen-axes/14239/18 "2019-09-29T09:24:05Z")

</div>

I very much appreciate all these attempts to help me, but none of these examples behave the way I tried to describe.  
[![](https://i.imgur.com/bWhwNBG.jpg) ](https://i.imgur.com/bWhwNBG.jpg)

> [@raetrakt](#):
>
> Yes, referring to your second example.  
> In it, after a 90 degree rotation around y, the red dot travels up the side of the sphere when you move the mouse upward.  
> What I want is, with the same setup, that the red dot stays in its place and the point of the sphere in the center of the sketch, moves upward. This is no longer achievable by rotateX(), because a rotation matrix has already been applied.

The rotation commands to achieve this cannot be as simple as rotateY(x) and rotateX(y), because the second rotation is executed in an already rotated system, and therefore do not rotate around the axes “of my monitor” that never change.

In your example, compare the behaviour of

```auto
  rotateY(x);
  rotateX(y);

```

to

```auto
  rotateY(x);
  rotate(y, cos(x), 0, sin(x));

```

my problem is achieving the effect rotate(y, cos(x), 0, sin(x)) has, but for both axes.

---

<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:** [September 29, 2019, 11:09am UTC](https://discourse.processing.org/t/3d-rotations-rotating-around-the-screen-axes/14239/19 "2019-09-29T11:09:19Z")

</div>

[![](https://cdn.someecards.com/someecards/usercards/d2d6ee2105ba4043ec09d5e02ca1704759.png) ](https://cdn.someecards.com/someecards/usercards/d2d6ee2105ba4043ec09d5e02ca1704759.png)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [September 29, 2019, 5:09pm UTC](https://discourse.processing.org/t/3d-rotations-rotating-around-the-screen-axes/14239/20 "2019-09-29T17:09:29Z")

</div>

Keep working at it!

![rts_00](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/09b8bcd2fda95d31fe6cb02e1652bdaccce89343.gif)

I only used rotateY() and rotateX() to achieve this:

- order matters; try changing the order of rotations and see what happens!
- change the ranges (smaller) for the mapping to get a better sense of rotations. I already suggested this!
- I added grids, fills, etc. to better visualize my work and the rotations; there were some interesting optical illusions otherwise.
- the row of sphere() shapes were added along x-axis
- point() is easy to plot along x-axis
- switch between ortho() and perspective(); this can sometimes help in the development

I am not posting my “solution” since this is achievable and can be done by you.

I achieved the same results with:

- [https://processing.org/reference/applyMatrix\_.html](https://processing.org/reference/applyMatrix_.html)
- [https://processing.org/reference/rotateX\_.html](https://processing.org/reference/rotateX_.html) (and rotateY())
- Undocumented rotate(float angle, float v0, float v1, float v2) (see my previous post)

Or I do not clearly understand what you are trying to achieve…

Please post what you have done so far.

Is this an academic assignment?

🙂

---

<div class="post-metadata">

**Author:** ![raetrakt](https://avatars.discourse-cdn.com/v4/letter/r/97f17d/32.png) [@raetrakt](https://discourse.processing.org/u/raetrakt)\
**Post date:** [September 29, 2019, 8:04pm UTC](https://discourse.processing.org/t/3d-rotations-rotating-around-the-screen-axes/14239/21 "2019-09-29T20:04:01Z")

</div>

What is to be seen in your gif is the behaviour of my original post, although with the axes flipped.  
Thank you for adding grid and lines, they might help describe my problem:

This is exactly what I meant:  
 ![yes](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/567d355f5eac8802c01181cc3d6d39a245211a50.gif)

This is what I am trying to get rid of:  
 ![no](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7dd8571db74c816e85ffebff8c14f9bae812498c.gif)

As you can see, the sphere rotates around the yellow x-axis.  
What it should rotate around is the not yet drawn stationary “x-axis” that lies on the grid.  
Just as the y-rotation in your sketch always happens around a not drawn y-axis on the grid.

This is not an assignment and I am not trying to bait you into doing it for me 😉  
This is a random sketch idea I had (further problems here lol [P5js: 3D Typography Problems/Bugs?](https://discourse.processing.org/t/p5js-3d-typography-problems-bugs/14271)) where something I thought would be trivial apparently turned out to be kind of tricky and I’m almost certain there’s some clever math involved in solving this.

[Next page](https://discourse.processing.org/t/3d-rotations-rotating-around-the-screen-axes/14239.md?page=2)