Interactive Video Sculpture: humanVideo too small

Get Help p5.js
#1

image

Hello everyone! In the last project for the TV sculpture, even when my code is exactly like in the project walkthrough, the result is this one in the photo! I don’t know if I should resize humanVideo or what… please help me :c

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
    videos = [cloudVideo,starsVideo,staticVideo,humanVideo];
  // TODO: Iterate over videos to loop, mute, and hide each one
    for (let 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];
}

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);
      };
      if (i === 1 && j === 2) {
        image(humanVideo, x, y, w, h, 0, humanVideo.height / 2, humanVideo.width / 2, humanVideo.height);
      };
      if (i === 2 && j === 1) {
        image(humanVideo, x, y, w, h, humanVideo.width / 2, 0, humanVideo.width, humanVideo.height / 2);
      };
      if (i === 2 && j === 2) {
        image(humanVideo, x, y, w, h, humanVideo.width / 2, humanVideo.height / 2, humanVideo.width, humanVideo.height);
      };
    }
  }
}
2 Likes
#2

You can try to resize it, but I don’t really know what to set the size as.

2 Likes
#3

Hello, and welcome back to the forums!

I wasn’t aware they added a project walkthrough, but I compared your code to mine and we have slightly different calculations. Specifically, you’re not cutting some of the values in half by dividing by 2 in your image() arguments.

Just checked the walkthrough for that part of the code and that’s where your code slightly differs. Once you make those adjustments, your code should produce the results you’re after.

3 Likes
#4

See p5.js Reference: image().

For each quadrant of the video, the sWidth and sHeight arguments should be half the width and half the height of the video, respectively. If we consider the lower-right quadrant of the video as an example, you have this:

      if (i === 2 && j === 2) {
        image(humanVideo, x, y, w, h, humanVideo.width / 2, humanVideo.height / 2, humanVideo.width, humanVideo.height);
      };

Since you passed the full width and height of the video to the image() function for the sWidth and sHeight arguments, the space from the source that you are drawing to the sketch goes beyond the actual boundaries of the source video. In the sketch, that area outside the bounds of the video is represented by blank space, and that it why the actual portion of the video that you are drawing is squeezed into 1/4 of the space that it should occupy in its designated grid “screen”.

Link to project: Interactive Video Sculpture.

2 Likes