Code: Select all
// simple imagegrid -> click -> play video -> return to grid
// all the videos in this folder are the same
// swap for your video files
// match videofile and image by number
let images = [];
let videos = [];
let play = false;
let rows = 3;
let cols = 4;
let colW;
let rowH;
let selected = {};
function preload() {
//load images from one to twelve padding the string wit zeros before numbers < 9
let imagePath = 'assets/images/';
for(let i = 1; i <= rows*cols; i++){
let filename = 'Webre_imageidea-' + i.toString().padStart(2, '0') + '.png'
images.push( loadImage(imagePath + filename ) );
}
//load videos from one to twelve padding the string wit zeros before numbers < 9
let videoPath = 'assets/videos/';
for(let i = 1; i <= rows*cols; i++){
let filename = i.toString().padStart(2, '0') + '.mp4';
videos.push( createVideo(videoPath + filename ) );
}
}
function setup() {
createCanvas(640, 640);
// calculate column width and row height in pixels
colW = width/cols;
rowH = height/rows;
selected. i =0;
selected.j = 0;
for (let i = 0 ; i < 12 ; i++ ) {
videos[i].hide(); // hide all videos outside of canvas
}
}
function draw() {
// if we are playing
if ( play == true ) {
// if duration is a number and video is not over yet:
if (!isNaN( videos[selected.i+selected.j*cols].duration() ) && videos[selected.i+selected.j*cols].duration() - videos[selected.i+selected.j*cols].time() !== 0) {
image(videos[selected.i+selected.j*cols],0,0,width,height);
} else {
// stop video and return to drawing grid of imges
videos[selected.i+selected.j*cols].stop();
play =false;
}
} else {
// draw grid of images
for(let i = 0; i < 4; i++){
for(let j = 0; j < rows; j++){
image( images[i+j*cols], i * colW, j * rowH, colW, rowH );
}
}
}
}
function mouseClicked () {
// if a video is not alredy playing
if (play == false ) {
play = true;
// calculate what quadrant was clicked
selected.i = floor(mouseX/colW);
selected.j = floor(mouseY/rowH);
// play corrispondent video
videos[selected.i+selected.j*cols].play();
}
}