let buttonAll;

let buttonOut;

let buttonIn;

let vid;

let button;

let deo;

let boton;

let vide;

let buttone;

let deos;

let botons;

let vid1;

let button1;

let deo1;

let boton1;

let vide1;

let buttone1;

let deos1;

let botons1;

let botons2;

let deos2;

let aspectRatio = 1920 / 1080; //======//let aspectRatio = 1.7;======//

let videoWidth;

let videoHeight;

​

​

//===================|Responsive|======================\\

​

function videoSize() {

​

  videoWidth = windowWidth / 4;

  videoHeight = (windowHeight / 4) - 30;

  if (videoWidth <= videoHeight * aspectRatio) {

    videoHeight = (videoWidth / aspectRatio);

  } else {

    videoWidth = videoHeight * aspectRatio;

  }

​

}

​

//===============|Pesadilla del all|======================\\

​

function playAll() {

  if (playing) {

    //cosa1

    vid.pause();

    deo.pause();

    deo2.pause();

    vid2.pause();

    vide.pause();

    deos.pause();

    deos2.pause();

    vide2.pause();

    vide1.pause();

    deo1.pause();

    deos3.pause();

    vide3.pause();

    vid1.pause();

    deos1.pause();

    deo3.pause();

    vid3.pause();

    //cosa2

    buttonAll.html('PLAY ALL');

    button.html('PLAY');

    boton.html('PLAY');

    boton2.html('PLAY');

    button2.html('PLAY');

    buttone.html('PLAY');

    botons.html('PLAY');

    botons2.html('PLAY');

    buttone2.html('PLAY');

    buttone1.html('PLAY');

    boton1.html('PLAY');

    botons3.html('PLAY');

    buttone3.html('PLAY');

    button1.html('PLAY');

    botons1.html('PLAY');

    boton3.html('PLAY');

    button3.html('PLAY');

  } else {

    //cosa3

    vid.loop();

    deo.loop();

    deo2.loop();

    vid2.loop();

    vide.loop();

    deos.loop();

    deos2.loop();

    vide2.loop();

    vide1.loop();

    deo1.loop();

    deos3.loop();

    vide3.loop();

    vid1.loop();

    deos1.loop();

    deo3.loop();

    vid3.loop();

    //cosa4

    buttonAll.html('PAUSE');

    button.html('PAUSE');

    boton.html('PAUSE');

    boton2.html('PAUSE');

    boton2.html('PAUSE');

    button2.html('PAUSE');

    buttone.html('PAUSE');

    botons.html('PAUSE');

    botons2.html('PAUSE');

    buttone2.html('PAUSE');

    buttone1.html('PAUSE');

    boton1.html('PAUSE');

    botons3.html('PAUSE');

    buttone3.html('PAUSE');

    button1.html('PAUSE');

    botons1.html('PAUSE');

    boton3.html('PAUSE');

    button3.html('PAUSE');

​

  }

  playing = !playing;

}

​

//================|Pesadilla del Play Out|======================\\

​

function playOut() {

  if (playing) {

    //cosa1

    vid.pause();

    deo.pause();

    deo2.pause();

    vid2.pause();

    vide.pause();

    //deos.pause();

    //deos2.pause();

    vide2.pause();

    vide1.pause();

    // deo1.pause();

    // deos3.pause();

    vide3.pause();

    vid1.pause();

    deos1.pause();

    deo3.pause();

    vid3.pause();

    //cosa2

    buttonOut.html('PLAY OUT');

    button.html('PLAY');

    boton.html('PLAY');

    boton2.html('PLAY');

    button2.html('PLAY');

    buttone.html('PLAY');

    //botons.html('PLAY');

    //botons2.html('PLAY');

    buttone2.html('PLAY');

    buttone1.html('PLAY');

    //boton1.html('PLAY');

    //botons3.html('PLAY');

    buttone3.html('PLAY');

    button1.html('PLAY');

    botons1.html('PLAY');

    boton3.html('PLAY');

    button3.html('PLAY');

  } else {

    //cosa3

    vid.loop();

    deo.loop();

    deo2.loop();

    vid2.loop();

    vide.loop();

    //deos.loop();

    //deos2.loop();

    vide2.loop();

    vide1.loop();

    //deo1.loop();

    //deos3.loop();

    vide3.loop();

    vid1.loop();

    deos1.loop();

    deo3.loop();

    vid3.loop();

    //cosa4

    buttonOut.html('PAUSE OUT');

    button.html('PAUSE');

    boton.html('PAUSE');

    boton2.html('PAUSE');

    boton2.html('PAUSE');

    button2.html('PAUSE');

    //buttone.html('PAUSE');

    //botons.html('PAUSE');

    botons2.html('PAUSE');

    buttone2.html('PAUSE');

    buttone1.html('PAUSE');

    //boton1.html('PAUSE');

    //botons3.html('PAUSE');

    buttone3.html('PAUSE');

    button1.html('PAUSE');

    botons1.html('PAUSE');

    boton3.html('PAUSE');

    button3.html('PAUSE');

​

  }

  playing = !playing;

}

