In early 2014 I was invited to speak at JSFest in San Francisco. The conference was unique. There were no sponsors, recruiters or even food vendors. The only thing to do was listen to great talks and meet people. Nice.


I'm not an art history major. But I started my pixel art education with an Atari 2600 and interruption-free afternoons as an only-child deep in the suburbs.

As an adult, I eventually lived in an apartment with tall blank walls and started pasting up my own pixel art portraits with Post-it notes. One afternoon, halfway up a ladder I wondered how I could do it all in a web browser?

Strictly speaking, pixel art is a matrix of items arranged via a pre-determined design. The items themselves need only a 2D location, 2D scale and color. Even the earlist web browsers could handle such a task.

This talk tells the story of how I arrived at a browser-based, pixel art rendering solution called Bit-Shadow Machine. From Post-its, to Legos to a few JS framework attempts, we'll see several steps in the process. Finally, we'll see how easy it is to render 60fps, frame-based or particle-based animated pixel art with just JS, CSS and the DOM.

We'll also see how to use JavaScript to re-interpret the pixel art we create in the browser as full-motion HD video.