Tuesday, June 10, 2014

bitgrid -- The Result of a Little Tin Can Hacking

Update: I've retired bitgrid.benjisimon.com. The code can still be found in github. E-mail me if you're interested in me launching a server to host this again.

I give you: bitgrid, a webapp without a cause. It's the result of some Tin Can Hacking.

During our last trip overseas I got the idea in my head to give myself a little programming challenge. Given the flight from DC to Paris, what kind of software could I build from scratch? I'd have at my disposal whatever was installed on my laptop, but with no Internet Connection, I was effectively on my own. I couldn't go off and grab 3rd party libraries or get answers from Google. Not to mention, I was programming all this from coach. So not only did I have to get by without StackOverflow, I'd also have to get by without legroom.

It was just me, emacs and xampp, stuck in a tin can flying at 30,000 feet.

After a little brainstorming, I decided I'd focus on building a simple little app for sharing crude images. This ended up refining itself into bitgrid, an app where you can fill in various points of a grid and share that grid with your friends. The state of the application is stored in the URL, so there's actually no database dependency. (In other words: bitgrid may not have much value, but boy does it scale!)

Here's what the webapp looks like:

And here's the URL behind that particular grid: http://bitgrid.benjisimon.com/#1G00S744K5K544S7001G.

What's bitgrid useful for? Well, that's hard to say. It's a pretty generic app, so it's got any number of uses. You could use it to make crude maps or share minimalist art. You could use it to pass secret messages, or as a sort of online ranger beads. With a little effort, you could probably create an online game with it; one that gets played by passing URLs back and forth over Twitter. The sky's the limit.

All I know is, it was a fun little diversion.

Here are some grids to get you started: one, two and three. But really, go make something amazing!

Update: (1) an anonymous user submitted a fix to the bug keeping you from highlighting an entire row of grid points, and I've applied it. And (2), I've put the repo up at github. Feel free to fork this sucker and hack away.

Update: Special thanks to Erwin Koning for finding and fixing a nasty bug in bitgrid.


  1. That is delightful.

    Next step, implement a Piet interpreter to feed those programs into :).

  2. Grant - and now I know Piet is...very cool! Thanks for the reference!

    I can see it, bitgrid 2.0, where the grid is executable code.

  3. Anonymous9:35 AM

    There is a bug? You cannot set all fields in a row to white?

    1. I can replicate as well. Also I can get the representation to do some kind of reflection in have by creating an x shape with a 4 dot square in the middle then try to close the upper arms of the X.

      Seems the packed representation has some issues.

  4. D'oh - thanks for sharing. I'll have to debug this and put out an updated version.

  5. Anonymous6:49 AM

    Solution to the bug in bitgrid:
    In calc.js (in 2 places) the chars var is 1 character too short:
    var chars = "0123456789ABCDEFGHIJKLKMOPQRSTV";

    Either insert the letter 'N' or append the letter 'W'.

  6. Oh anonymous, you rock!! I kept meaning to get around to fixing this bug, and you solved it. Send me e-mail at benjisimon@gmail.com; I'd love to thank you with something more than a comment!