​

function preload() {

  video = createVideo(['cctv.mp4']);

}

​

function setup() {

  createCanvas(1280, 720);

  video.loop(); // Loop the video

  video.hide(); // Hide the HTML video element

  pixelDensity(1); // Ensure pixel density is set for proper pixel manipulation

}

​

function draw() {

  background(0);

  video.loadPixels();

  loadPixels();

  // Go through every pixel

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

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

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

      let r = video.pixels[index + 0];

      let g = video.pixels[index + 1];

      let b = video.pixels[index + 2];

      // Convert to grayscale based on perceived luminance

      let brightness = 0.2126 * r + 0.7152 * g + 0.0722 * b;

      // Simple thermal effect approximation: map brightness to grayscale

      // Note: Adjust this mapping for more nuanced thermal effects

      let thermal = map(brightness, 0, 255, 0, 255);

      pixels[index + 0] = thermal; // Red channel

      pixels[index + 1] = thermal; // Green channel

      pixels[index + 2] = thermal; // Blue channel

      pixels[index + 3] = 255; // Alpha channel

    }

  }

  updatePixels();

}

​