I love poetry magnets, those silly little tiles with words on them that end up scattered across your refrigerator door.  You kids play with 'em and eventually start to make strange, esoteric-sounding phrases that might be poems.  So I was pleased to see that PlusGood, one of my favorite design houses, had written TwitterMagnets, a lovely little toy that simulates those wonderful literary devices.  Unfortunately, it lacks a few things: it doesn't resize at all, it's Flash (ugh!), and it allocates a portion of the screen to "the poetry region."

But magnetic poetry doesn't have allocated portions of your refrigerator.  A magnetic poem is just a collection of tiles assembled in a deliberate and meaningful way.  So I decide to write my own equivalent.

Behold: HTML5 Magnets!

It resizes when you resize (proportionally, too!), it's not Flash, it still allows you to send your poem as a Tweet (so long as it'll fit), and it detects a poem by the deliberate placement of words(i.e. you moved them) into meaningful patterns (i.e. they're touching).

There's a lot of fun stuff in the code: HTML5 Audio, the separate axis theorem (used to determine collisions in game mechanics, here used to create the "is-a" poem graph), a desperate (and somewhat unsuccessful) attempt to marry some functional and OO designs, a ton of Coffeescript (I love Coffeescript, gods, please don't ever ask me to write straight JS again), a little application of the "write-only DOM" theory, and a nifty chunk of proportionality that lets the zoom feature work its magic.  I wrote this for fun, and it is fun.

Bug reports, patches, and the like, are very welcome, as always.

As usual, the HTML5 Magnets source code is available at GitHub.  Enjoy!