let videoStarted = false;

​

function setup() {  

  canvas = createCanvas(windowWidth, windowHeight);

  //canvas.position(windowWidth/4, windowHeight/4);

  noStroke();

  background(255, 213, 135);

  button = createButton('start video');

  button.size(100, 50);

  button.center();

  button.style('background-color', color(0, 143, 51));

  button.style('color', color(255));

  button.style('border-style', "none");

  button.style('border-radius', "5px");

  button.style('font-size', "15px");

  button.mousePressed(startVideo);

}

​

function startVideo(){

  videoStarted = true;

  button.remove();

  videoInput = createCapture(VIDEO);

  videoInput.size(400, 300);

  videoInput.position(0, 0);

  //videoInput.position(windowWidth/4, windowHeight/4);

  videoInput.id("v");

  var mv = document.getElementById("v");

  mv.muted = true;

  videoInput.hide();

  ctracker = new clm.tracker();

  ctracker.init(pModel);

  ctracker.start(videoInput.elt);

​

  canvas.style("z-index: ", 100);

}

​

function draw() {

  if (videoStarted == true){

    clear();

    background(255, 213, 135);

​

    getPositions();

    drawElements();

  }

}

​

function drawElements() {

​

  push();

  //scale(2, 2);

  //translate(width / 2, height / 2);

​

  fill(0, 255, 255);

  if (positions.length > 0) {

    var eye1pos = createVector(positions[27][0], positions[27][1]);

    var eye2pos = createVector(positions[32][0], positions[32][1]);

    var nosepos = createVector(positions[41][0], positions[41][1]);

    var mouthpos = createVector(positions[57][0], positions[57][1]);

​

    // face outline

    drawFaceOutline();

    // hair

    fill(255, 0, 0);

    bezier(

      eye1pos.x - (eye2pos.x - eye1pos.x),

      eye1pos.y - (eye2pos.x - eye1pos.x) / 2,

      eye1pos.x - (eye2pos.x - eye1pos.x),

      eye2pos.y - (eye2pos.x - eye1pos.x) * 2,

      eye2pos.x + (eye2pos.x - eye1pos.x),

      eye2pos.y - (eye2pos.x - eye1pos.x) * 2,

      eye2pos.x + (eye2pos.x - eye1pos.x),

      eye2pos.y - (eye2pos.x - eye1pos.x) / 2

    );

​

    // eyes

    fill(0, 255, 0);

    ellipse(eye1pos.x, eye1pos.y, 15, 20);

    ellipse(eye2pos.x, eye2pos.y, 15, 20);

    fill(0);

    ellipse(eye1pos.x, eye1pos.y, 5, 5);

    ellipse(eye2pos.x, eye2pos.y, 5, 5);

​

    // nose

    fill(0, 0, 255);

    triangle(

      nosepos.x,

      nosepos.y,

      nosepos.x - (nosepos.x - eye1pos.x) / 2,

      nosepos.y + (nosepos.x - eye1pos.x),

      nosepos.x + (nosepos.x - eye1pos.x) / 2,

      nosepos.y + (nosepos.x - eye1pos.x)

    );

​

    // mouth

    fill(255, 255, 0);

    ellipse(mouthpos.x, mouthpos.y, 20, 10);

  }

  pop();

}

​

function drawFaceOutline() {

  stroke(255, 0, 0);

​

  push();

  var p1 = createVector(positions[7][0], positions[7][1]);

  var p2 = createVector(positions[33][0], positions[33][1]);

  translate(positions[37][0], positions[37][1]);

​

  var angleRad = Math.atan2(p2.y - p1.y, p2.x - p1.x);

  rotate(angleRad + PI / 2);

​

  var mSize = p1.dist(p2);

  ellipse(0, -10, mSize * 1.3, mSize * 1.5);

  pop();

}

​

​