About Computational Photo Art

This simulation applies classic computational image-processing algorithms to any photo directly in your browser. Using the HTML5 Canvas API and getImageData, it reads raw pixel colour values and re-renders them using four distinct styles: ASCII art (mapping brightness to text characters), photomosaic (averaging colour per cell into coloured tiles), stipple drawing (sizing ink dots by local darkness), and Floyd–Steinberg error-diffusion dithering (quantising tones while spreading rounding errors to neighbouring pixels to preserve perceived detail).

These techniques underpin real-world tools used in print design, halftone newspaper printing, retro game art, and modern generative creative coding. Floyd–Steinberg dithering in particular has been a staple of digital image reduction since its introduction in 1976 and is still used inside image editors and e-ink displays today.

Frequently Asked Questions

What is computational photography art?

Computational photo art uses algorithms to re-interpret the pixel data of a photograph in a stylised way. Instead of displaying raw colour values, the program analyses brightness, hue, or local contrast and maps them to abstract visual elements — characters, tiles, dots, or quantised tones — creating an artistic rendering that is entirely derived from the original image data.

How do I use this simulation?

Choose a built-in test image from the "Source" dropdown, or upload your own photo using "Or upload your own". Then select a style (ASCII art, Photomosaic, Stipple, or Floyd–Steinberg dither) from the "Style" panel. Drag the "Detail / cell size" slider to control the resolution of the effect — smaller values produce finer detail. Toggle "Color" to switch between colour and monochrome output, and click "Save PNG" to download the result.

How does ASCII art rendering work in this simulation?

For each rectangular cell across the image, the simulation averages the red, green, and blue pixel values and computes a perceptual luminance using the formula L = 0.299R + 0.587G + 0.114B. That brightness value is mapped to a character from the ramp string (default @%#*+=-:. ) where dense characters represent dark areas and spaces represent bright areas. The character is then drawn at that cell position using a monospace font sized to the cell width.

What is Floyd–Steinberg error diffusion dithering?

Floyd–Steinberg dithering is a technique that reduces the number of colours in an image while minimising visible banding. When a pixel's true colour is rounded to the nearest available palette value, the rounding error is distributed to four neighbouring pixels — 7/16 to the right, 3/16 to the lower-left, 5/16 below, and 1/16 to the lower-right. This spreads quantisation errors across the image, producing a natural-looking grain that the human eye integrates into a perception of smooth tones. The algorithm was published by Robert Floyd and Louis Steinberg in 1976.

Where is stipple art used in the real world?

Stippling — rendering images with variable-density dots — has been used in engraving and scientific illustration for centuries, and appears in medical textbooks, botanical drawings, and topographic maps where fine ink control is essential. In modern digital contexts, stipple-style rendering is popular in editorial illustration, tattoo design, and portrait art. Algorithms similar to the one in this simulation are also used by pen plotters, which physically draw each dot on paper using a robotic arm.

Is photomosaic the same as pixel art?

No, though they look similar. Pixel art is created manually or procedurally at a deliberately small canvas size, then scaled up. A photomosaic averages the colour of each rectangular cell of an existing image and replaces it with a solid tile (or a matching thumbnail image in traditional photomosaics). The result depends entirely on the source photo, whereas pixel art is an independent creative output. This simulation uses the averaging approach, optionally substituting circle-fill glyphs to give a tile-like effect.

Who invented ASCII art and when did it originate?

ASCII art emerged in the 1960s alongside early line printers and teletypes, which could only output text characters but were used by programmers to produce pictures. It became a widespread culture on early bulletin board systems (BBS) in the 1980s and 1990s, where low-bandwidth connections made text-based images practical. The formal study of optimal character-to-brightness mappings for ASCII rendering has been explored in computer science literature since the early 1990s, including work on adaptive character ramps for different fonts.

What other image-processing techniques are related to this simulation?

Related techniques include halftone screening (used in CMYK printing, where dot size varies with tone), Voronoi stippling (distributing dots using weighted centroid relaxation for more even spacing), ordered dithering with Bayer matrices (an alternative to Floyd–Steinberg that produces a regular crosshatch pattern), and colour quantisation algorithms such as median-cut and k-means clustering. All of these appear in image editors, print workflows, and generative art libraries, and share the same core challenge: representing continuous tones with a limited set of discrete output values.

How is dithering used in modern technology?

Floyd–Steinberg and similar dithering algorithms are built into e-ink display drivers to render greyscale images on screens that can only show black or white per pixel. They are used in GIF and PNG colour-reduction pipelines, in audio (1-bit DACs use noise shaping, the audio equivalent of dithering), and in printing — laser printers dither each page to simulate grey tones using only black toner dots. Modern image editors like Photoshop and GIMP expose dithering options whenever you reduce an image to indexed colour mode.

What are the current frontiers of computational photo art?

Current research and practice extends these ideas into neural and generative directions: neural style transfer uses convolutional neural networks to impose artistic textures on photographs; diffusion models can re-imagine photos in arbitrary styles from text prompts; and differentiable rendering allows artistic rendering pipelines to be trained end-to-end. For stippling specifically, researchers have developed Weighted Linde–Buzo–Gray (WLBG) stippling, which uses Lloyd relaxation on a density field derived from the image to place dots with near-optimal perceptual uniformity — a significant improvement over the simple grid approach used in this simulator.