//===================|Play In|=======================\\

​

function playIn() {

  if (playing) {

    //cosa1

    deos.pause();

    deos2.pause();

    deo1.pause();

    deos3.pause();

    //cosa2

    buttonIn.html('PLAY IN');

    botons.html('PLAY');

    botons2.html('PLAY');

    boton1.html('PLAY');

    botons3.html('PLAY');

  } else {

    //cosa3

    deos.loop();

    deos2.loop();

    deo1.loop();

    deos3.loop();

    //cosa4

    buttonIn.html('PAUSE IN');

    buttone.html('PAUSE');

    botons.html('PAUSE');

    boton1.html('PAUSE');

    botons3.html('PAUSE');

  }

  playing = !playing;

}

​

​

//=============|Estilo todos los botones|================\\

​

function estilo(b) {

  b.style("border-radius", "50px");

  b.style('background-color', "#33333380");

  b.style('font-size', '12px');

  b.style('padding-left', '3px');

  b.style('padding-right', '3px');

  b.style('padding-bottom', '3px');

  b.style('border', '1px solid black');

​

}

​

//||||||||||||||||||||||||||||||||||SetUp|||||||||||||||||||||||||||||||||||||||\\

​

function setup() {

​

  videoSize();

  //createCanvas(4600, 1680);

  var canvas = createCanvas(videoWidth * 2, windowHeight);

  canvas.position(0, 0);

  canvas.style("z-index", -1);

​

  //=========|All|=========\\

  buttonAll = createButton('PLAY ALL');

  buttonAll.mousePressed(playAll);

  buttonAll.style("border-radius", "100px");

  buttonAll.style('background-color', "#00b3b3");

  buttonAll.style('font-size', '40px');

  buttonAll.style('padding-left', '10px');

  buttonAll.style('padding-right', '10px');

  buttonAll.style('min-width', '205px'); //compensacion tamaño (play all/pause)

​

  //=========|Out|=========\\

  buttonOut = createButton('PLAY OUT');

  buttonOut.mousePressed(playOut);

  buttonOut.style("border-radius", "100px");

  buttonOut.style('background-color', "#248f2480");

  buttonOut.style('font-size', '30px');

  buttonOut.style('padding-left', '10px');

  buttonOut.style('padding-right', '10px');

  buttonOut.style('min-width', '205px'); //compensacion tamaño (play all/pause)

  //=========|In|=========\\

  buttonIn = createButton('PLAY IN');

  buttonIn.mousePressed(playIn);

  buttonIn.style("border-radius", "100px");

  buttonIn.style('background-color', "#248f2480");

  buttonIn.style('font-size', '30px');

  buttonIn.style('padding-left', '10px');

  buttonIn.style('padding-right', '10px');

  buttonIn.style('min-width', '205px'); //compensacion tamaño (play all/pause)

​

​

  //video 1

  vid = createVideo('dai1.mp4');

  vid.size(videoWidth, videoHeight);

  vid.position(0, 0);

  button = createButton('play');

  button.mousePressed(dai1);

  button.position(10, 10);

  estilo(button);

​

  //video 2

  deo = createVideo('dai2.mp4');

  deo.size(videoWidth, videoHeight);

  deo.position(videoWidth, 0);

  boton = createButton('play');

  boton.mousePressed(dai2);

  boton.position(videoWidth + 10, 10);

  estilo(boton);

​

  //video 3

  deo2 = createVideo('pia2.mp4');

  deo2.size(videoWidth, videoHeight);

  deo2.position(videoWidth * 2, 0);

  boton2 = createButton('play');

  boton2.mousePressed(pia2);

  boton2.position(videoWidth * 2 + 10, 10);

  estilo(boton2);

​

  //video 4

  vid2 = createVideo('pia1.mp4');

  vid2.size(videoWidth, videoHeight);

  vid2.position(3 * videoWidth, 0);

  button2 = createButton('play');

  button2.mousePressed(pia1);

  button2.position(videoWidth * 3 + 10, 10);

  estilo(button2);

​

  //video 5

  vide = createVideo('dai3.mp4');

  vide.size(videoWidth, videoHeight);

  vide.position(0, videoHeight);

  buttone = createButton('play');

  buttone.mousePressed(dai3);

  buttone.position(videoWidth * 0 + 10, videoHeight + 10);

  estilo(buttone);

​

  //video 6

  deos = createVideo('dai4.mp4');

  deos.size(videoWidth, videoHeight);

  deos.position(videoWidth, videoHeight);

  botons = createButton('play');

  botons.mousePressed(dai4);

  botons.position(videoWidth * 1 + 10, videoHeight + 10);

  estilo(botons);

​

​

  //video 7

  deos2 = createVideo('pia4.mp4');

  deos2.size(videoWidth, videoHeight);

  deos2.position(videoWidth * 2, videoHeight);

  botons2 = createButton('play');

  botons2.mousePressed(pia4);

  botons2.position(videoWidth * 2 + 10, videoHeight + 10);

  estilo(botons2);

​

  //video 8

  vide2 = createVideo('pia3.mp4');

  vide2.size(videoWidth, videoHeight);

  vide2.position(videoWidth * 3, videoHeight);

  buttone2 = createButton('play');

  buttone2.mousePressed(pia3);

  buttone2.position(videoWidth * 3 + 10, videoHeight + 10);

  estilo(buttone2);

​

  //video 9

  vide1 = createVideo('mar3.mp4');

  vide1.size(videoWidth, videoHeight);

  vide1.position(videoWidth * 0, videoHeight * 2);

  buttone1 = createButton('play');

  buttone1.mousePressed(mar3);

  buttone1.position(videoWidth * 0 + 10, videoHeight * 2 + 10);

  estilo(buttone1);

​

  //video 10

  deo1 = createVideo('mar4.mp4');

  deo1.size(videoWidth, videoHeight);

  deo1.position(videoWidth * 1, videoHeight * 2);

  boton1 = createButton('play');

  boton1.mousePressed(mar4);

  boton1.position(videoWidth * 1 + 10, videoHeight * 2 + 10);

  estilo(boton1);

​

​

  //video 11

  deos3 = createVideo('nat4.mp4');

  deos3.size(videoWidth, videoHeight);

  deos3.position(videoWidth * 2, videoHeight * 2);

  botons3 = createButton('play');

  botons3.mousePressed(nat4);

  botons3.position(videoWidth * 2 + 10, videoHeight * 2 + 10);

  estilo(botons3);

​

  //video 12

  vide3 = createVideo('nat3.mp4');

  vide3.size(videoWidth, videoHeight);

  vide3.position(videoWidth * 3, videoHeight * 2);

  buttone3 = createButton('play');

  buttone3.mousePressed(nat3);

  buttone3.position(videoWidth * 3 + 10, videoHeight * 2 + 10);

  estilo(buttone3);

​

  //video 13

  vid1 = createVideo('mar1.mp4');

  vid1.size(videoWidth, videoHeight);

  vid1.position(videoWidth * 0, videoHeight * 3);

  button1 = createButton('play');

  button1.mousePressed(mar1);

  button1.position(videoWidth * 0 + 10, videoHeight * 3 + 10);

  estilo(button1);

​

  //video 14

  deos1 = createVideo('mar2.mp4');

  deos1.size(videoWidth, videoHeight);

  deos1.position(videoWidth * 1, videoHeight * 3);

  botons1 = createButton('play');

  botons1.mousePressed(mar2);

  botons1.position(videoWidth * 1 + 10, videoHeight * 3 + 10);

  estilo(botons1);

​

  //video 15

  deo3 = createVideo('nat2.mp4');

  deo3.size(videoWidth, videoHeight);

  deo3.position(videoWidth * 2, videoHeight * 3);

  boton3 = createButton('play');

  boton3.mousePressed(nat2);

  boton3.position(videoWidth * 2 + 10, videoHeight * 3 + 10);

  estilo(boton3);

​

  //video 16

  vid3 = createVideo('nat1.mp4');

  vid3.size(videoWidth, videoHeight);

  vid3.position(videoWidth * 3, videoHeight * 3);

  button3 = createButton('play');

  button3.mousePressed(nat1);

  button3.position(videoWidth * 3 + 10, videoHeight * 3 + 10);

  estilo(button3);

}

