Convert images, videos, or webcam feeds into ASCII directly in your browser. Try it out here.
Key features include:
- Support for image and video file uploads
- Real-time webcam feed conversion
- Customisable output dimensions, character sets, and colours
- Copy ASCII to clipboard or download it as a PNG or MP4/WebM
- Tweak image brightness and contrast
- Zoom and pan controls
The core algorithm transforms visual media into ASCII through the following steps:
-
Pixel Sampling: For each ASCII character position, a grid of pixels is sampled from the source image or video. Within each region, RGB values are averaged to determine overall brightness. A stride pattern optimises performance by sampling fewer pixels in larger regions.
-
Luminance Calculation: The averaged RGB values are converted to a single luminance value using the ITU-R BT.709 coefficients, which reflect human perception of colour (green appears brighter than blue or red).
$$L = (R \cdot 0.2126) + (G \cdot 0.7152) + (B \cdot 0.0722) \quad \text{where } R,G,B \in [0,1]$$ -
Character Mapping: The luminance value (0-255) is mapped to an index in the character set. Higher luminance values correspond to denser characters (like
@or#), while lower values correspond to sparser characters (like spaces or dots).
The application is built using React with Vite. State management is handled via React Context. Conversion logic is abstracted into custom hooks:
useUpload: Handles file and URL uploads and previewsuseWebcam: Manages webcam streams and previewsuseAscii: Implements the core ASCII conversion logic and output