let capture;

let tracker;

let camOn = false; //is camera on?

//arrays

let positions;

let colorArr = [];

//pixel unit

let pix = 10;

​

let enterButton;

let exitButton;

let frontPageButton;

let sceneNum = 0;

​

function preload() {

  fontA = loadFont('PressStart2P-Regular.ttf');

}

​

function setup() {

  createCanvas(600, 600); 

  textFont(fontA);

​

  for(i=0; i<71; i++){ // color array for each position

    let r = random(220), 

        g = random(220),

        b = random(220),

        c = color(r,g,b);

    colorArr.push(c)    

  }

  enterButton = createButton('ENTER');

  enterButton.position(20, 540);

  enterButton.mousePressed(switchScene);

  enterButton.hide();

  exitButton = createButton('EXIT');

  exitButton.position(20, 540);

  exitButton.mousePressed(switchScene);

  exitButton.hide();

  frontPageButton = createButton('STARTAGAIN');

  frontPageButton.position(20, 540);

  frontPageButton.mousePressed(scene0);

  frontPageButton.hide();

}

​

​

function draw() {

  background(220);

​

    switch (sceneNum) {

​

    case 0:

      welcomePage();

      enterButton.show();

      frontPageButton.hide();

    break;

    case 1:

      enterButton.hide();

      exitButton.show();

      digitalCarnival();

    break; 

    case 2:

      exitButton.hide();

      frontPageButton.show();  

      exitPage();

    break; 

    }

  console.log(camOn);

}

​

​

​

//************************************functions

function switchScene(){

  sceneNum++; //0-1-2

  cameraState(); //off-on-off

}

​

function scene0(){

  sceneNum=0;

}

​

function cameraState() { //check the camera, turn on/off

  camOn = !camOn;

  if (camOn) {

  capture = createCapture(VIDEO);

  capture.elt.setAttribute('playsinline', ''); // add this for iphone compatibility

  capture.size(width, height);

  capture.hide();

  tracker = new clm.tracker();// create a new clm tracker object

  tracker.init(); // initialize the object

  tracker.start(capture.elt); // start tracking the video element

  } else {

    // remove the camera object if camOn is false

    // https://p5js.org/reference/#/p5.Graphics/remove

    capture.remove();

  }

}

​

​

​

function welcomePage(){

  push();

  textWrap(WORD);

  textAlign(LEFT);

  textSize(18);

  fill(120);

  text('Welcome to the Masquerade! Here we share our faces, which means we need access to your CAMERA! But don’t worry, we all put our masks on!', 20, 40, 600);

  text('Use your mouse to click the canvas to change the color! Click the EXIT if you want yo leave!', 20, 180, 600);

  text('Here is your invitation letter. Enjoy!', 20, 298, 600);

  textSize(12);

  fill(150);

  text('By clicking the button, you are consenting to this program to access the camera.', 20, 500, 600);

  pop();

}

​

​

function exitPage(){

  push();

  textAlign(CENTER);

  textSize(18);

  fill(120);

  text('Adeus, Meu Amigo!', width/2, height/2);

  pop();

}

​

function digitalCarnival(){

  noStroke();

  //image(capture, 0, 0, width, height);

  push();

  positions = tracker.getCurrentPosition();

​

  if(positions.length > 0){ //if successful capture   

    //console.log(positions);

    //voronoi classification

    for(i=0; i<width; i+=pix){

      for(I=0; I<height; I+=pix){

        lowest = 600;

        for(z=0; z<positions.length; z++){

          if(dist(i, I, positions[z][0], positions[z][1]) < lowest){

            lowest = dist(i, I, positions[z][0], positions[z][1]);

            index = z;    

          }

        }

        fill(colorArr[index]);

        square(i, I, pix); //draw voronoi

      }

    }

    pop();

    //draw position

    push();

    fill(255);

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

      square(positions[i][0],positions[i][1],pix*1.5);

    }

    pop();   

  }else{//if successful capture

  textAlign(CENTER);

  fill(120);

  textSize(18);

  text('Unable to Capture Face :(', width/2, height/2);

  } 

​

}

​

function mousePressed(){ //click to change color

  for(i=0; i<71; i++){ 

    colorArr.pop();    

  }

  for(i=0; i<71; i++){ 

    let r = random(220), 

        g = random(220),

        b = random(220),

        c = color(r,g,b);

    colorArr.push(c)    

  }

}

​

​