After visiting the SF MOMA this weekend, we thought it would be interesting to pay homage to Sol LeWitt by recreating some of his drawings in CSS.
This is an experiment that transforms HTML5 video into a pure CSS grid.
It works by drawing each video frame to a hidden HTML5 canvas, which we then use to extract color information for each pixel. An HTML5 canvas pixel is an array of four hexadecimal numbers that represents red, green, blue and alpha. Using the pixel data, we create a CSS grid and update the background color of each HTML element.
The coolest thing that we learned from this project was that requestAnimationFrame is insanely fast compared to setInterval. If you’re animating anything in the browser you should avoid setInterval like the plague and just use requestAnimationFrame.
This is just a proof-of-concept. We’re still trying to think of ways to make this project more fun and interactive.
A few weeks ago, we attempted to build an algorithm to generate nonsense tech phrases that would be funny yet plausible. We shelved the project because the results weren’t very good.
This weekend we took a second look at the problem and with just a few simple changes we were able to improve the results. First, we added verbs into the mix. The original algorithm only generated sentences with an adjective followed by a noun. Second, we added more words to our word list. In hindsight, both of these seem like no-brainers.
Then we fed 100,000 of these sentences into a Markov chain and let it generate the final results. We don’t know if the Markov chain actually helps but it does make the project sound cooler.