let starsPath = 'https://static-assets.codecademy.com/Courses/Learn-p5/projects/stars.mp4';

let staticPath = 'https://static-assets.codecademy.com/Courses/Learn-p5/projects/static.mp4';

let humanPath = 'https://static-assets.codecademy.com/Courses/Learn-p5/projects/human.mp4';

​

let cloudVideo, starsVideo, staticVideo, humanVideo;

let videos;

let outsideVideos;

​

let margin = 20;

let numOfScreensTall = 4;

let numOfScreensWide = 4;

​

let counter = 1;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  cloudVideo = createVideo(cloudPath);

  starsVideo = createVideo(starsPath);

  staticVideo = createVideo(staticPath);

  humanVideo = createVideo(humanPath);

  videos = [cloudVideo, starsVideo, staticVideo, humanVideo];

  videos.forEach(video => {

    video.volume(0);

    video.loop();

    video.hide();

  });

  outsideVideos = [cloudVideo, starsVideo, staticVideo];

}

​

function draw() {

  background(0);

  let w = (width - margin * (numOfScreensWide + 1)) / numOfScreensWide;

  let h = (height - margin * (numOfScreensWide + 1)) / numOfScreensWide;

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

    for (let j = 0; j < numOfScreensTall; j++) {

      let x = margin + i * (w + margin);

      let y = margin + j * (h + margin);

      if((i === 1 || i === 2) && (j === 1 || j === 2)){

        if(i === 1 && j === 1){

          image(humanVideo, x, y, w, h, 0, 0, humanVideo.width/2, humanVideo.height/2);

        }

        if(i === 1 && j === 2){

          image(humanVideo, x, y, w, h, 0, humanVideo.height/2, humanVideo.width/2, humanVideo.height/2);

        }

        if(i === 2 && j === 1){

          image(humanVideo, x, y, w, h, humanVideo.width/2, 0, humanVideo.width/2, humanVideo.height/2);

        }

        if(i === 2 && j === 2){

          image(humanVideo, x, y, w, h, humanVideo.width/2, humanVideo.height/2, humanVideo.width/2, humanVideo.height/2);

        }

      }else{

        let selectedIndex = (i+j*counter) % outsideVideos.length;

        let selectedVideo = outsideVideos[selectedIndex];

        image(selectedVideo, x, y, w, h);

      }

    }

  }

}

​

function mouseClicked(){

  counter++;

}

​