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

This sketch converts a live webcam feed into real-time ASCII art displayed on a canvas with a retro green-on-black terminal aesthetic. It also includes a drawing mode where users can draw on a buffer that gets converted to ASCII characters. The sketch continuously samples pixel brightness and maps it to ASCII characters of varying density.

Open in Editor Remix View in Gallery

🎓 Concepts You'll Learn

Webcam capturePixel manipulationASCII art generationBrightness calculationReal-time renderingMode togglingGraphics buffersColor mode (HSB)Canvas resizingText rendering

🔄 Code Flow

Code flow showing setup, togglemode, draw, windowresized

💡 Click on function names in the diagram to jump to their code

graph TD start[Start] --> setup[setup] setup --> canvas-setup[Canvas and Display Setup] setup --> color-setup[Color Mode Configuration] setup --> video-setup[Webcam Initialization] setup --> cell-calculation[Cell Dimension Calculation] setup --> graphics-buffer[Graphics Buffer Creation] setup --> button-setup[Toggle Button Creation] setup --> draw[draw loop] click setup href "#fn-setup" click canvas-setup href "#sub-canvas-setup" click color-setup href "#sub-color-setup" click video-setup href "#sub-video-setup" click cell-calculation href "#sub-cell-calculation" click graphics-buffer href "#sub-graphics-buffer" click button-setup href "#sub-button-setup" draw --> mode-switch[Mode Toggle Logic] draw --> mode-check[Mode Selection] draw --> grid-loop[ASCII Grid Rendering Loop] draw --> fps-display[FPS Counter Display] draw --> windowresized[windowresized] click draw href "#fn-draw" click mode-switch href "#sub-mode-switch" click mode-check href "#sub-mode-check" click grid-loop href "#sub-grid-loop" click fps-display href "#sub-fps-display" click windowresized href "#fn-windowresized" mode-switch --> buffer-clear[Drawing Buffer Clear] mode-check --> drawing-input[Drawing Input Handler] grid-loop --> brightness-calc[Brightness Calculation] grid-loop --> char-mapping[Character Index Mapping] click buffer-clear href "#sub-buffer-clear" click drawing-input href "#sub-drawing-input" click brightness-calc href "#sub-brightness-calc" click char-mapping href "#sub-char-mapping" windowresized --> canvas-resize[Canvas Resize] windowresized --> cell-recalc[Cell Dimension Recalculation] click canvas-resize href "#sub-canvas-resize" click cell-recalc href "#sub-cell-recalc"

📝 Code Breakdown

`setup()`

setup() runs once when the sketch starts. It initializes all the variables, creates the canvas, sets up the webcam, configures colors, and creates interactive elements. Think of it as the 'preparation' phase where everything is configured before the animation begins.

function setup() {
  createCanvas(windowWidth, windowHeight);
  pixelDensity(1);
  textFont('monospace');
  textSize(10);
  colorMode(HSB, 360, 100, 100);
  fill(120, 100, 100);
  video = createCapture(VIDEO);
  video.size(gridWidth, gridHeight);
  video.hide();
  cellWidth = width / gridWidth;
  cellHeight = height / gridHeight;
  pg = createGraphics(gridWidth, gridHeight);
  pg.pixelDensity(1);
  pg.background(0);
  pg.stroke(255);
  pg.strokeWeight(1);
  toggleButton = createButton('Toggle Mode');
  toggleButton.position(10, 30);
  toggleButton.mousePressed(toggleMode);
}

🔧 Subcomponents:

initialization Canvas and Display Setup createCanvas(windowWidth, windowHeight); pixelDensity(1); textFont('monospace'); textSize(10);

Creates a full-window canvas with monospace font and sets pixel density for consistent rendering

initialization Color Mode Configuration colorMode(HSB, 360, 100, 100); fill(120, 100, 100);

Sets HSB color mode and fills with bright green (hue 120) for retro terminal aesthetic

