ASCIImotion: an ASCII engine in the browser

ASCIImotion turns images and video into characters. Processing happens in the browser, so files do not need to be uploaded to a server.

Rendering animation without slowing down the page

An ASCII image can contain several thousand characters. If each one becomes a separate HTML element, the browser spends most of its time updating the DOM.

We chose a more direct approach: each frame is built as one string and displayed in a single update. That gives up per-character manipulation, but the editor did not need it.

The difference is especially noticeable with video. At 30 frames per second, a delay of a few dozen milliseconds is enough to make playback uneven.

The font changes the result

Monospace fonts do not all have the same proportions. An image that looks dense in Consolas may appear stretched or too light in JetBrains Mono.

The editor therefore lets users adjust density and the character set. The contrast between characters such as @, #, + and . often matters more than a complex graphics setting.

Keeping the editor simple

The interface is mainly there to import media, adjust the rendering, check the animation and export the result. We kept application state straightforward: frames and undo/redo history use snapshots that are easy to inspect.

Output formats also shaped the implementation. A still image, a GIF and a video have different constraints, but they all use the same frame renderer so the preview and export stay consistent.

ASCIImotion is open source and available at asciimotion.gx2.studio.