Search code examples
processingprocessing.js

P3D camera orientation

I've got a big sphere. There is a red dot that moves around the sphere. I want to follow that red dot as it moves around to sphere. So my camera has to move with the red dot. But there is a problem. Right now, what I'm experiencing is what is shown in exhibit B. I want my animation to realize the point of view shown in exhibit A.

I want my animation to realize the point of view shown in exhibit A.

Here is the code I have so far. I think it's pretty simple. I have 3 variables that control where my eye is, and I have 3 variables that control where the target is. The red dot is also located at the target position. I added 2 planes in x-y which helped me not get too confused as the thing was spinning.

Here is a fiddle:

https://jsfiddle.net/da8nza6y/

float radius = 1000;
float view_elevation = 1500;
float target_elevation = 300;

float x_eye;
float y_eye;
float z_eye;

float x_aim;
float y_aim;
float z_aim;
float h;
float theta;

void setup() {
  size(600, 600, P3D);
  theta = 0;
  h = 30;
}

void draw() {

  theta += 0.5;
  theta = theta%360;

  x_eye = (radius+view_elevation)*cos(theta*PI/180);
  y_eye = 0;
  z_eye = (radius+view_elevation)*sin(theta*PI/180);

  x_aim = (radius+target_elevation)*cos((theta+h)*PI/180);
  y_aim = 0;
  z_aim = (radius+target_elevation)*sin((theta+h)*PI/180);

  camera(x_eye, y_eye, z_eye, x_aim, y_aim, z_aim, 0, 0, -1);

  background(255);

  // the red dot
  pushMatrix();
    translate(x_aim, y_aim, z_aim);
    fill(255, 0, 0, 120);
    noStroke();
    sphere(10);
  popMatrix();

  // the big sphere
  noStroke();
  fill(205, 230, 255);
  lights();
  sphere(radius);

  // the orange plane
  pushMatrix();
    translate(0, 0, 10);
    fill(255, 180, 0, 120);
    rect(-2000, -2000, 4000, 4000);
  popMatrix();

  // the green plane
  pushMatrix();
    translate(0, 0, -10);
    fill(0, 180, 0, 120);
    rect(-2000, -2000, 4000, 4000);
  popMatrix();

}

So the pickle is that, it seems like the moment the red dot (whose location in the x-z plane is given by the angle (theta+h) and distance (radius+target_elevation) from the origin) crosses the x-y plane, everything gets flipped upside-down and backwards.

Now, I have tried to control the last 3 variables in the camera() function but I'm getting confused. The documentation for the function is here:

https://processing.org/reference/camera_.html

Can anyone see a solution to this problem?

Also, I'm sure I could just rotate the sphere (which I can do) and not have these problems, but I'm sure where I'm going with this animation and I feel like there will be things to come that will be easier with this method. Though I could be mistaken.

Solution

  • I believe I've solved my own problem.

    I've added the following lines in draw, before calling the camera() function:

      if ((x_eye- x_aim) < 0) {
    z_orientation = 1;
  } else {
    z_orientation = -1;
  }

    I noticed that it wasn't (theta+h) that was triggering the flip, but the relative positions of the view and target.

    Here is an updated fiddle:

    https://jsfiddle.net/da8nza6y/1/