Interactive Video Sculpture - Videos Not Rendering on Outside

Hi everyone,

I was trying to follow the code from the video - using an if-elseif technique - to fill in the grids. I typed in the code below:

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) % outsideVideos.length;

    let selectedVideo = outsideVideos[selectedIndex];

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

  }

For some reason, my β€œelse” statement at the end is making the compiler not render the videos I want on the screen. I just want to know if I made an error within this code or if there is a subtle bug that I missed.

Thank you in advance.

Hi @jonathanisozaki09731
I think it’s impossible to tell from the outside just seeing this code snippet.
Did you console.log(selectedVideo) ? What does it say?

Hi @jonathanisozaki09731,

You have:

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

Check instruction 17 to determine whether your code is consistent with what it asks you to do.

Link to project page: Learn p5.js: Interactive Video Sculpture.

Edit (March 7, 2021) to add the following:

Are you seeing any videos at all in the outside screens? If not, we will need to see more of your code to determine the problem.

Here is the code.

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);

// TODO: Load videos

cloudVideo = createVideo(cloudPath);

starsVideo = createVideo(starsPath);

staticVideo = createVideo(staticPath);

humanVideo = createVideo(humanPath);

// TODO: Populate videos array

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

// TODO: Iterate over videos to loop, mute, and hide each one

for(let i = 0; i<videos.length; i++)

{

videos[i].volume(0);

videos[i].loop();

videos[i].hide();

}

// TODO: Populate outsideVideos array

let outsideVideos = [cloudVideo, starsVideo, staticVideo];

}

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);

  

  // TODO: Fill this "screen" with a video, according to its (i,j) position

  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) % outsideVideos.length;

    let selectedVideo = outsideVideos[selectedIndex];

    console.log(selectedVideo);

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

    

  }

  

}

}

}

In the setup() function you have:

let outsideVideos = [cloudVideo, starsVideo, staticVideo];

With let preceding the assignment, you are redefining outsideVideos as a local variable within that function. Consequently, within the draw() function, outsideVideos is referring to the global variable by that name, which was not populated with the videos. Remove let from that statement so that the global variable becomes populated with the videos.

Thank you for your input. That was the error that I ran into. That was definitely a subtle error, especially with the less strict nature of JavaScript compared to C++.

1 Like