​

//||||||||||||||||||||||||||||||||||Draw|||||||||||||||||||||||||||||||||||||||\\

​

function draw() {

  videoSize();

  //background (0);

  // image(vid, 42, 42);

  // image(deo, 1300, 42);

  // image(vide, 42, 800);

  //image(deos, 1300, 800);

  // image(vid1, 42, 820);

  // image(deo1, 1300, 820);

  // image(vide1, 42, 1620);

  //image(d

​

  //============================|All|============================\\

  buttonAll.position(videoWidth * 2 - 100, videoHeight * 4 + 30);

​

  //============================|Out|============================\\

  buttonOut.position(videoWidth * 3 - 100, videoHeight * 4 + 38);

  //============================|In|=============================\\

  buttonIn.position(videoWidth * 1 - 100, videoHeight * 4+ 38);

​

  //video 1

  vid.size(videoWidth, videoHeight);

  vid.position(0, 0);

  button.position(10, 10);

​

  //video 2

  deo.size(videoWidth, videoHeight);

  deo.position(videoWidth, 0);

  boton.position(videoWidth + 10, 10);

​

  //video 3

  deo2.size(videoWidth, videoHeight);

  deo2.position(videoWidth * 2, 0);

  boton2.position(videoWidth * 2 + 10, 10);

​

  //video 4

  vid2.size(videoWidth, videoHeight);

  vid2.position(3 * videoWidth, 0);

  button2.position(videoWidth * 3 + 10, 10);

​

  //video 5

  vide.size(videoWidth, videoHeight);

  vide.position(0, videoHeight);

  buttone.position(videoWidth * 0 + 10, videoHeight + 10);

​

  //video 6

  deos.size(videoWidth, videoHeight);

  deos.position(videoWidth, videoHeight);

  botons.position(videoWidth * 1 + 10, videoHeight + 10);

​

  //video 7

  deos2.size(videoWidth, videoHeight);

  deos2.position(videoWidth * 2, videoHeight);

  botons2.position(videoWidth * 2 + 10, videoHeight + 10);

​

​

  //video 8

  vide2.size(videoWidth, videoHeight);

  vide2.position(videoWidth * 3, videoHeight);

  buttone2.position(videoWidth * 3 + 10, videoHeight + 10);

​

  //video 9

  vide1.size(videoWidth, videoHeight);

  vide1.position(videoWidth * 0, videoHeight * 2);

  buttone1.position(videoWidth * 0 + 10, videoHeight * 2 + 10);

​

  //video 10

  deo1.size(videoWidth, videoHeight);

  deo1.position(videoWidth * 1, videoHeight * 2);

  boton1.position(videoWidth * 1 + 10, videoHeight * 2 + 10);

​

​

  //video 11

  deos3.size(videoWidth, videoHeight);

  deos3.position(videoWidth * 2, videoHeight * 2);

  botons3.position(videoWidth * 2 + 10, videoHeight * 2 + 10);

​

  //video 12

  vide3.size(videoWidth, videoHeight);

  vide3.position(videoWidth * 3, videoHeight * 2);

  buttone3.position(videoWidth * 3 + 10, videoHeight * 2 + 10);

​

  //video 13

  vid1.size(videoWidth, videoHeight);

  vid1.position(videoWidth * 0, videoHeight * 3);

  button1.position(videoWidth * 0 + 10, videoHeight * 3 + 10);

​

  //video 14

  deos1.size(videoWidth, videoHeight);

  deos1.position(videoWidth * 1, videoHeight * 3);

  botons1.position(videoWidth * 1 + 10, videoHeight * 3 + 10);

​

​

  //video 15

  deo3.size(videoWidth, videoHeight);

  deo3.position(videoWidth * 2, videoHeight * 3);

  boton3.position(videoWidth * 2 + 10, videoHeight * 3 + 10);

​

​

  //video 16

  vid3.size(videoWidth, videoHeight);

  vid3.position(videoWidth * 3, videoHeight * 3);

  button3.position(videoWidth * 3 + 10, videoHeight * 3 + 10);

​

}

