let prev;

let threshold = 25;

​

let motionX = 0;

let motionY = 0;

​

let lerpX = 0;

let lerpY = 0;

​

let myFont; 

​

function preload() {

  myFont = loadFont('VCR_OSD_MONO_1.001.ttf');

}

​

function setup() {

    frameRate(5);

    createCanvas(windowWidth, windowHeight);

    pixelDensity(1);

​

    video = createCapture(VIDEO);

    video.size(windowWidth, windowHeight);

    video.hide();

​

    prev = createImage(windowWidth, windowHeight);

}

​

function draw() {

    background(0);

​

    video.loadPixels();

    prev.loadPixels();

​

    threshold = 40;

​

    let count = 0;

    let avgX = 0;

    let avgY = 0;

​

    // Flip the canvas for video display

    push();

    translate(width, 0);

    scale(-1, 1);

    image(video, 0, 0, video.width, video.height);

    pop();

​

    loadPixels();

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

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

            let loc = (x + y * video.width) * 4;

            let r1 = video.pixels[loc + 0];

            let g1 = video.pixels[loc + 1];

            let b1 = video.pixels[loc + 2];

            let r2 = prev.pixels[loc + 0];

            let g2 = prev.pixels[loc + 1];

            let b2 = prev.pixels[loc + 2];

​

            let d = distSq(r1, g1, b1, r2, g2, b2);

​

            if (d > threshold * threshold) {

                avgX += x;

                avgY += y;

                count++;

                // Flip the effect pixels

                let flippedLoc = ((video.width - x - 1) + y * video.width) * 4;

                pixels[flippedLoc + 0] = 155;

                pixels[flippedLoc + 1] = 155;

                pixels[flippedLoc + 2] = 255;

            } else {

                let flippedLoc = ((video.width - x - 1) + y * video.width) * 4;

                pixels[flippedLoc + 0] = 190;

                pixels[flippedLoc + 1] = 255;

                pixels[flippedLoc + 2] = 155;

            }

        }

    }

​

    updatePixels();

​

    if (count > 200) {

        motionX = avgX / count;

        motionY = avgY / count;

    }

​

    // Mirror the motion tracking coordinates

//     let flippedMotionX = width - motionX;

​

//     lerpX = lerp(lerpX, flippedMotionX, 0.1);

//     lerpY = lerp(lerpY, motionY, 0.1);

​

//     fill(255, 0, 255);

//     stroke(0);

//     strokeWeight(2);

//     ellipse(lerpX, lerpY, 36, 36);

​

    filter(INVERT);

    prev.copy(video, 0, 0, video.width, video.height, 0, 0, prev.width, prev.height);

    filter(ERODE);

    filter(POSTERIZE, random(10,20));

  drawGrid(); // Draw the grid on top of your content

​

  drawSurveillanceOverlay()

    drawGrain();

​

    filter(BLUR, 1.5); // Apply a blur effect to the grid; adjust the value as needed

}

​

function distSq(x1, y1, z1, x2, y2, z2) {

    return sq(x2 - x1) + sq(y2 - y1) + sq(z2 - z1);

}

​

function mousePressed() {

  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {

    let fs = fullscreen();

    fullscreen(!fs);

  }

}

​

function drawGrain() {

    loadPixels();

    for (let i = 0; i < pixels.length; i += 4) {

        let grainAmount = random(-10, 10);

        pixels[i] += grainAmount;     // red

        pixels[i + 1] += grainAmount; // green

        pixels[i + 2] += grainAmount; // blue

        // pixels[i + 3] is the alpha channel

    }

    updatePixels();

}

​

function drawSurveillanceOverlay() {

  textFont(myFont); // Set the font

  textSize(32); // Set the text size

    // Draw border

    noFill();

    strokeWeight(5);

  stroke(0,0,0, 255);

      rect(9, 9, width-16, height-16);

  stroke(250,250,250, 255);

      strokeWeight(2.1);

​

        rect(9, 9, width-16, height-16);

​

​

​

    // Display timestamp

  fill(250,50,50)

  fill(250,250,250)

​

    noStroke();

    stroke(0,120);

​

    textSize(30);

    textAlign(CENTER , TOP);

    text(new Date().toLocaleString(), windowWidth/2, windowHeight -windowHeight/11);

    // Additional Text (Optional)

    textSize(17);

  fill(50,250,55)

    text("CAM 01", width - width/19, windowHeight/29);

}

​

function drawGrid() {

    let gridSize = 15; // Size of each grid cell

​

    stroke(205, 3); // Grid line color (white with some transparency)

    strokeWeight(1); // Thickness of grid lines

​

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

        for (let y = 14; y <= height+16; y += gridSize) {

            // line(x, 10, x, height);

            line(11, y, width-10, y);

        }

    }

}