// https://kylemcdonald.github.io/cv-examples/

// https://github.com/kylemcdonald/AppropriatingNewTechnologies/wiki/Week-2

​

var tracker;

var w = 640,

  h = 480;

var nX = 20;

var nY = 20;

​

var eX = 40;

var eY = 40;

let cap;

let otherCap = false;

let tracker2 = false;

let pl5;

let otherPositions = [];

​

function setup() {

  createCanvas(800, 800);

  //creates the capture

  cap = createCapture(VIDEO);

  cap.hide();

  cap.size(400, 300);

  cap.position(0, 0);

​

  //tracks the face

  tracker = new clm.tracker();

  tracker.init();

  tracker.start(cap.elt);

​

  //this establishes our p5 library media

  // and then we create the gotStream function

  cap = createCapture(VIDEO, function (stream) {

    p5l = new p5LiveMedia(this, "CAPTURE", stream, "andriProject");

    p5l.on("stream", gotStream);

    p5l.on("data", gotData);

  });

  cap.muted = true;

}

​

function gotData(d){

  otherPositions = JSON.parse(d)

  console.log("got data");

}

​

function draw() {

  background(100);

  var positions = tracker.getCurrentPosition();

​

  if (positions.length > 0) {

    p5l.send(JSON.stringify({positions: positions}));

    noStroke();

​

    noseX = positions[62][0];

    noseY = positions[62][1];

    noseX = noseX - 50;

​

    eyeLX = positions[27][0];

    eyeLY = positions[27][1];

    eyeLH = positions[31][1] - positions[29][1];

​

    let crop = cap.get(noseX, 140, nY, nX);

    let cropTwo = cap.get(eyeLX, 120, nY, nX);

​

    image(crop, noseX, noseY, 100, 100);

    image(cropTwo, eyeLX + 100, eyeLY, 20, 20);

  }

  if (otherPositions.length > 0){

     noStroke();

​

    noseX = otherPositions.positions[62][0];

    noseY = otherPositions.positions[62][1];

    noseX = noseX - 50;

​

    eyeLX = otherPositions.positions[27][0];

    eyeLY = otherPositions.positions[27][1];

    eyeLH = otherPositions.positions[31][1] - otherPositions.positions[29][1];

​

    let cropThree = otherCap.get(noseX, 140, nY, nX);

    let cropFour = otherCap.get(eyeLX, 120, nY, nX);

​

    image(cropThree, noseX, noseY, 100, 100);

    image(cropFour, eyeLX + 100, eyeLY, 20, 20);

  }

}

​

// We got a new stream!

function gotStream(stream, id) {

  // This is just like a video/stream from createCapture(VIDEO)

  otherCap = stream;

​

}