​

//===============|1|==============\\

​

function dai1() {

  if (playing) {

    vid.pause();

    button.html('play');

  } else {

    vid.loop();

    button.html('pause');

  }

  playing = !playing;

}

​

//===============|2|==============\\

​

function dai2() {

  if (playing) {

    deo.pause();

    boton.html('play');

  } else {

    deo.loop();

    boton.html('pause');

  }

  playing = !playing;

}

​

//===============|3|==============\\

​

function pia2() {

  if (playing) {

    deo2.pause();

    boton2.html('play');

  } else {

    deo2.loop();

    boton2.html('pause');

  }

  playing = !playing;

}

​

//===============|4|==============\\

​

function pia1() {

  if (playing) {

    vid2.pause();

    button2.html('play');

  } else {

    vid2.loop();

    button2.html('pause');

  }

  playing = !playing;

}

​

//===============|5|==============\\

​

function dai3() {

  if (playing) {

    vide.pause();

    buttone.html('play');

  } else {

    vide.loop();

    buttone.html('pause');

  }

  playing = !playing;

}

​

//===============|6|==============\\

​

function dai4() {

  if (playing) {

    deos.pause();

    botons.html('play');

  } else {

    deos.loop();

    botons.html('pause');

  }

  playing = !playing;

}

​