initialization Webcam Initialization video = createCapture(VIDEO); video.size(gridWidth, gridHeight); video.hide();

Captures webcam feed, resizes it to ASCII grid dimensions for efficient sampling, and hides the video element

calculation Cell Dimension Calculation cellWidth = width / gridWidth; cellHeight = height / gridHeight;

Calculates the pixel size of each ASCII character cell based on canvas and grid dimensions

initialization Graphics Buffer Creation pg = createGraphics(gridWidth, gridHeight); pg.pixelDensity(1); pg.background(0); pg.stroke(255); pg.strokeWeight(1);

Creates an off-screen drawing buffer for drawing mode with black background and white stroke

initialization Toggle Button Creation toggleButton = createButton('Toggle Mode'); toggleButton.position(10, 30); toggleButton.mousePressed(toggleMode);

Creates a button to switch between webcam and drawing modes

Line by Line:

createCanvas(windowWidth, windowHeight): Creates a canvas that fills the entire browser window, making the ASCII art display full-screen
pixelDensity(1): Sets pixel density to 1 for consistent pixel access across different screen densities (retina vs standard)
textFont('monospace'): Sets the font to monospace so each character has the same width, essential for ASCII art alignment
textSize(10): Sets the text size to 10 pixels, controlling how large each ASCII character appears
colorMode(HSB, 360, 100, 100): Switches to HSB (Hue, Saturation, Brightness) color mode, making it easier to work with green text
fill(120, 100, 100): Sets the fill color to bright green (hue 120, full saturation, full brightness) for the retro terminal look
video = createCapture(VIDEO): Requests access to the user's webcam and creates a video capture object
video.size(gridWidth, gridHeight): Resizes the video feed to 100x60 pixels (matching the ASCII grid) for efficient pixel sampling
video.hide(): Hides the actual video element from the DOM so only the ASCII art is visible
cellWidth = width / gridWidth: Calculates how many canvas pixels wide each ASCII character cell should be
cellHeight = height / gridHeight: Calculates how many canvas pixels tall each ASCII character cell should be
pg = createGraphics(gridWidth, gridHeight): Creates a separate off-screen graphics buffer with the same dimensions as the ASCII grid for drawing mode
pg.pixelDensity(1): Ensures the graphics buffer also uses pixel density of 1 for consistent pixel access
pg.background(0): Initializes the drawing buffer with a black background
pg.stroke(255): Sets the stroke color to white (255 in HSB) for drawing on the buffer
pg.strokeWeight(1): Sets the stroke width to 1 pixel for precise drawing
toggleButton = createButton('Toggle Mode'): Creates a button with the label 'Toggle Mode' that users can click to switch between modes
toggleButton.position(10, 30): Positions the button 10 pixels from the left and 30 pixels from the top of the window
toggleButton.mousePressed(toggleMode): Connects the button's click event to the toggleMode function so clicking it switches modes

`toggleMode()`

This function is called whenever the toggle button is clicked. It uses a ternary operator (condition ? trueValue : falseValue) to switch between two modes. The ternary operator is a compact way to write an if-else statement in a single line.

function toggleMode() {
  mode = (mode === 'webcam') ? 'drawing' : 'webcam';
  pg.background(0);
}

🔧 Subcomponents:

conditional Mode Toggle Logic mode = (mode === 'webcam') ? 'drawing' : 'webcam';

Switches between 'webcam' and 'drawing' modes using a ternary operator

function-call Drawing Buffer Clear pg.background(0);

Clears the drawing buffer with black background when switching modes

Line by Line:

mode = (mode === 'webcam') ? 'drawing' : 'webcam': Uses a ternary operator to toggle the mode: if mode is 'webcam', change it to 'drawing'; otherwise, change it to 'webcam'
pg.background(0): Clears the drawing buffer with a black background, giving the user a fresh canvas when switching to drawing mode

`draw()`

