1,    // 0 preamble

  10, // 1 fade-in far sliver

  5,    // 2 PAUSE

  500, // 3 move to middle

  5,    // 4 PAUSE

  20, // 5 fade-in near sliver

  5,    // 6 PAUSE

  75, // 7 close the gap

  5,    // 8 PAUSE

  100, // 9 line

  5,    // 10 PAUSE

  10, // 11 horizontal split

  5,    // 12 PAUSE

  20    // 13 fade to black

];

let tscl = 10;

let c = 0;

let frames = 0;

let cframes = cues[c] * tscl;

​

let x1, x2, x3, x4, x5, x6, x7, x8;

let y1, y2, y3, y4, y5, y6, y7, y8;

​

let x3start, x3end;

let lstartx, lstarty, lendx, lendy;

let lx, ly;

let lxspeed, lyspeed;

let a1 = 0;

let a2 = 0;

let a3 = 255;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  noCursor();

​

  x31 = width * 0.1;

  x32 = width * 0.5;

  x34 = width * 0.25;

​

  x73 = width * 0.95;

​

  lstartx = 0;

  lstarty = height * 0.29;

  lendx = width;

  lendy = height * 0.37;

  lx = lstartx;

  ly = lstarty;

​

  // Calculate xyspeed based on slope

  let m = (lendy-lstarty) / lendx;

  lxspeed = width / (cues[9] * tscl);

  lyspeed = lxspeed * m;

​

​

  for (let i = 0; i <= c; i++) {

    frames += cues[i] * tscl;

  }

}

​

function draw() {

  background(0);

  cue();

​

  noStroke();

  fill(255, a1);

  beginShape();

  vertex(x1, y1);

  vertex(x2, y2);

  vertex(x3, y3);

  vertex(x4, y4);

  vertex(x1, y1);

  endShape(CLOSE);

​

  fill(255, a2);

  beginShape();

  vertex(x5, y5);

  vertex(x6, y6);

  vertex(x7, y7);

  vertex(x8, y8);

  vertex(x5, y5);

  endShape(CLOSE);

​

  strokeWeight(2);

  stroke(0, a3);

  line(lstartx, lstarty, lx, ly);

​

​

  switch (c) {

    // Sliver appears at the far end

    case 1:

      x1 = 0;

      y1 = 0;

      x2 = 0;

      y2 = height;

      x3 = x31;

      y3 = y2;

      x4 = x3;

      y4 = y1;

      a1 += 255 / cframes;

      break;

      // Sliver grows to almost half  

    case 3:

      x3 += (x32 - x31) / cframes;

      x4 = x3;

      break;

      // Sliver appears at near end

    case 5:

      x5 = width;

      y5 = 0;

      x6 = width;

      y6 = height;

      x7 = x73;

      y7 = y6;

      x8 = x7;

      y8 = y5;

      a2 += 255 / cframes;

      break;

    // Whites start to move towards far end

    // Eventually squeezes out black

    case 7:

      x3 += (x34 - x32) / cframes;

      x4 = x3;

      x7 += (x34 - x73) / cframes;

      x8 = x7;

      break;

    // Draw a line

    case 9:

      lx += lxspeed;

      ly += lyspeed;

      break;

      // Divide along length

    case 11:

      x1 = 0;

      y1 = 0;

      x2 = x1;

      y2 = lstarty;

      x3 = width;

      y3 = lstarty*1.1;

      x4 = x3;

      y4 = y1;

​

      x5 = x1;

      y5 = y2;

      x6 = x1;

      y6 = height;

      x7 = x3;

      y7 = y6;

      x8 = x7;

      y8 = y3;

​

      a2 -= 255 / cframes;

      a3 -= 255/ cframes;

      break;

    case 13:

        a1 -= 255/ cframes;

      break;

  }

}

​

function cue() {

​

  if (frameCount > frames) {

    c++;

    cframes = cues[c] * tscl;

    frames += cues[c] * tscl;

    console.log("CUE: " + c);

  }

}