AR Filter - OpenProcessing

mySketch
xxxxxxxxxx
 
//// this code builds upon the code from https://editor.p5js.org/cacheflowe/sketches/aLybN_TdB
let capture;
let f;
​
function setup() {
  createCanvas(320, 240);
  capture = createCapture({ //assigning a value to a webcam variable
    audio: false,   //turning off audio
    video: { width: 320, height: 240 } //setting width and height of video
  })
  //capture = createCapture(VIDEO);
  capture.hide();
  imageMode(CENTER);
  rectMode(CENTER);
  f = 0;
  
}
​
function draw() {
  background(220);
  if(f == 0){
    image(capture, 160, 120, 320, 240);
  }
  if(f == 1){
    image(capture, 160, 120, 320, 240);
    background(247, 238, 181);
    fill(181, 115, 2);
    noStroke();
    capture.loadPixels(); //load in all pixel data
    for (let y = 0; y < height; y += 10) { //controls the columns, vertical
    for (let x = 0; x < width; x += 10) { //controls the horizontal, rows 
      const i = y * width + x; //create i variable
      const darkness = (255 - capture.pixels[i * 4]) / 255; //determining how dark a pixel is
      const radius = 10 * darkness; //determines how big our circle is going to be; the darker the pixel, the bigger the circle
      rect(x, y, radius, radius);
        }
      
      }
    }
  if(f == 2){
    image(capture, 160, 120, 320, 240);
    filter(GRAY, 2);
    //monocle
    noFill();
    stroke(0);
    strokeWeight(4);
    circle(150, 150, 20);
    strokeWeight(2);
    circle(138, 153, 10);
    fill(138, 136, 136);
    circle(135, 165, 8);
    circle(135, 175, 8);
    circle(135, 185, 8);
    circle(135, 195, 8);
    circle(135, 205, 8);
    //top hat
    fill(0);
    rect(165, 110, 85, 20);
    rect(165, 65, 40, 75);
    fill(138, 136, 136);
    rect(165, 90, 40, 15);
  }
}
​
function keyPressed(){
  if(keyCode == LEFT_ARROW){
    f++;
  }
  
  if(keyCode == RIGHT_ARROW){
    f--;
  }
  if(f > 2){
    f = 0;
  }
  if(f < 0){
    f = 2;
  }
}