let tracker;

let positions;

​

function setup() {

​

  // load p5 functions:

  createCanvas(windowWidth, windowHeight);

​

  capture = createCapture(VIDEO);

  capture.size(width, height);

  capture.hide();

​

  cg = createGraphics(width, height);

  // load clmtrackr functions:

  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

​

  // reference here: https://www.auduno.com/clmtrackr/docs/reference.html 

}

​

function draw() {

  translate(width, 0);

  scale(-1, 1);

​

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

  let positions = tracker.getCurrentPosition(); // updates the tracker with current positions, it returns the position as an array, you want this in the draw functin because you want this to keep updating 

​

  //console.log(positions); // uncomment to see the list of arrays

  capture.loadPixels();

​

  //draw 400 shapes per frame

  for (let i = 0; i < 800; i++) {

​

    let randomX = int(random(capture.width));

    let randomY = int(random(capture.height));

​

    let randomIndex = (randomY * capture.width + randomX) * 4;

​

    let r = capture.pixels[randomIndex];

    let g = capture.pixels[randomIndex + 1];

    let b = capture.pixels[randomIndex + 2];

    let a = capture.pixels[randomIndex + 3];

​

    let mappedX = map(randomX, 0, capture.width, 0, width);

    let mappedY = map(randomY, 0, capture.height, 0, height);

​

    // shapes

    fill(r, g, b, a);

    ellipse(mappedX, mappedY, 30);

    rect(mappedX - 10, mappedY, 20, 20);

    fill(255);

    ellipse(mappedX - 4, mappedY, 5);

    ellipse(mappedX + 4, mappedY, 5);

  }

​

​

​

​

  //aiming frame

  push();

  for (let i = 0; i < 30; i++) {

    stroke(255, 255, 255);

    strokeWeight(4);

    line(0, i * height / 30, width / 30, i * height / 30);

    line(width, i * height / 30, width - width / 30, i * height / 30);

  }

​

  for (let i = 0; i < 40; i++) {

    stroke(255, 255, 255);

    strokeWeight(4);

    line(i * width / 40, 0, i * width / 40, height / 20);

    line(i * width / 40, height, i * width / 40, height - height / 20);

  }

  stroke(255, 0, 0);

  strokeWeight(6);

  line(5, 0, 5, height / 10);

  line(5, height, 5, height - height / 10);

  line(width - 5, 0, width - 5, height / 10);

  line(width - 5, height, width - 5, height - height / 10);

  line(width / 2, 0, width / 2, height / 10);

  line(width / 2, height, width / 2, height - height / 10);

  line(0, height / 2, width / 15, height / 2);

  line(0, 5, width / 20, 5);

  line(0, height - 5, width / 20, height - 5);

  line(width, height / 2, width - width / 15, height / 2);

  line(width, 5, width - width / 20, 5);

  line(width, height - 5, width - width / 20, height - 5);

  pop();

​

​

​

​

  // add mosaic to face 

  if (positions.length > 0) { // evaluates if there is something in the array positions 

    noStroke();

​

    let sx = positions[0][0] + 10; // source X

    let sy = positions[14][1] + 20; // source Y

    let sw = positions[15][0] - positions[19][0] + 10; // source W

    let sh = positions[19][1] - positions[62][1] + 30; // source H

    let dx = 20; //destination x

    let dy = 20;

    let dw = width / 50;

    let dh = height / 50;

​

    cg.copy(capture, sx, sy, sw, sh, dx, dy, dw, dh);

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

    fill(215, 0, 0);

    // eye block location

    rect(positions[0][0] + 10, positions[14][1] + 20, positions[15][0] - positions[19][0] + 10, positions[19][1] - positions[62][1] + 30);

  }

}