var video;

var vScale = 15;

let sampleIsPlaying = false;

// let slider;

​

let r;

let g;

let b;

let rotateValue = 1;

​

​

function setup() {

  createCanvas(640,480);

  // pixelDensity(1);

  moreinfo = createButton("More Info");

  moreinfo.position(400,400);

  moreinfo.size(100,25);

  moreinfo.style("background-color", "#ff4365");

  moreinfo.style("font-family", "Source Code Pro");

  moreinfo.style("color", "#fffff3");

  moreinfo.hide();

  next = createButton("Next")

  next.position(450,400);

  next.size(100,25);

  next.style("background-color", "#ff4365");

  next.style("font-family", "Source Code Pro");

  next.style("color", "#fffff3");

  next.hide();

  notnow = createButton("Not now")

  notnow.position(120,400);

  notnow.size(100,25);

  notnow.style("background-color", "#00D9C0");

  notnow.style("font-family", "Source Code Pro");

  notnow.style("color", "#fffff3");

  notnow.hide();

  agree = createButton("I agree")

  agree.position(450,400);

  agree.size(100,25);

  agree.style("background-color", "#ff4365");

  agree.style("font-family", "Source Code Pro");

  agree.style("color", "#fffff3");

  agree.hide();

  later = createButton("Later")

  later.position(120,400);

  later.size(100,25);

  later.style("background-color", "#00D9C0");

  later.style("font-family", "Source Code Pro");

  later.style("color", "#fffff3");

  later.hide();

  turnoffcamera = createButton("Come back later")

  turnoffcamera.position(400,400);

  turnoffcamera.size(150,25);

  turnoffcamera.style("background-color", "#00D9C0");

  turnoffcamera.style("font-family", "Source Code Pro");

  turnoffcamera.style("color", "#fffff3");

  turnoffcamera.hide();

//     button = createButton('MOVE/STOP');

//   //button.position(19,19);

//   button.mousePressed(change);

//   slider = createSlider(0,255,1);

}

​

// function change(){

//   if (sampleIsPlaying){

//     video.stop();

//     sampleIsPlaying = false;

//   } else{

//     video.loop();

//     sampleIsPlaying = true;

//   }

// }

​

function draw() {

  if (scene == 0) {

    moreinfo.show();

    moreinfo.mousePressed(nextscene);

    moreinfo.mousePressed(nextscene);

    moreinfo.mousePressed(nextscene);

  } else {

    moreinfo.hide();

  }

  if (scene == 1){

    next.show();

    notnow.show()

    notnow.mousePressed(back);

    next.mousePressed(nextscene);

    } else {

    next.hide();

    notnow.hide();

  }

   if (scene == 2){

    agree.show();

    later.show()

    agree.mousePressed(iagree);

    later.mousePressed(back);

    } else {

    agree.hide();

    later.hide();

  }

  if (scene == 3) {

    turnoffcamera.show();

    turnoffcamera.mousePressed(backtobg1);

  }else{

    turnoffcamera.hide();

  }

​

  switch (scene) {

      case 0: 

  background(0);

  fill(255, 255, 243);

  textFont('Source Code Pro'); 

  textStyle(BOLD);

  textSize(20);

  text("Hi Stranger!", 50,100);

  text("This is a pixels zone.",50,150)

      frameRate(15);

    display();

      function display() {

    var r = random(0, 160);

    var g = random(0, 85);

    var b = random(200, 255);

​

    noStroke(); 

    fill(r, g, b, 100);

    tri(200, 200, 3);

    tri(400, 500, 2);

    tri(610, 300, 1);

}

​

function tri(a, b, c) {

    translate(a, b);

    rotate(rotateValue + c);  

    triangle(200, 0, 30, 120, 50, 30);

    resetMatrix();

    rotateValue += PI / 200;

}

      break;

      case 1:

     background(0);

  fill(255, 255, 243);

  textStyle(BOLD);

  textSize(14);

  text("Everthing in this zone will appear in pixels.", 50,50);

  text("It will also affect you, believe or not.",50,75)

  text("Do you want to have a try? The only thing you need to do is to",50,100)

  text("click the “Next” button.",50,125)

      frameRate(15);

    display();

      function display() {

    var r = random(0, 60);

    var g = random(0, 185);

    var b = random(20, 55);

​

    noStroke(); 

    fill(r, g, b, 100);

    tri(200, 200, 3);

    tri(400, 500, 2);

    tri(610, 300, 1);

}

​

function tri(a, b, c) {

    translate(a, b);

    rotate(rotateValue + c);  

    triangle(200, 0, 30, 120, 50, 30);

    resetMatrix();

    rotateValue += PI / 200;

}

      break;

      case 2:

      background(0);

  fill(255, 255, 243);

  textStyle(BOLD);

  textSize(14);

  text("We would like to access your Webcam,please click ", 50,50);

  text("on the “I agree” button to confirm your authorization.",50,75)

      frameRate(15);

    display();

      function display() {

    var r = random(10, 110);

    var g = random(0, 155);

    var b = random(0, 255);

​

    noStroke(); 

    fill(r, g, b, 100);

    tri(200, 200, 3);

    tri(400, 500, 2);

    tri(610, 300, 1);

}

​

function tri(a, b, c) {

    translate(a, b);

    rotate(rotateValue + c);  

    triangle(200, 0, 30, 120, 50, 30);

    resetMatrix();

    rotateValue += PI / 200;

}

      break;

//scene 3: camera scene

      case 3:

      opencamera();

      break;

  }

​

//functions to change scenes

  function nextscene(){

  scene+=1;

}

  function back() {

  scene-=1;

}

  function backtobg1(){

    scene = 0;

  }

​

  function iagree() {

    pixelDensity(1);

    video = createCapture(VIDEO);

  video.size(width/vScale, height/vScale);

  video.hide();

  scene = 3;

}

  //funtion to run the fliter/open my camera

  function opencamera(){

  scene = 3;

   // let val = slider.value();

  background(255, 67, 101);

  video.loadPixels();

  loadPixels();

  for(var y = 0; y < video.height; y++){

    for(var x = 0; x < video.width; x++){

      var index = (video.width-x+1+(y*video.width))*4;//mirro:w-x-1

      var r = video.pixels[index+0];

      var g = video.pixels[index+1];

      var b = video.pixels[index+2];

      var bright = (r+g+b)/3;

      var w = map(bright,0,255,0,vScale);

      noStroke();

      fill(bright);

   rect(x*vScale,y*vScale,w,w);    //rect(x*vScale,y*vScale,vScale,vScale);

      // pixels[index+0] = bright;//x;

      // pixels[index+1] = bright; //random(255);

      // pixels[index+2] = bright; //y;

      // pixels[index+3] = 255;

    }

  }

  }

​

​

 //console.log('X=',mouseX);

 //console.log('Y=',mouseY);

  // updatePixels();

}