let vidWidth = 400; 

let playing1, playing2, playing3, playing4, playing5, playing6, playing7, playing8, playing9 = false;

let currentVideo1, currentVideo2, currentVideo3, currentVideo4, currentVideo5, currentVideo6, currentVideo7, currentVideo8, currentVideo9 = 1;

​

let fingersCol1X = 0;

let fingersRow1Y = 0;

let fingersCol2X = 0;

let fingersRow2Y = 0;

let fingersCol3X = 0;

let fingersRow3Y = 0;

let bg;

let img;

let ypos = 0;

let img1;

let ypos1 = 0;

let img2;

let ypos2 = 0;

let img3;

let ypos3 = 0;

let img4;

let xpos1 = 0;

​

​

​

​

// Create video elements

function createVideos() {

  fingersCol1X = (width - vidWidth * 3) / 2 - 20;

  fingersRow1Y = 125;

  fingersCol2X = (width - vidWidth * 3) / 2 + vidWidth;

  fingersRow2Y = (height - vidWidth * 0.5625) / 2;

  fingersCol3X = (width - vidWidth * 3) / 2 + vidWidth * 2 + 20;

  fingersRow3Y =  height - vidWidth * 0.5625 - 125;

​

  fingers1 = createVideo(['01_inntak_web_02.mov', '01_inntak_web_02.webm', '01_inntak_web_02.ogv']);

  fingers1.size(vidWidth, vidWidth * 0.5625); // Set size to match canvas

  fingers1.position(fingersCol1X,fingersRow1Y);

  fingers1.hideControls();

  fingers1.mouseOver(playVideo1);

  fingers1.mouseOut(stopVideo1);

  fingers1.mousePressed(toggleVideo1);

​

  fingers2 = createVideo(['01_inntak_web_04.mov', '01_inntak_web_04.webm', '01_inntak_web_04.ogv']);

  fingers2.size(vidWidth, vidWidth * 0.5625); // Set size to match canvas

  fingers2.position(fingersCol2X, fingersRow1Y);

  fingers2.hideControls();

  fingers2.mouseOver(playVideo2);

  fingers2.mouseOut(stopVideo2);

  fingers2.mousePressed(toggleVideo2);

​

  fingers3 = createVideo(['01_inntak_web_06.mov', '01_inntak_web_06.webm', '01_inntak_web_06.ogv']);

  fingers3.size(vidWidth, vidWidth * 0.5625); // Set size to match canvas

  fingers3.position(fingersCol3X, fingersRow1Y);

  fingers3.hideControls();

  fingers3.mouseOver(playVideo3);

  fingers3.mouseOut(stopVideo3);

  fingers3.mousePressed(toggleVideo3);

   fingers4 = createVideo(['01_inntak_web_08.mov', '01_inntak_web_08.webm', '01_inntak_web_08.ogv']);

  fingers4.size(vidWidth, vidWidth * 0.5625); // Set size to match canvas

  fingers4.position(fingersCol1X, fingersRow2Y);

  fingers4.hideControls();

  fingers4.mouseOver(playVideo4);

  fingers4.mouseOut(stopVideo4);

  fingers4.mousePressed(toggleVideo4);

  fingers5 = createVideo(['01_inntak_web_09.mov', '01_inntak_web_09.webm', '01_inntak_web_09.ogv']);

  fingers5.size(vidWidth, vidWidth * 0.5625); // Set size to match canvas

  fingers5.position(fingersCol2X, fingersRow2Y);

  fingers5.hideControls();

  fingers5.mouseOver(playVideo5);

  fingers5.mouseOut(stopVideo5);

  fingers5.mousePressed(toggleVideo5);

  fingers6 = createVideo(['01_inntak_web_12.mov', '01_inntak_web_12.webm', '01_inntak_web_12.ogv']);

  fingers6.size(vidWidth, vidWidth * 0.5625); // Set size to match canvas

  fingers6.position(fingersCol3X, fingersRow2Y);

  fingers6.hideControls();

  fingers6.mouseOver(playVideo6);

  fingers6.mouseOut(stopVideo6);

  fingers6.mousePressed(toggleVideo6);

  fingers7 = createVideo(['01_inntak_web_14.mov', '01_inntak_web_14.webm', '01_inntak_web_14.ogv']);

  fingers7.size(vidWidth, vidWidth * 0.5625); // Set size to match canvas

  fingers7.position(fingersCol1X, fingersRow3Y);

  fingers7.hideControls();

  fingers7.mouseOver(playVideo7);

  fingers7.mouseOut(stopVideo7);

  fingers7.mousePressed(toggleVideo7);

  fingers8 = createVideo(['01_inntak_web_16.mov', '01_inntak_web_16.webm', '01_inntak_web_16.ogv']);

  fingers8.size(vidWidth, vidWidth * 0.5625); // Set size to match canvas

  fingers8.position(fingersCol2X, fingersRow3Y);

  fingers8.hideControls();

  fingers8.mouseOver(playVideo8);

  fingers8.mouseOut(stopVideo8);

  fingers8.mousePressed(toggleVideo8);

  fingers9 = createVideo(['01_inntak_web_18.mov', '01_inntak_web_18.webm', '01_inntak_web_18.ogv']);

  fingers9.size(vidWidth, vidWidth * 0.5625); // Set size to match canvas

  fingers9.position(fingersCol3X, fingersRow3Y);

  fingers9.hideControls();

  fingers9.mouseOver(playVideo9);

  fingers9.mouseOut(stopVideo9);

  fingers9.mousePressed(toggleVideo9);

}

