​

// Video: https://youtu.be/O1mYw-3Wl_Q

​

let angle = 0;

let fov, cameraZ;

​

function setup() {

  createCanvas(400, 300, WEBGL);

}

​

function draw() {

  background(175);

  lights();

​

  // Perspective

  //fov = PI / 3;

  fov = map(mouseX, 0, width, 0, PI);

  let aspectRatio = width / height;

  let cameraZ = ( height / 2) / tan(fov / 2);

  // let cameraZ = height / 2 / tan(PI / 3 / 2);

  perspective(fov, aspectRatio, 0.01, 2000);

  //perspective(fov, aspectRatio, cameraZ / 10, mouseX);

​

  push();

  rotateX(angle);

  rotateY(angle * 0.3);

  rotateZ(angle * 1.2);

  normalMaterial();

  noStroke();

  box(100);

  pop();

​

  // Add a plane at bottom

  translate(0, 100);

  rotateX(HALF_PI);

  ambientMaterial(255, 255, 255);

  // Add noStroke to remove wireframe

  noStroke();

  plane(500, 500);

​

  angle += 0.03;

}

​