Interactive video sculpture - mouseOver outsideVideos

let cloudPath = 'https://static-assets.codecademy.com/Courses/Learn-p5/projects/cloud.mp4';
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(600, 500);
  
    cloudVideo = createVideo(cloudPath);
    starsVideo = createVideo(starsPath);
    staticVideo = createVideo(staticPath);
    humanVideo = createVideo(humanPath);
  
  // TODO: Load videos

  // TODO: Populate videos array
  videos = [cloudVideo, starsVideo, staticVideo, humanVideo];

  // TODO: Iterate over videos to loop, mute, and hide each one
  for (i = 0; i < videos.length; i++){
    let video = videos[i];
    video.volume(0);
    video.loop();
    video.hide();
  }

  // TODO: Populate outsideVideos array
  outsideVideos = [cloudVideo, starsVideo, staticVideo];
  // outsideVideos.mouseOver(changeVideo)
}

function draw() {
  background(0);
  
  // Calculate the width and height for each "screen" in the grid
  let w = (width - margin * (numOfScreensWide + 1)) / numOfScreensWide;
  let h = (height - margin * (numOfScreensWide + 1)) / numOfScreensWide;
  
  // Create a 4x4 grid of screens with a margin of 20px
  for (let i = 0; i < numOfScreensWide; i++) { 
    for (let j = 0; j < numOfScreensTall; j++) {
    
      // Calculate current x, y position where this "screen" should be drawn
      let x = margin + i * (w + margin);
      let y = margin + j * (h + margin);
      
      // Draw a white rectangle to demonstrate where this "screen" is
      fill(255);
      rect(x, y, w, h);

      if (i === 1 && j ===1){
        image(humanVideo, x, y, w, h, 0, 0, humanVideo.width / 2, humanVideo.height / 2); 
      } else if (i === 1 && j === 2){
        image(humanVideo, x, y, w, h, 0, humanVideo.height / 2, humanVideo.width / 2, humanVideo.height / 2);
      } 
      else if (i === 2 && j === 1){
        image(humanVideo, x, y, w, h, humanVideo.width / 2, 0, humanVideo.width / 2, humanVideo.height / 2)
      }
      else 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)
      }
      
    }
      
      // TODO: Fill this "screen" with a video, according to its (i,j) position
  
  }
}

function mouseClicked(){
  counter++;
}

// function changeVideo(){
//   // counter++;
//   if (outsideVideos[1] === 0){
//     selectedVideo[0] = outsideVideos[1]
//   } else if (selectedVideo === 1){
//     selectedVideo[1] = outsideVideos[2]
//   } else if (selectedVideo === 2){
//     selectedVideo[2] = outsideVideos[0]
//   }
// }

// TODO: Make videos on the outside change when mouse is clicked

My goal with the above code is to utilise the mouseOver method to change whatever outside video the user is hovering over (ideally) to a randomly chosen sibling video element in the outsideVideo array.

I have seen other examples use mouseX and Y to register where the cursor is, but, given the plotting of each rectangle on the canvas i thought this seems abit ardous no? is the commented out setUp and globally-placed changeVideo function the right way to go or am i missing something?

Asides from the setUp method, im sure the draw loop overwrites changes in other globally-scoped functions, so to render them when i want and prevent this i capture those individual videos i want to randomly chose and play with in the external changeVideo() function, i assign the mouseOver() method to the outsideVideos array in setUp.

Now Im just not sure what to do next…