​

function setup() {

  // Create canvas based on the reduced video width

  createCanvas(1920, 1080); // 16:9 aspect ratio

  // Load the initial videos

  createVideos();

    //text

  font = loadFont("font/MinionPro-Regular.otf");

  font2= loadFont("font/MinionPro-It.otf");

  bg = loadImage("bg/bg5.jpg");

  img = loadImage("bg/downloadt.png");

  img1 = loadImage("bg/downloadt.png");

  img2 = loadImage("bg/clickt.png");

  img3 = loadImage("bg/clickt.png");

  img4 = loadImage("bg/placet.png");

  createCanvas(1920, 1080);

  textAlign(CENTER, CENTER);

  textSize(28);

  textFont(font2);

  fill(255);

}

​

​

​

​

​

function draw() {

  background(0);

 background(bg);

  image(img, 500, ypos);

  img.resize(400,0);

  image(img1, 1500, ypos1);

  img1.resize(400,0);

  image(img2, 100, ypos2);

  img2.resize(600,0);

  image(img3, 700, ypos3);

  img3.resize(1400,0);

  image(img4, xpos1, 600);

  img4.resize(1800,0)

  ypos += 2;

  if( ypos > height) {

    ypos = -img.height;

  }

   ypos1 += 3;

  if( ypos1 > height) {

    ypos1 = -img1.height;

  }

  ypos2 += 3;

  if(ypos2 > height) {

    ypos2 = -img2.height;

  }

  ypos3 += 5;

  if(ypos3 > height) {

    ypos3 = -img3.height;

  }  

  xpos1 += 5;

  if(xpos1 > width) {

  xpos1 = -img4.width;}

}

​

​

​

​

// Play the first video

function playVideo1() {

  if (!playing1) {

    fingers1.loop();

    playing1 = true;

  }

}

​

// Stop the first video

function stopVideo1() {

  if (playing1) {

    fingers1.pause();

    playing1 = false;

  }

}

​

// Toggle between the first videos

function toggleVideo1() {

  fingers1.remove(); // Remove the previous video element

  if (currentVideo1 === 1) {

    fingers1 = createVideo(['01_inntak_web_02.mov', '01_inntak_web_02.webm', '01_inntak_web_02.ogv']);

    currentVideo1 = 2;

  } else {

    fingers1 = createVideo(['01_inntak_web_01.mov', '01_inntak_web_01.webm', '01_inntak_web_01.ogv']);

    currentVideo1 = 1;

  }

  fingers1.size(vidWidth, vidWidth * 0.5625); // Set size to match canvas

  fingers1.position(fingersCol1X, fingersRow1Y);

  fingers1.hideControls();

  fingers1.mouseOver(playVideo1);

  fingers1.mouseOut(stopVideo1);

  fingers1.mousePressed(toggleVideo1);

  fingers1.loop(); // Start playing the new video

  playing1 = true;

}

​

// Play the second video

function playVideo2() {

  if (!playing2) {

    fingers2.loop();

    playing2 = true;

  }

}

​

// Stop the second video

function stopVideo2() {

  if (playing2) {

    fingers2.pause();

    playing2 = false;

  }

}

​

// Toggle between the second videos

