AI ASCII Camera - Live Webcam to Text Art Converter - xelsed.ai

function setup() {
  // Create a canvas that fills the entire browser window
  createCanvas(windowWidth, windowHeight);
  // Set pixel density to 1 for consistent pixel access across screens
  pixelDensity(1);

  // Set text properties for ASCII output
  textFont('monospace'); // Use a monospace font for consistent character width
  textSize(10); // Set text size
  // Use HSB color mode for intuitive green text on black background
  colorMode(HSB, 360, 100, 100);
  fill(120, 100, 100); // Bright green color in HSB (120 hue, 100 saturation, 100 brightness)

  // Initialize webcam capture
  video = createCapture(VIDEO);
  // Resize the video feed to match our ASCII grid dimensions for efficient pixel sampling
  video.size(gridWidth, gridHeight);
  video.hide(); // Hide the actual video element from the DOM

  // Calculate the width and height of each character cell on the canvas
  cellWidth = width / gridWidth;
  cellHeight = height / gridHeight;

  // Create an off-screen graphics buffer for the drawing mode
  // This buffer will have the same dimensions as our ASCII grid
  pg = createGraphics(gridWidth, gridHeight);
  pg.pixelDensity(1); // Ensure consistent pixel density for the drawing buffer
  pg.background(0); // Initialize drawing buffer with black
  pg.stroke(255); // White stroke for drawing
  pg.strokeWeight(1); // 1-pixel stroke weight for drawing

  // Create a button to toggle between webcam and drawing modes
  toggleButton = createButton('Toggle Mode');
  toggleButton.position(10, 30); // Position the button below the FPS counter
  toggleButton.mousePressed(toggleMode); // Assign the toggleMode function to the button's click event
}

function toggleMode() {
  mode = (mode === 'webcam') ? 'drawing' : 'webcam';
  pg.background(0); // Clear the drawing buffer when switching to drawing mode
}

function draw() {
  background(0, 0, 0); // Draw a black background (0 hue, 0 saturation, 0 brightness in HSB)

  let sourcePixels; // This variable will hold the pixel array (either from video or drawing buffer)

  if (mode === 'webcam') {
    video.loadPixels(); // Load pixels from the video feed
    sourcePixels = video.pixels;
  } else { // mode === 'drawing'
    // If the mouse is pressed, draw a line on the off-screen buffer
    if (mouseIsPressed) {
      // Map mouse coordinates from canvas to the smaller drawing buffer grid
      pg.line(pmouseX / cellWidth, pmouseY / cellHeight, mouseX / cellWidth, mouseY / cellHeight);
    }
    pg.loadPixels(); // Load pixels from the drawing buffer
    sourcePixels = pg.pixels;
  }

  // Loop through each character cell in our grid
  for (let y = 0; y < gridHeight; y++) {
    for (let x = 0; x < gridWidth; x++) {
      // Calculate the index for the top-left pixel of the current cell in the source pixel array
      // Each pixel in the array has 4 components: Red, Green, Blue, Alpha
      let index = (y * gridWidth + x) * 4;

      // Get the RGB color components for this pixel
      let r = sourcePixels[index];
      let g = sourcePixels[index + 1];
      let b = sourcePixels[index + 2];

      // Calculate brightness using a common formula for perceived brightness
      // This is a faster approximation than p5.js's brightness() function for individual pixels
      let brightnessValue = (r * 0.299 + g * 0.587 + b * 0.114);

      // Map the brightness value (0-255) to an index in our asciiChars string
      // The asciiChars string is ordered from lightest to darkest.
      // So, bright pixels (255) map to the darkest character (index 0),
      // and dark pixels (0) map to the lightest character (index asciiChars.length - 1).
      let charIndex = floor(map(brightnessValue, 0, 255, asciiChars.length - 1, 0));

      // Constrain the index to ensure it stays within the valid range of the asciiChars string
      charIndex = constrain(charIndex, 0, asciiChars.length - 1);

      // Get the ASCII character at the calculated index
      let charToDisplay = asciiChars.charAt(charIndex);

      // Display the character on the canvas at the correct position
      // Add textSize() to the y coordinate for proper baseline alignment of text
      text(charToDisplay, x * cellWidth, y * cellHeight + textSize());
    }
  }

  // Display the current frame rate (FPS) counter
  // Use fill(0, 0, 100) for white text to stand out against the green ASCII
  fill(0, 0, 100);
  text('FPS: ' + frameRate().toFixed(2), 10, 15);
  // Reset fill color back to green for the ASCII characters
  fill(120, 100, 100);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight); // Resize the canvas to match the new window dimensions
  // Recalculate cell dimensions based on the new canvas size
  cellWidth = width / gridWidth;
  cellHeight = height / gridHeight;
}