draw() runs 60 times per second (by default) and is where all animation and rendering happens. This function handles both the webcam-to-ASCII conversion and the drawing mode. The key insight is that it reads pixel brightness values and maps them to ASCII characters—darker pixels get darker (denser) characters, and brighter pixels get lighter (sparser) characters. The inverted mapping (bright → dark character) creates the visual effect where bright areas appear darker in ASCII art.

function draw() {
  background(0, 0, 0);
  let sourcePixels;
  if (mode === 'webcam') {
    video.loadPixels();
    sourcePixels = video.pixels;
  } else {
    if (mouseIsPressed) {
      pg.line(pmouseX / cellWidth, pmouseY / cellHeight, mouseX / cellWidth, mouseY / cellHeight);
    }
    pg.loadPixels();
    sourcePixels = pg.pixels;
  }
  for (let y = 0; y < gridHeight; y++) {
    for (let x = 0; x < gridWidth; x++) {
      let index = (y * gridWidth + x) * 4;
      let r = sourcePixels[index];
      let g = sourcePixels[index + 1];
      let b = sourcePixels[index + 2];
      let brightnessValue = (r * 0.299 + g * 0.587 + b * 0.114);
      let charIndex = floor(map(brightnessValue, 0, 255, asciiChars.length - 1, 0));
      charIndex = constrain(charIndex, 0, asciiChars.length - 1);
      let charToDisplay = asciiChars.charAt(charIndex);
      text(charToDisplay, x * cellWidth, y * cellHeight + textSize());
    }
  }
  fill(0, 0, 100);
  text('FPS: ' + frameRate().toFixed(2), 10, 15);
  fill(120, 100, 100);
}

🔧 Subcomponents:

conditional Mode Selection if (mode === 'webcam') { ... } else { ... }

Determines whether to use webcam pixels or drawing buffer pixels as the source

conditional Drawing Input Handler if (mouseIsPressed) { pg.line(...); }

Draws a line on the graphics buffer when the mouse is pressed in drawing mode

for-loop ASCII Grid Rendering Loop for (let y = 0; y < gridHeight; y++) { for (let x = 0; x < gridWidth; x++) { ... } }

Iterates through every cell in the ASCII grid (100x60) to convert pixels to characters

calculation Brightness Calculation let brightnessValue = (r * 0.299 + g * 0.587 + b * 0.114);

Calculates perceived brightness using weighted RGB formula (human eye perceives green brighter)

calculation Character Index Mapping let charIndex = floor(map(brightnessValue, 0, 255, asciiChars.length - 1, 0));

Maps brightness value (0-255) to an ASCII character index, inverting so bright pixels use dark characters

function-call FPS Counter Display fill(0, 0, 100); text('FPS: ' + frameRate().toFixed(2), 10, 15); fill(120, 100, 100);

Displays the current frame rate in white text at the top-left corner

Line by Line:

