/*
 * @name Textures
 * @arialabel One sphere and one cube rotating on a white background. The sphere is covered with a video display and the cube is covered with an image. 
 * @description Images and videos are supported for texture.
 */
// video source: https://vimeo.com/90312869
let img;
let vid;
let theta = 0;

function setup() {
  // createCanvas(710, 400, WEBGL);
  createCanvas(windowWidth, windowHeight, WEBGL);

  // img = loadImage('assets/cat.jpg');
  img = loadImage('../../../../p5js-website-legacy-examples/assets/cat.jpg');
  // vid = createVideo(['assets/360video_256crop_v2.mp4']);
  vid = createVideo(['../../../../p5js-website-legacy-examples/assets/360video_256crop_v2.mp4']);
  vid.elt.muted = true;
  vid.loop();
  vid.hide();
}

function draw() {
  background(250);
  translate(-220, 0, 0);
  push();
  rotateZ(theta * mouseX * 0.001);
  rotateX(theta * mouseX * 0.001);
  rotateY(theta * mouseX * 0.001);
  //pass image as texture
  texture(vid);
  sphere(150);
  pop();
  translate(440, 0, 0);
  push();
  rotateZ(theta * 0.1);
  rotateX(theta * 0.1);
  rotateY(theta * 0.1);
  texture(img);
  box(100, 100, 100);
  pop();
  theta += 0.05;
}