var scene = 0;

var capture; // this is the video camera

var capimg;

var theblur;

var a = 0.05; // copy ratio

var b = 1.0 - a; // blur ratio

var tracker;

var pos;

let r = [20, 80, 100, 160];

let allow = false;

​

​

function setup() {

  createCanvas(550, 420); // correct portions with my webcam

  pixelDensity(1);

  //if (allow) {

    capture = createCapture({

      audio: false,

      video: {

        width: width,

        height: height

      }

    }, function() {

    console.log("Please start with head center frame"); 

    });

    capture.elt.setAttribute('playsinline', '');

    theblur = createImage(width, height);

    capture.size(width, height);

    capture.hide();

​

    tracker = new clm.tracker();

    tracker.init();

    tracker.start(capture.elt);

 // }

  yesBtn = new Button(200, height / 2, 100, 50, "YES", 255);

  noBtn = new Button(350, height / 2, 100, 50, "NO", 255);

  exitBtn = new Button(width/2, height-50, 100, 50, "EXIT", 255);

}

​

function draw() {

  //background(220);

  //loadPixels();

  textAlign(CENTER);

  if (!allow && scene == 0) { // START SCREEN

    textSize(20);

    background(255, 0, 0);

    fill(0);

    text("Click yes to use experimental camera.", width/2, 100);

    text(" Keep in mind you will need to allow access to your webcam.", width/2, 125);

    text("This camera uses facial tracking and position tracking.", width/2, 150);

    text("Warning: webcams are easily hackable and captured images", width/2, 350);

    text("could remian on the internet permanently", width/2, 375);

    yesBtn.render();

    if (

        mouseIsPressed &&

        mouseX > yesBtn.x-yesBtn.w/2 &&

        mouseX < yesBtn.x + yesBtn.w/2 &&

        mouseY > yesBtn.y-yesBtn.h/2 &&

        mouseY < yesBtn.y + yesBtn.h/2) {

        allow = true;

​

    }

    noBtn.render();

    if (

        mouseIsPressed &&

        mouseX > noBtn.x-noBtn.w/2 &&

        mouseX < noBtn.x + noBtn.w/2 &&

        mouseY > noBtn.y-noBtn.h/2 &&

        mouseY < noBtn.y + noBtn.h/2) {

        scene = 1;

​

    }

  } 

  if (scene === 1) {

    background(0);

    fill(255);

    text("We respect your privacy.", width/2, height/2);

  }

  if (allow) {

    exitBtn.render();

    if (

        mouseIsPressed &&

        mouseX > exitBtn.x-exitBtn.w/2 &&

        mouseX < exitBtn.x + exitBtn.w/2 &&

        mouseY > exitBtn.y-exitBtn.h/2 &&

        mouseY < exitBtn.y + exitBtn.h/2) {

        scene = 1;

        allow = false;

​

    }

    capimg = capture.get(); // copying the video

​

    /* source: https://idmnyu.github.io/p5.js-image/VidBlur/index.html */

    if (capimg.width > 0) {

      capimg.loadPixels();

      theblur.loadPixels();

​

      for (var i = 0; i < theblur.pixels.length; i += 4) { // iterate through red values

        theblur.pixels[i] = a * capimg.pixels[i] + b * theblur.pixels[i];

        theblur.pixels[i + 1] = a * capimg.pixels[i + 1] + b * theblur.pixels[i + 1];

        theblur.pixels[i + 2] = a * capimg.pixels[i + 2] + b * theblur.pixels[i + 2];

        theblur.pixels[i + 3] = capimg.pixels[i + 3];

      }

​

      theblur.updatePixels();

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

​

      /* source: https://editor.p5js.org/kylemcdonald/sketches/BJOcyD9hm */

      pos = tracker.getCurrentPosition();

​

      if (pos.length > 0) { // smile meter

          var mouthLeft = createVector(pos[44][0], pos[44][1]);

          var mouthRight = createVector(pos[50][0], pos[50][1]);

          var smile = mouthLeft.dist(mouthRight);

          // console.log(smile);   

​

          if (smile > 50 && smile < 62) filter(GRAY); // :/

​

​

      }

​

​

      stroke(0, 0, 255);

      strokeWeight(4);

      blendMode(HARD_LIGHT);

      for (var i = 0; i < pos.length-9; i++) {

​

        if (pos[0][0] > width/2) { // move right

          line(pos[0][0], pos[0][1], pos[0][0]-r[1], pos[0][1]);

          line(pos[0][0], pos[0][1], pos[0][0]-r[0], pos[0][1]-r[0]);

          line(pos[0][0], pos[0][1], pos[0][0]-r[0], pos[0][1]+r[0]);

        }

        else if (pos[14][0] < width/2) {  // move left

          line(pos[14][0], pos[14][1], pos[14][0]+r[1], pos[14][1]);

          line(pos[14][0], pos[14][1], pos[14][0]+r[0], pos[14][1]-r[0]);

          line(pos[14][0], pos[14][1], pos[14][0]+r[0], pos[14][1]+r[0]);

        }

        else if (pos[41][1] < height/2) { // move up

          line(pos[7][0], pos[7][1], pos[7][0], pos[7][1]+r[1]);

          line(pos[7][0], pos[7][1], pos[7][0]+r[0], pos[7][1]+r[0]);

          line(pos[7][0], pos[7][1], pos[7][0]-r[0], pos[7][1]+r[0]);

        }

        else if (pos[33][1] > height/2) { // move down

          line(pos[33][0], pos[33][1]-80, pos[33][0], pos[33][1]-r[3]);

          line(pos[33][0], pos[33][1]-80, pos[33][0]+r[0], pos[33][1]-r[2]);

          line(pos[33][0], pos[33][1]-80, pos[33][0]-r[0], pos[33][1]-r[2]);

        }  

      }

​

​

    }

  }

}

​

class Button {

​

  constructor(x, y, w, h, text) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.text = text;

  }

​

  render() {

    push();

    textSize(32);

    textAlign(CENTER);

    stroke(4);

    fill(255);

    rectMode(CENTER);

    rect(this.x, this.y, this.w, this.h);

    text(this.text, this.x, this.y+10);

    pop();

  }

​

​

}