​

let x=0,y=0,zmag = 1;

let Y = -1;  // to invert processing y axis

​

function setup() {

  createCanvas(500, 500, WEBGL);

  noSmooth();

  noFill();

  //ortho();

  strokeWeight(2);

  print("use: mouse X Y, wheel for zoom");

}

​

function draw() {

  background(200, 200, 0);

  my_Camera();

  my_Drawing();

}

​

function my_Drawing() {

  axis();

  spheres();

}

​

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

}

​

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

}

​

function 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);                 NOT NEEDED IN WEBGL

  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 )

}

​

​

function sphereAt(x,y,z, diam ) {

  push();

  translate(x, y, z);

  sphere(diam);

  pop();

}

​

function mouseWheel(event) {

  let e = event.delta; //println(e);

  zmag += e*0.01;

}

​

//_____________________________________________________________ JAVA example

/*   

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;

}

​

​

*/