1-2 Motion Detection

let video;
let paramInput, paramValue;
let prevPixels = [];

async function setup() {
  createCanvas(windowWidth, windowHeight);
  pixelDensity(1);
  video = await createCapture(VIDEO);
  video.size(640, 480);
  video.hide();

  paramInput = select("#paramInput");
  paramValue = select("#paramValue");
}

function draw() {
  background(20);

  if (
    !video ||
    !video.elt ||
    video.elt.readyState < 2 ||
    video.elt.videoWidth === 0
  ) {
    fill(255);
    textAlign(CENTER, CENTER);
    textSize(24);
    text("Loading camera...", width / 2, height / 2);
    return;
  }

  let threshold = 50;
  if (paramInput) {
    threshold = int(paramInput.value());
    if (paramValue) paramValue.html(threshold);
  }

  let img = video.get();
  img.loadPixels();

  if (img.pixels && img.pixels.length > 0) {
    let w = img.width;
    let h = img.height;

    let aspect = w / h;
    let drawW = height * aspect;
    let drawH = height;
    if (drawW > width) {
      drawW = width;
      drawH = width / aspect;
    }
    let drawX = (width - drawW) / 2;
    let drawY = (height - drawH) / 2;

    push();
    translate(width, 0);
    scale(-1, 1);
    let invDrawX = width - (drawX + drawW);

    tint(255, 50);
    image(img, invDrawX, drawY, drawW, drawH);
    noTint();

    noStroke();
    fill(0, 255, 100);

    if (prevPixels && prevPixels.length === img.pixels.length) {
      let step = 8;
      for (let y = 0; y < h; y += step) {
        for (let x = 0; x < w; x += step) {
          let index = (y * w + x) * 4;
          let r = img.pixels[index];
          let g = img.pixels[index + 1];
          let b = img.pixels[index + 2];

          let pr = prevPixels[index];
          let pg = prevPixels[index + 1];
          let pb = prevPixels[index + 2];

          let diff = dist(r, g, b, pr, pg, pb);
          if (diff > threshold) {
            let px = map(x, 0, w, invDrawX, invDrawX + drawW);
            let py = map(y, 0, h, drawY, drawY + drawH);
            let pw = drawW / (w / step);
            let ph = drawH / (h / step);
            rect(px, py, pw, ph);
          }
        }
      }
    }

    prevPixels = new Uint8ClampedArray(img.pixels);
    pop();
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}