Webcam Effects

function setup() {
  createCanvas(windowWidth, windowHeight);
  video = createCapture(VIDEO);
  video.size(640, 480); // Keep video size consistent for pixel access
  video.hide();
  textFont('monospace');
  textSize(10); // Set textSize once for ASCII mode
}

function draw() {
  background(0);
  
  // Always load video pixels once at the start of draw
  // This ensures all modes have access to current video frame data
  video.loadPixels();
  
  if (effectMode === 0) {
    // Normal
    image(video, 0, 0, width, height);
  } 
  else if (effectMode === 1) {
    // Pixelate
    let res = 10;
    noStroke();
    for (let y = 0; y < video.height; y += res) {
      for (let x = 0; x < video.width; x += res) {
        let i = (y * video.width + x) * 4;
        let r = video.pixels[i];
        let g = video.pixels[i + 1];
        let b = video.pixels[i + 2];
        fill(r, g, b);
        let px = map(x, 0, video.width, 0, width);
        let py = map(y, 0, video.height, 0, height);
        let pw = width / video.width * res;
        let ph = height / video.height * res;
        rect(px, py, pw, ph);
      }
    }
  }
  else if (effectMode === 2) {
    // ASCII
    let chars = ' .:-=+*#%@';
    fill(0, 255, 0); // Set fill once for ASCII mode
    for (let y = 0; y < video.height; y += 8) {
      for (let x = 0; x < video.width; x += 5) {
        let i = (y * video.width + x) * 4;
        let br = (video.pixels[i] + video.pixels[i+1] + video.pixels[i+2]) / 3;
        let charIndex = floor(map(br, 0, 255, 0, chars.length));
        let px = map(x, 0, video.width, 0, width);
        let py = map(y, 0, video.height, 0, height);
        // Using text() is still somewhat slow for many characters,
        // but pre-setting textSize and fill helps.
        text(chars[charIndex], px, py);
      }
    }
  }
  else if (effectMode === 3) {
    // Edge detection (simple)
    // Draw the video first, then apply an edge filter to the canvas
    image(video, 0, 0, width, height); // Draw video
    filter(POSTERIZE, 2); // Reduce colors for starker edges (optional)
    filter(ERODE); // Erode the image slightly
    filter(THRESHOLD); // Threshold to get binary edges
    // This approach leverages p5.js built-in filters which are often faster
    // than manual pixel iteration, especially for simple effects.
    // For more advanced edge detection (e.g., Sobel), a shader would be best.
  }
  else if (effectMode === 4) {
    // Posterize
    image(video, 0, 0, width, height);
    filter(POSTERIZE, 4);
  }
  
  // UI
  fill(255);
  textSize(16); // Reset textSize for UI
  textAlign(LEFT, TOP);
  text('Effect: ' + effects[effectMode] + ' (click to change)', 20, 20);
}

function mousePressed() {
  effectMode = (effectMode + 1) % effects.length;
}

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