xxxxxxxxxx
68
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(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++;
}