​

let mode = 0;

​

let capture;

let tracker;

let positions;

let myFont;

​

​

function preload()

{

  myFont = loadFont('AmaticSC.ttf');

}

​

​

function setup() {

    createCanvas(400,400);

    capture = createCapture(VIDEO);

    capture.size(width, height);

    capture.hide();

​

    tracker = new clm.tracker(); 

    tracker.init();

    tracker.start(capture.elt); 

}

​

​

function draw() {

//switch between consent UI and the camera

   switch(mode){

    case 0: 

      scene0();

      break;

    case 1: 

      scene1();

      break;

      default:

  }

}

​

    function keyPressed(){

    if(key=='0'){

      mode = 0;

    }else if(key =='1'){

      mode = 1;

    }

    print(mode);

  }

//menu scene - user consent form

  function scene0(){

  clear();

  background(0);

  fill(255, 204, 0);

  textFont(myFont);

  textSize(40);

  textAlign(CENTER);

  text('Please Read', 200, 90);

  textSize(25);

  // textAlign(CENTER);

  fill(255);

  text('this page would like to access your web camera',200,140);

  fill(255, 204, 0);

  text('to apply filters and features',200,170);

  text('we will not store your personal data',200,200);

    text('nor use it otherwise',200,230);

  fill(255);

  text('click "1" to authorize and proceed',200,330);

    textSize(27);

    fill(255,0,0);

    text('click "0" get back anytime',180,370);

}

  function scene1(){

    clear();

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

    let positions = tracker.getCurrentPosition(); 

    noStroke();

  if (positions.length > 0) { 

    noStroke();

    // left eye   

    fill(255,255,255);

    quad(positions[23][0], positions[23][1], positions[63][0], positions[63][1], positions[64][0], positions[64][1], positions[25][0], positions[25][1]);

    quad(positions[23][0], positions[23][1], positions[25][0], positions[25][1], positions[65][0], positions[65][1],positions[66][0], positions[66][1]);

    //right eye

    fill(255,255,255);

    quad(positions[30][0], positions[30][1], positions[68][0], positions[68][1], positions[67][0], positions[67][1], positions[28][0], positions[28][1]);

    quad(positions[30][0], positions[30][1], positions[69][0], positions[69][1],positions[70][0], positions[70][1], positions[28][0], positions[28][1]);

    //eye balls

    fill(0);

    ellipse(positions[27][0], positions[27][1], 15, 15);

    ellipse(positions[32][0], positions[32][1], 15, 15)

    //nose

    fill(255, 187, 153);

    triangle(positions[36][0], positions[36][1], positions[33][0], positions[33][1], positions[38][0], positions[38][1]);

    //mouth

    fill(255, 128, 128);

    quad(positions[44][0], positions[44][1], positions[45][0], positions[45][1], positions[49][0], positions[49][1], positions[50][0], positions[50][1]);

    quad(positions[44][0], positions[44][1], positions[55][0], positions[55][1], positions[51][0], positions[51][1], positions[50][0], positions[50][1]);

  }

}