let timer = 10

let cam;

​

let vid = [];

let vid2 = [];

let pick;

let pick2;

​

var buttonleft;

var buttonright;

​

​

let movieList = [

  "vid1.mp4",

  "vid2.mp4",

  "vid3.mp4"

];

​

function setup() {

  createCanvas(800, 600);

  rectMode(CENTER);

  imageMode(CENTER);

  cam = createCapture(VIDEO);

  cam.size(200, 160);

  cam.hide();

​

  for (let i = 0; i < movieList.length; i++) {

    let v = createVideo(movieList[i]);

    v.size(200, 300);

    v.position(50, 100);

    //v.loop();

    v.hide();

    vid.push(v);

  }

  for (let i = 0; i < movieList.length; i++) {

    let v2 = createVideo(movieList[i]);

    v2.size(200, 300);

    v2.position(500, 100);

    //v2.loop();

    v2.hide();

    vid2.push(v2);

  }

  pick = int(random(vid.length));

  pick2 = int(random(vid2.length));

  // vid[pick].show();

  vid[pick].loop();

  vid[pick].show();

  print(pick2);

  vid2[pick2].loop();

  vid2[pick2].show();

}

​

function draw() {

  alert(255, 0, 0);

  cams(50);

​

  if (redAlert == false) {

    background(240);

    fill(0, 225, 0);

    noStroke();

    rect(750, 50, 50, 50);

  }

  if (redAlert == true) {

  frameCount % 60 == 0;

  background(60);

  askPanel(60);

  buttons();

  textFont('Helvetica');

  textSize(20);

  fill(225, 0, 0, 90);

  text(timer, width / 2, 100);

}

​

if (frameCount % 60 == 0 && timer > 0) {

  timer--;

  redAlert = true;

  fill(225, 0, 0);

  noStroke();

  rect(750, 50, 50, 50);

}

​

​

if (timer == 0) {

  textFont('Helvetica');

  textSize(18);

  fill(225, 0, 0, 90);

  text("Try Again", width / 2, height * 0.7);

  background(20);

}

​

​

  image(cam, 400, 250, 200, 160);

}

​

function alert(r, g, b) {

  fill(r, g, b);

  noStroke();

  rect(750, 50, 50, 50);

}

​

​

function buttons() {

  buttonleft = createButton("CHOICE A");

  buttonleft.position(200, 520);

  buttonleft.mousePressed(clickFunctionLeft);

  buttonright = createButton("CHOICE B");

  buttonright.position(500, 520);

  buttonright.mousePressed(clickFunctionRight);

}

​

function clickFunctionLeft() {

  vid[pick].hide();

  vid[pick].pause();

  pick = int(random(vid.length));

  vid[pick].loop();

  vid[pick].show();

}

​

function clickFunctionRight() {

  vid2[pick2].hide();

  vid2[pick2].pause();

  pick2 = int(random(vid2.length));

  vid2[pick2].loop();

  vid2[pick2].show();

}

​

function cams() {

  // fill(70);

  rect(150, 250, 200, 160);

  rect(400, 250, 200, 160);

  rect(650, 250, 200, 160);

}

​

function askPanel(opacity) {

  fill(20);

  rect(400, 540, 800, 260);

  textFont('Helvetica');

  textSize(18);

  fill(225, 0, 0, 90);

  text("New Notification!", 315, 450);

  text("Choose which of the two videos that are on currently to replace.", 150, 470);

  // text("Decide amongst yourselves who should be replaced.", 200, 490);

}

​

​

​

////found the timer and framecount technique on this editor "https://editor.p5js.org/denaplesk2/sketches/S1OAhXA-M"

//used Ben's code to insert cam 

//asked Ben for help on starting up my array

//asked Ben for help on video loops & set up 

//read this article/blog for better understanding https://creative-coding.decontextualize.com/arrays-and-objects/