How can I see all sides of the cube with the help of camera?

_igo_r_

I have been working with the camera function in open processing. I've made an app where I can see the cube from Different sides. But I can't see one of them. Could you help me to do it? here is my code in open processing:

function setup(){
  createCanvas(windowWidth, windowHeight, WEBGL);
} 

function draw(){
  background(1);
  translate(0, 0, 0);
  r = 0;
  d = 0;
  ySpeed = mouseY + pmouseY;
  r = r + ySpeed;
  xSpeed = mouseX + pmouseX;
  d = d + xSpeed;
  camera(d / 1.5 - 1000, 300, -r + 800, 0, 0, 0, 0.5, 0.5, -d - 1000);
  box(200);
}

koogs

please don't post duplicates

jeremydouglass

Why can't you see one of them? What specifically is going wrong? Is it that the mouse control is bad? Is something not rendering correctly? Can you describe the problem in more detail?

Chrisir

You are moving your camera on x and z axis

Consider to use cos and sin and to use the mouse values as degrees you feed into cos and sin (use radians())

Chrisir

     cameraX = 300 * cos(radians(map(mouseX,0,width,0,375)));

Chrisir

Post your entire code

_igo_r_

function setup(){ createCanvas(windowWidth,windowHeight,WEBGL); } function draw(){ background(1); translate(0,0,0); r = 0; d = 0; ySpeed = mouseY + pmouseY; r = r + ySpeed; xSpeed = mouseX + pmouseX; d = d + xSpeed; camera(300 * cos(radians(map(mouseX,0,width,0,375))),300,-r+800,0, 0,0, 0.5,0.5,-d-1000); box(200);

}

Chrisir

Please implement the sin clause for your Z value

You can make line breaks inside the camera statement

koogs

edit post, highlight code, press ctrl-o to format.

Chrisir

// in classical processing 

void setup() { 
  size(670, 800, P3D);
} 

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

  float  r = 0; 
  float  d = 0; 
  float ySpeed = mouseY + pmouseY; 
  r = r + ySpeed; 
  float xSpeed = mouseX + pmouseX; 
  d = d + xSpeed;

  float camX = 500 * cos(radians(map(mouseX, 0, width, 0, 375)));
  float camY = 500 * cos(radians(map(mouseY, 0, height, 0, 375)));
  float camZ = 500 * sin(radians(map(mouseX, 0, width, 0, 375)));

  camera(camX, camY, camZ, 
    0, 0, 0, 
    0, 1, 0);

  translate(0, 0, 0);
  fill(255, 0, 0);
  box(200);
}

_igo_r_

perfect, thank you so much

Chrisir

;-)

Chrisir

Explanation of my code above

My code has the cube fixed and rotates the camera around it.

The camera rotates on the circumference of a circle.

It works fully in the x-z-plane (horizontal circle in the plane defined by x and z axis), not so good in y direction (you could say I cheated there).

sin and cos are two functions that calculate the x and y positions of a point on the circumference of a circle on a given angle (or you could say it is defined in the context of a right triangle placed within the circle; see Wikipedia below). That’s where we place the camera, on the circumference of a circle.

Let's say the angle is 30° (degree which you have to convert to radians in processing, never mind) then

   float x = cos(radians(30)) * 40;
   float y = sin(radians(30)) * 40;

would give you the values you have to go from the circle center in x-direction and in y-direction to reach the point of the circumference at 30 degree, when the circle has a radius of 40 pixels.

Example

Here is a 2D example of sin and cos:

int angle=0;

int radius = 100;

void setup() {
  size (770, 770);
}

void draw() {
  background (0);

  // get x and y 
  float x = cos(radians(angle)) * radius;
  float y = sin(radians(angle)) * radius;

  // headline
  fill(234, 2, 2);
  stroke(234, 2, 2);    
  text("Demonstration of sin and cos", 
    width/2 - textWidth("Demonstration of sin and cos")/2, 
    height / 2 -radius - 30);
  strokeWeight(1);
  line (width/2 - textWidth("Demonstration of sin and cos")/2, 
    height / 2 -radius - 27, 
    width/2 + textWidth("Demonstration of sin and cos")/2-8, 
    height / 2 -radius - 27);

  // line from center to current angle
  strokeWeight(1);
  line (width/2, height / 2, 
    width/2 + x, height/2 + y);

  // show middle point / center 
  stroke(255, 2, 2);
  strokeWeight(5);
  point (width/2, height / 2);

  // show current angle by adding x and y to center 
  stroke(2, 244, 222);
  point (width/2 + x, height/2 + y);

  // show x part 
  stroke(2, 244, 2);
  fill(2, 244, 2);
  line (
    width/2, height / 2+ radius + 10, 
    width/2 + x, height / 2 + radius + 10);
  text("x = "+x, width/2, height / 2 + radius + 30);

  // show y part 
  stroke(30, 120, 222);
  fill(30, 120, 222);
  line (
    width/2 + radius + 10, height / 2, 
    width/2 + radius + 10, height / 2 + y );
  text("y = "+y, width/2 + radius + 30, height / 2 + 0);

  // show angle part 
  fill(234);
  println(angle);
  text ("angle = "+ angle, width/2-27, height / 2 - 10 ); 

  // show formula 
  fill(234);
  text(  "float x = cos(radians(angle)) * radius;", width/2-227, height - 140 ); 
  text(  "float y = sin(radians(angle)) * radius;", width/2-227, height  - 120 ); 

  // ----------------
  // manage the angle 
  angle++;
  if (angle>360)
  { 
    angle=0;
  }
}

Reference

See reference for sin and cos and

https://www.processing.org/reference/

Tutorial

see tutorial trigonometry:

https://www.processing.org/tutorials/trig/

Wikipedia

See Wikipedia

Sine

https://en.wikipedia.org/wiki/Sine

Cosine

https://en.wikipedia.org/wiki/Trigonometric_functions#cosine

trigonometry

https://en.wikipedia.org/wiki/Trigonometric_functions