P3D rotating sphere to follow mouse

Processing Coding Questions
1

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

}`

2

Hello @vegas,

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

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

:)

3

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)
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()
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
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);
}
//
1 Like
4

Incredible! Thank you. You’re awesome

1 Like
5

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.

6

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

:)