let ratio = 16 / 9;

​

// button relative sizes

let buttonSize = 0.1;

let backButtonX = 0;

let backButtonY = 0;

let button1X = 0.39;

let button1Y = 0.21;

let button2X = 0.61;

let button2Y = 0.25;

let button3X = 0.38;

let button3Y = 0.63;

let button4X = 0.58;

let button4Y = 0.63;

​

let clickToStart = true;

let enableButtons = true;

let buttonHover1 = false;

let buttonHover2 = false;

let buttonHover3 = false;

let buttonHover4 = false;

let buttonHovers = [buttonHover1, buttonHover2, buttonHover3, buttonHover4]

​

// responsive sizing for 'cover' style positioning/sizing

let modX = 0;

let modY = 0;

let vidWidth;

let vidHeight

​

let colour = "white"

// arrays for audio/video

let audio;

let videos;

// last video is the home screen

let currentVideo = 4;

​

// variable for mobile/touch detection

let touch = false

if ("ontouchstart" in document.documentElement) {

  touch = true;

}

​

function preload() {

  videoMain = createVideo(['assets/video.mp4']);

  castro = createAudio('assets/audio/castro.m4a');

  rajah = createAudio('assets/audio/rajah.m4a');

  robyn = createAudio('assets/audio/robyn.m4a');

  thomas = createAudio('assets/audio/thomas.m4a');

  videoCastro = createVideo(['assets/videos/castro.mp4']);

  videoRajah = createVideo(['assets/videos/rajah.mp4']);

  videoRobyn = createVideo(['assets/videos/robyn.mp4']);

  videoThomas = createVideo(['assets/videos/thomas.mp4']);

  videoMain.hide();

  videoCastro.hide();

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  // playsinline allows mobile to have the video on the canvas

  // otherwise it plays fullscreen in quicktime on ios

  videoMain.elt.setAttribute("playsinline", "");

  videoMain.elt.setAttribute("muted", "");

  videoCastro.elt.setAttribute("playsinline", "");

  videoRajah.elt.setAttribute("playsinline", "");

  videoRobyn.elt.setAttribute("playsinline", "");

  videoThomas.elt.setAttribute("playsinline", "");

  castro.elt.setAttribute("playsinline", "");

  rajah.elt.setAttribute("playsinline", "");

  robyn.elt.setAttribute("playsinline", "");

  thomas.elt.setAttribute("playsinline", "");

  // playMain();

  videos = [videoCastro, videoRajah, videoRobyn, videoThomas, videoMain]

  audio = [castro, rajah, robyn, thomas]

}

​

function draw() {

  background(0)

  fill(colour)

​

  // calculate x and y offset for elements

  // calculate 'cover' size width and height

  if (width / height < ratio) {

    vidWidth = width

    vidHeight = height * (width / height) / ratio

    modY = height / 2 - vidHeight / 2;

  } else {

    vidWidth = width / ((width / height) / ratio)

    vidHeight = height

    modX = width / 2 - vidWidth / 2;

  }

​

  // initial text

  if (clickToStart) {

    noStroke()

    textSize(40);

    textAlign(CENTER);

    text("click to start", width / 2, height / 2)

  }

​

  // add the video

  image(videos[currentVideo], modX, modY, vidWidth, vidHeight);

​

  // squares for button positions

  noFill()

  stroke(255)

  if (enableButtons && !clickToStart) {

    square(vidWidth * button1X + modX, vidHeight * button1Y + modY, vidWidth * buttonSize);

    square(vidWidth * button2X + modX, vidHeight * button2Y + modY, vidWidth * buttonSize);

    square(vidWidth * button3X + modX, vidHeight * button3Y + modY, vidWidth * buttonSize);

    square(vidWidth * button4X + modX, vidHeight * button4Y + modY, vidWidth * buttonSize);

  } else if (!clickToStart) {

    square(vidWidth * backButtonX + modX, vidHeight * backButtonY + modY, vidWidth * buttonSize);

  }

​

  // hit detection on rollover

  isMouseInside(vidWidth * button1X + modX, vidHeight * button1Y + modY, vidWidth * buttonSize, 0)

  isMouseInside(vidWidth * button2X + modX, vidHeight * button2Y + modY, vidWidth * buttonSize, 1)

  isMouseInside(vidWidth * button3X + modX, vidHeight * button3Y + modY, vidWidth * buttonSize, 2)

  isMouseInside(vidWidth * button4X + modX, vidHeight * button4Y + modY, vidWidth * buttonSize, 3)

​

  //   background(220);

  // image(video, 10, 10); // draw the video frame to canvas

  //   filter(GRAY);

  //   image(video, 150, 150); // draw a second copy to canvas

}

​

function mousePressed() {

  // set the video to loop and start playing

  if (clickToStart) {

    playMain()

    clickToStart = false;

  }

  // hit detection on click/tap

  isMouseInside(vidWidth * button1X + modX, vidHeight * button1Y + modY, vidWidth * buttonSize, 0, true)

  isMouseInside(vidWidth * button2X + modX, vidHeight * button2Y + modY, vidWidth * buttonSize, 1, true)

  isMouseInside(vidWidth * button3X + modX, vidHeight * button3Y + modY, vidWidth * buttonSize, 2, true)

  isMouseInside(vidWidth * button4X + modX, vidHeight * button4Y + modY, vidWidth * buttonSize, 3, true)

  backButton(vidWidth * backButtonX + modX, vidHeight * backButtonY + modY, vidWidth * buttonSize)

}

​

// hit detection for audio and video clips

function isMouseInside(x, y, size, clip, click = false) {

  if (enableButtons) {

    if (mouseX > x && mouseX < x + size && mouseY > y && mouseY < y + size) {

      if (touch && click && !buttonHovers[clip]) {

        playAudio(clip)

      }

      if (!buttonHovers[clip]) {

        playAudio(clip)

​

      }

      if (click) {

        enableButtons = false

        videos[clip].play()

        console.log(clip)

        videos[currentVideo].stop();

        currentVideo = clip;

        videos[clip].onended(playMain);

      }

      buttonHovers[clip] = true

    } else {

      // colour = "red"

      buttonHovers[clip] = false

      // return false;

    }

​

    // console.log('touch', touch)

    // console.log('click', click)

  }

}

​

// hit detection for back button

function backButton(x, y, size) {

  if (!enableButtons) {

    if (mouseX > x && mouseX < x + size && mouseY > y && mouseY < y + size) {

      playMain()

    }

  }

}

​

// play the home page video and clean up

function playMain() {

  enableButtons = true;

  currentVideo = 4;

  videos.map(clip => {

    clip.stop()

  })

  videos[4].loop()

}

​

// play audio clip and stop others

function playAudio(clip) {

  audio.map(clip => {

    clip.stop()

  })

  audio[clip].play()

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}