let tracker; //variable to hold tracker object

​

function setup() {

  //load p5js functions

  createCanvas(680, 400);

  capture = createCapture(VIDEO);

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

  capture.size(width, height);

  capture.hide();

​

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

  tracker.init(); // initialize the object

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

  cg = createGraphics(width, height);

  cg.pixelDensity(1);

​

}

​

function draw() {

  background(255);

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

​

  cg.loadPixels();

  let positions = tracker.getCurrentPosition(); // updates the tracker with current positions, 

  // and saves them as an array

​

  //------- draws an ellipse on the face -------

  if (positions.length > 0) {

​

    let faceCenterX = positions[33][0];

    let faceCenterY = positions[33][1];

​

    let faceWidth = positions[14][0] - positions[0][0];

    let faceHeight = (positions[7][1] - positions[0][1]) * 2;

    if (positions.length > 0) {

      noStroke();

      //fill(255, 100);

     for (let y = 0; y < height; y++) {

    for (let x = 0; x < width; x++) {

      let index = (x + y * width) * 4;

​

      //change the darkness if you move beyond width = 20.  looking for a better way to do this but want the canvas to remain natural until the mouse moves across the canvas

      if (mouseX < 20) {

​

        // no change before width < 20

        cg.pixels[index + 3] = 0;

​

        // darker side

      } else if (x < width / 2) {

        cg.pixels[index] = y - mouseX; //r

        cg.pixels[index + 1] = y - mouseX; //g

        cg.pixels[index + 2] = y - mouseX; //b

        cg.pixels[index + 3] = mouseX / 3;

​

​

        //lighter side

      } else if (x >= width / 2) {

        cg.pixels[index] = y + mouseX; //r

        cg.pixels[index + 1] = y + mouseX; //g

        cg.pixels[index + 2] = y + mouseX; //b

        cg.pixels[index + 3] = mouseX / 3;

​

        fill(255, 100);

        ellipse(faceCenterX, faceCenterY, faceWidth, faceHeight);

      // } else if (x >= width) {

      //   fill(255, 0, 0);

      //   ellipse(mirrorLineW, mirrorLineH, 150, 190);

  }

}

}

​

cg.updatePixels();

​

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

​

    }

​

  }

​

​

}