'use strict';

let melies = null;
const detail = 6;
const verts = [];
let center = null;
let scale = null;
let minCutout = 0.1;
let maxCutout = 0.75;
let rotSpeed = 0.01;

function preload() {
  melies = createVideo('assets/melies.ogv', onVideoLoad);
}

function onVideoLoad() {
  melies.loop();
  melies.hide();
}

function setup() {
  createCanvas(512, 256, WEBGL);
  noStroke();

  center = createVector();
  scale = min(width, height) * 0.5;
  const detailToPercent = 1.0 / detail;
  for (let i = 0; i < detail; ++i) {

    // Convert from progress through the for-loop
    // to a percentage 0 .. 1.
    const iPrc = i * detailToPercent;

    // Convert from a percentage to an angle
    // around a circumference in the range
    // 0 .. TWO_PI.
    const theta = TWO_PI * iPrc;

    // Convert from polar to Cartesian coordinates.
    const cost = cos(theta);
    const sint = sin(theta);

    // Store Cartesian coordinates in vertices array.
    verts.push(createVector(cost, sint));
  }
}

function draw() {

  // The angle by which to rotate the polygon.
  const angle = rotSpeed * frameCount;

  // Cutout size oscillates between min and max.
  const oscillation = 0.5 + cos(angle) * 0.5;
  const cutout = lerp(minCutout, maxCutout, oscillation);
  const innerScaleV = scale * cutout;
  const innerScaleVt = 0.5 * cutout;

  // Will store copies of the original shape.
  const v = createVector();
  const vt = createVector();

  // Draw an opaque white background.
  background(255.0);

  for (let i = 0; i < detail; ++i) {
    const j = (i + 1) % detail;
    beginShape();
    texture(melies);

    // Outer left
    v.set(verts[i]).rotate(angle).mult(scale).add(center);
    vt.set(verts[i]).mult(0.5).add(0.5, 0.5);
    vertex(v.x, v.y, v.z, vt.x, vt.y);

    // Outer right
    v.set(verts[j]).rotate(angle).mult(scale).add(center);
    vt.set(verts[j]).mult(0.5).add(0.5, 0.5);
    vertex(v.x, v.y, v.z, vt.x, vt.y);

    // Inner right
    v.set(verts[j]).rotate(angle).mult(innerScaleV).add(center);
    vt.set(verts[j]).mult(innerScaleVt).add(0.5, 0.5);
    vertex(v.x, v.y, v.z, vt.x, vt.y);

    // Inner left
    v.set(verts[i]).rotate(angle).mult(innerScaleV).add(center);
    vt.set(verts[i]).mult(innerScaleVt).add(0.5, 0.5);
    vertex(v.x, v.y, v.z, vt.x, vt.y);
    endShape(CLOSE);
  }
}