​

let capture;

let filter1;

let slider;

​

function setup() {

  createCanvas(400, 400);

  filter1 = createGraphics(width, height);

  filter1.pixelDensity(1);

​

  capture = createCapture(VIDEO);

  capture.hide();

  slider = createSlider(0, 255, 127); // min, max, value

  slider.position(width/2-50, height-30);

  slider.style('width', '100px');

}

​

function draw() {

  background(200);

​

  let val = slider.value();

  filter1.loadPixels();

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

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

      let index = (i + j * width) * 4;

      filter1.pixels[index] = val; // R

      filter1.pixels[index+1] = i; // G

      filter1.pixels[index+2] = j; // B

      filter1.pixels[index+3] = 100; // A

    }

  }

  filter1.updatePixels();

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

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

}