background(0, 0, 0): Clears the canvas with black background each frame, preventing trails from previous frames
let sourcePixels: Declares a variable that will hold either the video pixels or drawing buffer pixels
if (mode === 'webcam'): Checks if the current mode is 'webcam' to determine which pixel source to use
video.loadPixels(): Loads the current video frame's pixel data into the video.pixels array so we can read individual pixel values
sourcePixels = video.pixels: Assigns the video's pixel array to sourcePixels so we can process webcam data
if (mouseIsPressed): Checks if the mouse button is currently pressed to enable drawing
pg.line(pmouseX / cellWidth, pmouseY / cellHeight, mouseX / cellWidth, mouseY / cellHeight): Draws a line on the graphics buffer from the previous mouse position to the current position, scaled to grid coordinates
pg.loadPixels(): Loads the drawing buffer's pixel data so we can read what has been drawn
sourcePixels = pg.pixels: Assigns the drawing buffer's pixel array to sourcePixels for processing
for (let y = 0; y < gridHeight; y++): Outer loop that iterates through each row of the ASCII grid (0 to 59)
for (let x = 0; x < gridWidth; x++): Inner loop that iterates through each column of the ASCII grid (0 to 99)
let index = (y * gridWidth + x) * 4: Calculates the pixel array index for the current grid cell (multiply by 4 because each pixel has 4 values: R, G, B, A)
let r = sourcePixels[index]: Extracts the red component of the pixel at the calculated index
let g = sourcePixels[index + 1]: Extracts the green component of the pixel (next value in the array)
let b = sourcePixels[index + 2]: Extracts the blue component of the pixel (two positions after the red value)
let brightnessValue = (r * 0.299 + g * 0.587 + b * 0.114): Calculates perceived brightness using a weighted formula where green contributes most (0.587), then red (0.299), then blue (0.114)
let charIndex = floor(map(brightnessValue, 0, 255, asciiChars.length - 1, 0)): Maps brightness (0-255) to a character index, inverted so bright pixels (255) map to index 0 (darkest character) and dark pixels (0) map to the last index (lightest character)
charIndex = constrain(charIndex, 0, asciiChars.length - 1): Ensures the character index stays within valid bounds (0 to 9) in case of rounding errors
let charToDisplay = asciiChars.charAt(charIndex): Gets the ASCII character from the asciiChars string at the calculated index
text(charToDisplay, x * cellWidth, y * cellHeight + textSize()): Draws the ASCII character on the canvas at the correct position, adding textSize() to y for proper text baseline alignment
fill(0, 0, 100): Changes the fill color to white (0 hue, 0 saturation, 100 brightness in HSB) for the FPS text
text('FPS: ' + frameRate().toFixed(2), 10, 15): Displays the current frame rate at position (10, 15), rounded to 2 decimal places
fill(120, 100, 100): Resets the fill color back to bright green for the next frame's ASCII characters

`windowResized()`

windowResized() is a special p5.js function that automatically gets called whenever the browser window is resized. Without this function, the canvas would stay at its original size. By recalculating cellWidth and cellHeight, we ensure that the ASCII characters remain properly spaced and fill the entire window, no matter the window size.

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  cellWidth = width / gridWidth;
  cellHeight = height / gridHeight;
}

🔧 Subcomponents:

function-call Canvas Resize resizeCanvas(windowWidth, windowHeight)

Resizes the canvas to match the new window dimensions

calculation Cell Dimension Recalculation cellWidth = width / gridWidth; cellHeight = height / gridHeight;

Recalculates cell dimensions based on the new canvas size to maintain proper spacing

Line by Line:

resizeCanvas(windowWidth, windowHeight): Automatically resizes the p5.js canvas to match the new browser window dimensions when the window is resized
cellWidth = width / gridWidth: Recalculates the width of each ASCII character cell based on the new canvas width
cellHeight = height / gridHeight: Recalculates the height of each ASCII character cell based on the new canvas height

📦 Key Variables

video object

Stores the webcam capture object that provides access to the live video feed from the user's camera

let video; // Initialized in setup() with createCapture(VIDEO)

gridWidth number

Defines the number of ASCII characters displayed horizontally (100 characters across)

let gridWidth = 100;

gridHeight number

Defines the number of ASCII characters displayed vertically (60 characters down)

let gridHeight = 60;

cellWidth number

Stores the calculated pixel width of each ASCII character cell on the canvas (width / gridWidth)

cellWidth = width / gridWidth;

cellHeight number

Stores the calculated pixel height of each ASCII character cell on the canvas (height / gridHeight)

cellHeight = height / gridHeight;

asciiChars string

Contains ASCII characters ordered from lightest to darkest, used to represent different brightness levels in the image

let asciiChars = ' .:-=+*#%@';

mode string

Stores the current mode as either 'webcam' or 'drawing', determining which pixel source is used

let mode = 'webcam';

pg object

An off-screen graphics buffer used in drawing mode to store user-drawn content before converting it to ASCII art

let pg; // Initialized in setup() with createGraphics(gridWidth, gridHeight)

