// https://github.com/lisajamhoury/The-Body-Everywhere-And-Here-2021/

​

let myVideo;

​

let calmImage;

let calmPixels = [];

​

let bgPixels = [];

​

// variable for my slider

let threshSlider;

​

function preload() {

  calmImage = loadImage(

    "k-01.jpg"

  );

}

​

function setup() {

​

  createCanvas(640, 480);

  calmImage.loadPixels();

  calmPixels = [...calmImage.pixels];

​

  threshSlider = 190

​

  const bgButton = createButton("Start");

​

  bgButton.mousePressed(setBG);

​

​

  myVideo = createCapture(VIDEO);

  myVideo.size(width, height); 

  myVideo.hide();

}

​

​

function setBG() {

  console.log("starting!!");

​

  myVideo.loadPixels();

​

  bgPixels = [...myVideo.pixels];

}

​

function draw() {

   background(255);

​

  myVideo.loadPixels();

​

  const currentPixels = myVideo.pixels;

​

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

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

​

      const i = (y * width + x) * 4;

​

      const diffR = abs(currentPixels[i + 0] - bgPixels[i + 0]);

      const diffG = abs(currentPixels[i + 1] - bgPixels[i + 1]);

      const diffB = abs(currentPixels[i + 2] - bgPixels[i + 2]);

​

      const avgDiff = (diffR + diffB + diffG) / 3;

      if (avgDiff < threshSlider) {

        currentPixels[i + 0] = 0;

         currentPixels[i + 1] = 0;

         currentPixels[i + 2] = 0;

      } else {

       fill(calmPixels[i + 0], calmPixels[i + 1], calmPixels[i + 2], 5)

        noStroke()

        ellipse(x, y, 50)

​

      }

    }

  }

  myVideo.updatePixels();

​

  push();

​

  translate(width, 0);

  scale(-1, 1);

  // image(myVideo, 0, 0, width, height);

  pop();

}

​