Animated ASCII art with HTML video and canvas elements

While playing with a €2 camera module I found a CircuitPython example of converting the camera’s video stream to ASCII art. I thought it was really inspiring – the mapping between the image brightness and the characters feels both very simple and clever – and it’s such a cool way to test the camera out (without dealing with image encoding and file handling).

A reply from Katherine on Mastodon inspired me to put the camera module aside for a moment and explore the ASCII conversion more. The canvas HTML element also exposes individual pixel data through the getImageData() method, which can be used in a very similar way to the CircuitPython example, and a video element can be used to call drawImage() and put the video onto the canvas. This means that with a video element for the actual video stream and a canvas element to get the image data, we can convert any video element into animated ASCII art. I am not putting code snippets in this post but everything is in the source code of this page.

I think it’s really interesting how different characters create different results. The web implementation is not limited to ASCII characters and can support unicode and emojis (although that seems to be a bit slow). I like the look with block elements, or zeroes and ones.

Idea: @milk_and_peppers
Ricky Esquivel, CC0 1.0, via Pexels
Jakec, CC BY-SA 4.0, via Wikimedia Commons

GeeAlice at English Wikipedia, CC BY-SA 3.0, via Wikimedia Commons
Jan Stanisławski, Public domain, via Wikimedia Commons

................................................................................ ................................................................................ ................................................................................ ................................................................................ ................................................................................ ................................................................................ ................................................................................ ................................................................................ ................................................................................ ................................................................................ ................................................................................ ................................................................................ ................................................................................ ................................................................................ ................................................................................ ................................ (allow camera) ................................ ................................................................................ ................................................................................ ................................................................................ ................................................................................ ................................................................................ ................................................................................ ................................................................................ ................................................................................ ................................................................................ ................................................................................ ................................................................................ ................................................................................ ................................................................................ ................................................................................