BIG BLOCK FRAMEWORK

bigblock-uber.gif

For a long while I was obsessed with creating 8-bit style graphics and animation in desktop and mobile web browsers. It seemed reasonable a modern web browser on an average personal computer could render a grid of solid color blocks as 8-bit art at a comfortable 60fps. 

Big Block Framework represented one approach using only JavaScript and CSS. It worked but was an enormous hack.

Imagine a grid of 8px by 8px divs. Animating those divs requires changing their properties. I realized it was much faster to change a div’s class name than individual properties.

Big Block Framework pre-computed all the possible locations in the grid as well as all the possible colors. It then created CSS style rules for each. At 640 x 480, that’s close to 5,000 rules. There lies the enormity of the hack.

bigblock-reggie.gif

But it worked.

I even created a typeface, Werds Fer Nerds, that was just a bunch of style rules for each letter.

This was my first real attempt building a creative tool for other people. I'm not sure anyone actually used it. But it was just the beginning of several JS-based solutions to deliver 8-bit art in a browser.