Characters and dots have become a look of their own. These effects turn images, video and shapes into ASCII text, rain glyphs down the screen, dither pictures into a few tones or break them into pixels. Most run on canvas or a shader, so watch how each one performs before you ship it. Install it as code you own, then feed it your own image or words.
ASCII and dither effects turn pictures into texture. ASCII renderers redraw images, video or 3D scenes as characters chosen by brightness, glyph effects scramble or rain letters down the screen, and dithering reduces an image to a few colours with ordered or diffused dots, the look of old screens and print.
These effects run on canvas or shaders and redraw constantly, so size them to their container and pause them off screen. Choose a character set and cell size that keep the shape readable, and give text rendered this way a real text alternative for screen readers and search.
Frequently asked questions
Draw the image to a small canvas, read each pixel's brightness, and map it to a character from dark to light, such as @ through a space. Render the rows in a monospace font or draw them on another canvas.
A way of showing more tones than you have by arranging dots of a few colours in patterns. Ordered dithering uses a fixed grid like Bayer, and error diffusion such as Floyd Steinberg spreads each pixel's error to its neighbours.
Draw columns of random characters on a canvas, move each column's head down every frame and fade old characters with a translucent fill. Vary the speed per column so it doesn't look mechanical.
Yes. Render each video frame or 3D scene to an offscreen canvas or texture, then run the same brightness to character mapping, usually in a shader for speed.
They can be, since they redraw every frame. Larger cells, a lower frame rate, a shader instead of per pixel JavaScript and pausing when hidden keep them smooth.
A ramp ordered by how much ink each character uses, from dense ones like @ and # down to dots and spaces. Shorter ramps look bolder, longer ones show finer detail.
Not by itself, since screen readers can't read a canvas. Keep the real words in the HTML, hide the decorative layer from assistive technology, and respect reduced motion settings.
