Video Grid

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.

Click here to view the project.

Touchstone Bot

We built a Twitter bot that tweets anytime a Touchstone Climbing gym sets new routes or boulder problems. We used a combination of Rails, PostgreSQL, Heroku and IFTTT to make it all work.

First, we built a Rails app, which is hosted for free on Heroku, that periodically scrapes and stores data from touchstoneclimbing.com. Then, we integrated with IFTTT by building an applet so we could post those updates on Twitter.

twitter.com/TouchstoneBot

Tech Nonsense

 

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.

Click here to view the project.