function toggleVideo2() {

  fingers2.remove(); // Remove the previous video element

  if (currentVideo2 === 1) {

    fingers2 = createVideo(['01_inntak_web_04.mov', '01_inntak_web_04.webm', '01_inntak_web_04.ogv']);

    currentVideo2 = 2;

  } else {

    fingers2 = createVideo(['01_inntak_web_03.mov', '01_inntak_web_03.webm', '01_inntak_web_03.ogv']);

    currentVideo2 = 1;

  }

  fingers2.size(vidWidth, vidWidth * 0.5625); // Set size to match canvas

  fingers2.position(fingersCol2X, fingersRow1Y);

  fingers2.hideControls();

  fingers2.mouseOver(playVideo2);

  fingers2.mouseOut(stopVideo2);

  fingers2.mousePressed(toggleVideo2);

  fingers2.loop(); // Start playing the new video

  playing2 = true;

}

​

// Play the third video

function playVideo3() {

  if (!playing3) {

    fingers3.loop();

    playing3 = true;

  }

}

​

// Stop the third video

function stopVideo3() {

  if (playing3) {

    fingers3.pause();

    playing3 = false;

  }

}

​

// Toggle between the third videos

function toggleVideo3() {

  fingers3.remove(); // Remove the previous video element

  if (currentVideo3 === 1) {

    fingers3 = createVideo(['01_inntak_web_06.mov', '01_inntak_web_06.webm', '01_inntak_web_06.ogv']);

    currentVideo3 = 2;

  } else {

    fingers3 = createVideo(['01_inntak_web_05.mov', '01_inntak_web_05.webm', '01_inntak_web_05.ogv']);

    currentVideo3 = 1;

  }

  fingers3.size(vidWidth, vidWidth * 0.5625); // Set size to match canvas

  fingers3.position(fingersCol3X, fingersRow1Y);

  fingers3.hideControls();

  fingers3.mouseOver(playVideo3);

  fingers3.mouseOut(stopVideo3);

  fingers3.mousePressed(toggleVideo3);

  fingers3.loop(); // Start playing the new video

  playing3 = true;

}

// Play the fourth video

function playVideo4() {

  if (!playing4) {

    fingers4.loop();

    playing4 = true;

  }

}

​

// Stop the fourth video

function stopVideo4() {

  if (playing4) {

    fingers4.pause();

    playing4 = false;

  }

}

​

// Toggle between the third videos

function toggleVideo4() {

  fingers4.remove(); // Remove the previous video element

  if (currentVideo4 === 1) {

    fingers4 = createVideo(['01_inntak_web_08.mov', '01_inntak_web_08.webm', '01_inntak_web_08.ogv']);

    currentVideo4 = 2;

  } else {

    fingers4 = createVideo(['01_inntak_web_07.mov', '01_inntak_web_07.webm', '01_inntak_web_07.ogv']);

    currentVideo4 = 1;

  }

  fingers4.size(vidWidth, vidWidth * 0.5625); // Set size to match canvas

  fingers4.position(fingersCol1X, fingersRow2Y);

  fingers4.hideControls();

  fingers4.mouseOver(playVideo4);

  fingers4.mouseOut(stopVideo4);

  fingers4.mousePressed(toggleVideo4);

  fingers4.loop(); // Start playing the new video

  playing4 = true;

}

// Play the fourth video

function playVideo5() {

  if (!playing5) {

    fingers5.loop();

    playing5 = true;

  }

}

​

// Stop the fifth video

function stopVideo5() {

  if (playing5) {

    fingers5.pause();

    playing5 = false;

  }

}

​

// Toggle between the third videos

function toggleVideo5() {

  fingers5.remove(); // Remove the previous video element

  if (currentVideo5 === 1) {

    fingers5 = createVideo(['01_inntak_web_09.mov', '01_inntak_web_09.webm', '01_inntak_web_09.ogv']);

    currentVideo5 = 2;

  } else {

    fingers5 = createVideo(['01_inntak_web_10.mov', '01_inntak_web_10.webm', '01_inntak_web_10.ogv']);

    currentVideo5 = 1;

  }

  fingers5.size(vidWidth, vidWidth * 0.5625); // Set size to match canvas

  fingers5.position(fingersCol2X, fingersRow2Y);

  fingers5.hideControls();

  fingers5.mouseOver(playVideo5);

  fingers5.mouseOut(stopVideo5);

  fingers5.mousePressed(toggleVideo5);

  fingers5.loop(); // Start playing the new video

  playing5 = true;

}

// Play the 6 video

function playVideo6() {

  if (!playing6) {

    fingers6.loop();

    playing6 = true;

  }

}

​

// Stop the 6 video

function stopVideo6() {

  if (playing6) {

    fingers6.pause();

    playing6 = false;

  }

}

​

// Toggle between the 6 videos

