* @name Materials

 * @arialabel Four rings and one cube of various materials rotate on a black background. As the user’s mouse moves across the window, the position of the light changes.

 * @description There are five types of materials supported.

 * They respond to light differently.

 * Move your mouse to change the light position.

 */

let img;

function setup() {

  createCanvas(710, 400, WEBGL);

  img = loadImage('assets/cat.jpg');

}

​

function draw() {

  background(0);

​

  let locX = mouseX - height / 2;

  let locY = mouseY - width / 2;

​

  ambientLight(60, 60, 60);

  pointLight(255, 255, 255, locX, locY, 100);

​

  push();

  rotateZ(frameCount * 0.01);

  rotateX(frameCount * 0.01);

  rotateY(frameCount * 0.01);

  texture(img);

  box(80);

  pop();

​

  push();

  translate(-width / 4, -height / 4, 0);

  rotateZ(frameCount * 0.01);

  rotateX(frameCount * 0.01);

  rotateY(frameCount * 0.01);

  fill(250, 0, 0);

  torus(80, 20, 64, 64);

  pop();

​

  push();

  translate(width / 4, -height / 4, 0);

  rotateZ(frameCount * 0.01);

  rotateX(frameCount * 0.01);

  rotateY(frameCount * 0.01);

  normalMaterial();

  torus(80, 20, 64, 64);

  pop();

​

  push();

  translate(-width / 4, height / 4, 0);

  rotateZ(frameCount * 0.01);

  rotateX(frameCount * 0.01);

  rotateY(frameCount * 0.01);

  ambientMaterial(250);

  torus(80, 20, 64, 64);

  pop();

​

  push();

  translate(width / 4, height / 4, 0);

  rotateZ(frameCount * 0.01);

  rotateX(frameCount * 0.01);

  rotateY(frameCount * 0.01);

  specularMaterial(250);

  torus(80, 20, 64, 64);

  pop();

}

​