toggleButton object

Stores the button element that allows users to switch between webcam and drawing modes

let toggleButton; // Initialized in setup() with createButton('Toggle Mode')

🧪 Try This!

Experiment with the code by making these changes:

Change gridWidth and gridHeight to different values (like 50 and 30) to see how it affects the resolution of the ASCII art. Smaller grids show less detail but render faster.
Modify the asciiChars string to use different characters, like 'abcdefghij' or '░▒▓█', to see how different character sets represent brightness differently.
Change the fill color from fill(120, 100, 100) to fill(60, 100, 100) to make the ASCII art cyan instead of green, or try fill(0, 100, 100) for red.
Increase textSize() from 10 to 15 or 20 to make the ASCII characters larger and see how it affects the visual appearance.
In the drawing mode, try changing pg.stroke(255) to pg.stroke(128) to draw with gray instead of white, creating different brightness levels.
Modify the brightness calculation formula to emphasize different colors: try 'let brightnessValue = (r * 0.5 + g * 0.3 + b * 0.2)' to see how it changes the ASCII rendering.
Add a line like 'video.size(gridWidth * 2, gridHeight * 2)' to increase the video sampling resolution for more detailed ASCII art (may impact performance).

Open in Editor & Experiment →

🔧 Potential Improvements

Here are some ways this code could be enhanced:

PERFORMANCE draw() function, pixel access

The sketch accesses individual pixels through the pixels array, which requires loadPixels() every frame. For a 100x60 grid, this means 6000 pixel lookups per frame.

💡 Consider using a smaller grid size or implementing a frame skip (only process every other frame) to improve performance on slower devices. You could add a variable like 'let frameSkip = 2' and only update ASCII when 'frameCount % frameSkip === 0'.

BUG draw() function, drawing mode

When drawing, the line is drawn on a 100x60 pixel buffer but displayed at full canvas size. If the user draws quickly, the line may appear disconnected due to the low resolution of the buffer.

💡 Increase the graphics buffer resolution by changing 'pg = createGraphics(gridWidth, gridHeight)' to something like 'pg = createGraphics(gridWidth * 2, gridHeight * 2)' and adjust the line drawing coordinates accordingly.

STYLE setup() function

The brightness calculation formula (0.299, 0.587, 0.114) is hardcoded in the draw() function, making it difficult to adjust or understand without reading the code carefully.

💡 Define the brightness weights as named constants at the top of the file: 'const BRIGHTNESS_R = 0.299; const BRIGHTNESS_G = 0.587; const BRIGHTNESS_B = 0.114;' and use them in the calculation for better readability.

FEATURE toggleMode() function

There's no visual feedback to the user about which mode is currently active beyond switching the button label.

💡 Update the button text to show the current mode: 'toggleButton.html(mode === "webcam" ? "Switch to Drawing" : "Switch to Webcam");' in the toggleMode() function.

BUG setup() function, button positioning

The button is positioned at (10, 30) but the FPS text is displayed at (10, 15), which could cause the button to overlap the FPS counter depending on button height.

💡 Position the button lower, like 'toggleButton.position(10, 50);' to ensure it doesn't overlap with the FPS display.

PERFORMANCE draw() function, text rendering

The fill color is set to green for every ASCII character (6000 times per frame), even though it's already green from the previous frame.

💡 Move 'fill(120, 100, 100);' outside the nested loops to set it once before the grid rendering loop, and only change it when needed for the FPS text.

Preview

Code flow diagram showing the structure of AI ASCII Camera - Live Webcam to Text Art Converter - xelsed.ai - Code flow showing setup, togglemode, draw, windowresized — Code Flow Diagram

🎓 Concepts You'll Learn

🔄 Code Flow

📝 Code Breakdown

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

📦 Key Variables

🧪 Try This!

🔧 Potential Improvements

Explore More

p5js AI Cloud IDE

Gallery

User Guide

Preview