​

let myBuffer;

let cam1;

let cam2;

let usingCam1 = true;

​

function setup() {

  createCanvas(100, 100, WEBGL);

​

  // Create a p5.Framebuffer object.

  myBuffer = createFramebuffer();

​

  // Create cameras between begin/end.

  myBuffer.begin();

  // Create the first camera.

  // Keep its default settings.

  cam1 = myBuffer.createCamera();

​

  // Create the second camera.

  // Place it at the top-left.

  // Point it at the origin.

  cam2 = myBuffer.createCamera();

  cam2.setPosition(400, -400, 800);

  cam2.lookAt(0, 0, 0);

  myBuffer.end();

​

  describe('A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.');

}

​

function draw() {

  // Draw to the p5.Framebuffer object.

  myBuffer.begin();

  if (usingCam1) {

    setCamera(cam1);

  } else {

    setCamera(cam2);

  }

  background(200);

  resetMatrix()

  box();

  myBuffer.end();

​

  // Display the p5.Framebuffer object.

  image(myBuffer, -50, -50);

}

​

// Toggle the current camera when the user double-clicks.

function doubleClicked() {

  if (usingCam1 === true) {

    usingCam1 = false;

  } else {

    usingCam1 = true;

  }

}