​

let chapter = 0;

let part = 0;

​

let videoWidth = 800;

let frozen = false;

let xPrev = 0;

let wPrev = 0;

​

let first = true;

​

function preload()

{

  myFont = loadFont('font.ttf');

}

​

function setup() {

  createCanvas(1706, 956);

  fill(0);

  textSize(59);

  textFont(myFont);

  for(i = 0; i < 4; i++) imgArray[i] = [];

  for(i = 0; i < 4; i++) {imgArray[i][0] = []; imgArray[i][1] = [];}

    let index = 1;

    for(i = 0; i < 8; i++)

      {

        if(i < 4) imgArray[i][0][0] = loadImage('imgs/h' + index + '.jpg');

        else imgArray[i-4][1][0] = loadImage('imgs/h' + index + '.jpg');

        index++;

      }

    for(i = 1; i < 7; i++)

      {

        if(i < 4) imgArray[0][0][i] = loadImage('imgs/c1-' + i + '.jpg');

        else imgArray[0][1][i-3] = loadImage('imgs/c1-' + i + '.jpg');

      }

    for(i = 1; i < 7; i++)

      {

        if(i < 4) imgArray[1][0][i] = loadImage('imgs/c2-' + i + '.jpg');

        else imgArray[1][1][i-3] = loadImage('imgs/c2-' + i + '.jpg');

      }

    for(i = 1; i < 7; i++)

      {

        if(i < 4) imgArray[2][0][i] = loadImage('imgs/c3-' + i + '.jpg');

        else imgArray[2][1][i-3] = loadImage('imgs/c3-' + i + '.jpg');

      }

    for(i = 1; i < 7; i++)

      {

        if(i < 4) imgArray[3][0][i] = loadImage('imgs/c4-' + i + '.jpg');

        else imgArray[3][1][i-3] = loadImage('imgs/c4-' + i + '.jpg');

      }

  chapter = int(random(0,4));

}

​

function draw() {

  background(255);

  fill(0);

  let v = 240

  let t, t2, t3;

  let d1 = 0;

  let d2 = mouseX;

  if(d2 > 900) d2 = 900;

  let d3 = mouseY-100;

  let x = 0; 

  if(first)

    {

      push();

      textSize(200);

      textAlign(CENTER);

      text('Click to begin',width/2,height/2 - 20);

      pop();

    }

  else

    {

      if(!frozen) 

      {

        x = map(floor(d2), 25, videoWidth-20, -width*2 + 150, width/2 - 150);

        if(abs(xPrev-x) < width*0.03) x = xPrev; //buffer to smooth motion

        else xPrev = x;

      }

      else x = xPrev;

​

      for(i = 0; i < 4; i++)

        {

          image(imgArray[chapter][part][i],floor(x) + (i*1100),100);

        }

​

​

      //color 3

      moveWords(floor(x), d3-30, chapter, part, videoWidth);

    }

​

  let m = 0;

}

​

 function mousePressed()

 {

   if(first) first = false;

   else

     {

       if(!frozen) frozen = true;

       else frozen = false;

     }

 }

​

function keyPressed() {

​

  if(keyCode == UP_ARROW)

  {

    if(part == 0) part = 1;

    else part = 0;

  }

  if (keyCode == SHIFT) 

  {

    let fs = fullscreen();

    fullscreen(!fs);

  }

​

  if (keyCode == RIGHT_ARROW) 

  {

    chapter++;

    if(chapter > 3) chapter = 0;

  }

  if (keyCode == LEFT_ARROW) 

  {

    chapter--;

    if(chapter < 0) chapter = 3;

  }

}