//===============|7|==============\\

​

function pia4() {

  if (playing) {

    deos2.pause();

    botons2.html('play');

  } else {

    deos2.loop();

    botons2.html('pause');

  }

  playing = !playing;

}

​

//===============|8|==============\\

​

function pia3() {

  if (playing) {

    vide2.pause();

    buttone2.html('play');

  } else {

    vide2.loop();

    buttone2.html('pause');

  }

  playing = !playing;

}

​

//===============|9|==============\\

​

function mar3() {

  if (playing) {

    vide1.pause();

    buttone1.html('play');

  } else {

    vide1.loop();

    buttone1.html('pause');

  }

  playing = !playing;

}

​

//===============|10|==============\\

​

function mar4() {

  if (playing) {

    deo1.pause();

    boton1.html('play');

  } else {

    deo1.loop();

    boton1.html('pause');

  }

  playing = !playing;

}

​

//===============|11|==============\\

​

function nat4() {

  if (playing) {

    deos3.pause();

    botons3.html('play');

  } else {

    deos3.loop();

    botons3.html('pause');

  }

  playing = !playing;

}

​

//===============|12|==============\\

​

function nat3() {

  if (playing) {

    vide3.pause();

    buttone3.html('play');

  } else {

    vide3.loop();

    buttone3.html('pause');

  }

  playing = !playing;

}

​

//===============|13|==============\\

​

function mar1() {

  if (playing) {

    vid1.pause();

    button1.html('play');

  } else {

    vid1.loop();

    button1.html('pause');

  }

  playing = !playing;

}

//===============|14|==============\\

​

function mar2() {

  if (playing) {

    deos1.pause();

    botons1.html('play');

  } else {

    deos1.loop();

    botons1.html('pause');

  }

  playing = !playing;

}

​

//===============|15|==============\\

​

​

function nat2() {

  if (playing) {

    deo3.pause();

    boton3.html('play');

  } else {

    deo3.loop();

    boton3.html('pause');

  }

  playing = !playing;

}

​

//===============|16|==============\\

​

function nat1() {

  if (playing) {

    vid3.pause();

    button3.html('play');

  } else {

    vid3.loop();

    button3.html('pause');

  }

​

  playing = !playing;

}