# P3D rotating sphere to follow mouse

**URL:** <https://discourse.processing.org/t/p3d-rotating-sphere-to-follow-mouse/38425>\
**Category:** Coding Questions\
**Created:** [August 20, 2022, 7:42am UTC](https://discourse.processing.org/t/p3d-rotating-sphere-to-follow-mouse/38425 "2022-08-20T07:42:12Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![vegas](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@vegas](https://discourse.processing.org/u/vegas)\
**Post date:** [August 20, 2022, 7:42am UTC](https://discourse.processing.org/t/p3d-rotating-sphere-to-follow-mouse/38425/1 "2022-08-20T07:42:12Z")

</div>

Hi,  
Im using P3D and I’m trying to make a sphere rotate in the direction towards the mouses location. To clarify, the sphere should remain stationary at its x,y coordinates but rotate in relation to the mouses position.

I got something close, but the sphere will turn in the opposite direction once the mouse gets close enough. I’m not sure if I need to make an if statement that constrains its rotation before 360 degrees? Or if im just completely thinking about this wrong. I’m not really sure where to go from here. Any help would be greatly appreciated. Heres what I have so far.  
`void setup()  
{  
size(600, 600, P3D);  
}

void draw()  
{  
background(255);  
fill(246, 225, 65);

```
pushMatrix();
translate(width/4, height/2);
rotateY(radians(mouseY));
rotateX(radians(mouseX));
sphereDetail(30); // standard
sphere(40);
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:** [August 20, 2022, 9:03am UTC](https://discourse.processing.org/t/p3d-rotating-sphere-to-follow-mouse/38425/2 "2022-08-20T09:03:41Z")

</div>

Hello @vegas,

Please format your code as per instructions here:  
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

Take a look at the map() function:  
[https://processing.org/reference/map\_.html](https://processing.org/reference/map_.html)

`:)`

---

<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:** [August 20, 2022, 11:13am UTC](https://discourse.processing.org/t/p3d-rotating-sphere-to-follow-mouse/38425/3 "2022-08-20T11:13:11Z")

</div>

here is my version

- sphere not pointing on the mouse but rotating nicely with mouse
- a nicer sphere with a nose
- using `lights()` command which is always nice in 3D
- using sphere with noStroke so that it doesn’t have the ugly grid but looks smooth (the `lights()` do this by the way)

```auto
void setup()
{
  size(600, 600, P3D);
  sphereDetail(30); // standard
}

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

  pushMatrix();
  translate(width/2, height/2);
  rotateX(radians(map(mouseY, height, 0, 0, height)));
  rotateY(radians(mouseX));
  // sphere with nose   
  drawSphereWithNose(); 
  popMatrix();
}

void drawSphereWithNose() 
{
  // sphere 
  noStroke();
  fill(246, 225, 65);// yellow
  sphere(40);

  // red nose   
  translate (45, 0, 0); 
  fill(255, 0, 0); // red 
  stroke(0);
  box(10);
}
//

```

* * *

**New version**

New version that looks at the mouse

- using map()

```auto
final float degrees90 = 90; 

void setup()
{
  size(600, 600, P3D);
  sphereDetail(30); // standard
}

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

  pushMatrix();
  translate(width/2, height/2);
  rotateX(radians(map(mouseY, height, 0, -degrees90, degrees90)));
  rotateY(radians(map(mouseX, 0, width, -degrees90-90, degrees90-90)));
  // sphere with nose   
  drawSphereWithNose(); 
  popMatrix();
}

void drawSphereWithNose() 
{
  // sphere 
  noStroke();
  fill(246, 225, 65);// yellow
  sphere(40);

  // red nose   
  translate (45, 0, 0); 
  fill(255, 0, 0); // red 
  stroke(0);
  box(10);
}
//

```

* * *

**Version 3**

- using tan() command

```auto
void setup()
{
  size(600, 600, P3D);
  sphereDetail(30); // standard
}

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

  pushMatrix();
  translate(width/2, height/2); 

  float angleFromMouseY = tan(map(mouseY, 0, height, 1, -1));
  rotateX(angleFromMouseY);

  float angleFromMouseX = tan(map(mouseX, 0, width, -1, 1));
  rotateY(angleFromMouseX-(TWO_PI/4.0));

  // sphere with nose   
  drawSphereWithNose(); 
  popMatrix();
}

void drawSphereWithNose() {
  // sphere 
  noStroke();
  fill(246, 225, 65);// yellow
  sphere(40);

  // red nose   
  translate (45, 0, 0); 
  fill(255, 0, 0); // red 
  stroke(0);
  box(10);
}
//

```

---

<div class="post-metadata">

**Author:** ![vegas](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@vegas](https://discourse.processing.org/u/vegas)\
**Post date:** [August 20, 2022, 7:02pm UTC](https://discourse.processing.org/t/p3d-rotating-sphere-to-follow-mouse/38425/4 "2022-08-20T19:02:29Z")

</div>

Incredible! Thank you. You’re awesome

---

<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:** [August 21, 2022, 11:51am UTC](https://discourse.processing.org/t/p3d-rotating-sphere-to-follow-mouse/38425/5 "2022-08-21T11:51:42Z")

</div>

Please note that you need mouseX for rotateY and vice versa

That’s because how things are.

(Think of how the axis are in 3D space)

By the way there is a great library named Peasycam for great rotation in 3D, when you just want to look at things.

---

<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 3, 2022, 6:49pm UTC](https://discourse.processing.org/t/p3d-rotating-sphere-to-follow-mouse/38425/6 "2022-09-03T18:49:34Z")

</div>

> [@Chrisir](#):
>
> `float angleFromMouseY = tan(map(mouseY, 0, height, 1, -1));`

Hello @Chrisir,

Can you provide some context to why you did this?

In the picture below…  
The straight line is the linear mapping.  
The curved line is the tan() mapping.

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/9/8/983c8e80cb1be7833182ebdeca36ff1b833ce402.png)

`:)`