function toggleVideo6() {

  fingers6.remove(); // Remove the previous video element

  if (currentVideo6 === 1) {

    fingers6 = createVideo(['01_inntak_web_12.mov', '01_inntak_web_12.webm', '01_inntak_web_12.ogv']);

    currentVideo6 = 2;

  } else {

    fingers6 = createVideo(['01_inntak_web_11.mov', '01_inntak_web_11.webm', '01_inntak_web_11.ogv']);

    currentVideo6 = 1;

  }

  fingers6.size(vidWidth, vidWidth * 0.5625); // Set size to match canvas

  fingers6.position(fingersCol3X, fingersRow2Y);

  fingers6.hideControls();

  fingers6.mouseOver(playVideo6);

  fingers6.mouseOut(stopVideo6);

  fingers6.mousePressed(toggleVideo6);

  fingers6.loop(); // Start playing the new video

  playing6 = true;

}

​

// Play the 7 video

function playVideo7() {

  if (!playing7) {

    fingers7.loop();

    playing7 = true;

  }

}

​

// Stop the 7 video

function stopVideo7() {

  if (playing7) {

    fingers7.pause();

    playing7 = false;

  }

}

​

// Toggle between the 7 videos

function toggleVideo7() {

  fingers7.remove(); // Remove the previous video element

  if (currentVideo7 === 1) {

    fingers7 = createVideo(['01_inntak_web_14.mov', '01_inntak_web_14.webm', '01_inntak_web_14.ogv']);

    currentVideo7 = 2;

  } else {

    fingers7 = createVideo(['01_inntak_web_13.mov', '01_inntak_web_13.webm', '01_inntak_web_13.ogv']);

    currentVideo7 = 1;

  }

  fingers7.size(vidWidth, vidWidth * 0.5625); // Set size to match canvas

  fingers7.position(fingersCol1X, fingersRow3Y);

  fingers7.hideControls();

  fingers7.mouseOver(playVideo7);

  fingers7.mouseOut(stopVideo7);

  fingers7.mousePressed(toggleVideo7);

  fingers7.loop(); // Start playing the new video

  playing7 = true;

}

​

// Play the 8 video

function playVideo8() {

  if (!playing8) {

    fingers8.loop();

    playing8 = true;

  }

}

​

// Stop the 8 video

function stopVideo8() {

  if (playing8) {

    fingers8.pause();

    playing8 = false;

  }

}

​

// Toggle between the 8 videos

function toggleVideo8() {

  fingers8.remove(); // Remove the previous video element

  if (currentVideo8 === 1) {

    fingers8 = createVideo(['01_inntak_web_16.mov', '01_inntak_web_16.webm', '01_inntak_web_16.ogv']);

    currentVideo8 = 2;

  } else {

    fingers8 = createVideo(['01_inntak_web_15.mov', '01_inntak_web_15.webm', '01_inntak_web_15.ogv']);

    currentVideo8 = 1;

  }

  fingers8.size(vidWidth, vidWidth * 0.5625); // Set size to match canvas

  fingers8.position(fingersCol2X, fingersRow3Y);

  fingers8.hideControls();

  fingers8.mouseOver(playVideo8);

  fingers8.mouseOut(stopVideo8);

  fingers8.mousePressed(toggleVideo8);

  fingers8.loop(); // Start playing the new video

  playing8 = true;

}

​

// Play the 9 video

function playVideo9() {

  if (!playing9) {

    fingers9.loop();

    playing9 = true;

  }

}

​

// Stop the 9 video

function stopVideo9() {

  if (playing9) {

    fingers9.pause();

    playing9 = false;

  }

}

​

// Toggle between the 9 videos

function toggleVideo9() {

  fingers9.remove(); // Remove the previous video element

  if (currentVideo9 === 1) {

    fingers9 = createVideo(['01_inntak_web_18.mov', '01_inntak_web_18.webm', '01_inntak_web_18.ogv']);

    currentVideo9 = 2;

  } else {

    fingers9 = createVideo(['01_inntak_web_17.mov', '01_inntak_web_17.webm', '01_inntak_web_17.ogv']);

    currentVideo9 = 1;

  }

  fingers9.size(vidWidth, vidWidth * 0.5625); // Set size to match canvas

  fingers9.position(fingersCol3X, fingersRow3Y);

  fingers9.hideControls();

  fingers9.mouseOver(playVideo9);

  fingers9.mouseOut(stopVideo9);

  fingers9.mousePressed(toggleVideo9);

  fingers9.loop(); // Start playing the new video

  playing9 = true;

}

​

function keyPressed() {

  if (keyCode === ENTER) {

    let fs = fullscreen();

    fullscreen(!fs);

  }

}

​

​