Doom rendered as checkboxes

Doom may be played in the web browser, of course, but now it may also be rendered in the web browser as a vast collection of checkboxes.

You can play now (desktop Chrome/Edge only), view the source code, or read on for the how.

This is the incredible achievement of Andrew Healey.

In my project, DOOM runs via WebAssembly in a hidden <canvas>. I use HTMLCanvasElement.captureStream() to turn this into a MediaStream. A <video> element displays this MediaStream and is then consumed by renderVideo from Checkboxland. I experimented with a few different threshold values to get DOOM to render as clear as possible. A possible improvement here is to use some kind of dither filter.

Optionally, the <video> element can be hidden as well. However, test users were unable to exit the main menu without the aid of the original hi-res DOOM.

Our screen is a 160 by 100 grid of native checkboxes. Higher resolutions work but FPS drops off dramatically. The image at the top of this post is from an earlier version with a resolution of 320×200.