@rem's hacks & demos

Letter Slinger

remy — Thu, 05 Aug 2010 12:36:07 +0100

This was my entry for the Alist Apart 10k app. Basically I wanted something that used the canvas element to run some animation, some sort of game aspect to it, and something with fonts - so I bashed this together over the weekend (probably about 4 hours).

I also tried to compress it down to enter in the js1k game but failed and ended up with this gist which is 1558 bytes (and I think may be broken!).

None the less, the big thing I discovered is that shadows on the canvas really don’t perform well, in IE9pre3 (with hardware acceleration on the 2D API), it dropped from 60fps (without shadows) to 5fps (with shadows). Not good.

Multiplayer Tron

remy — Mon, 05 Jul 2010 15:33:00 +0100

Multiplayer Tron:

A little hack I played around with - it’s a bit messy in the code, but you control a pink line and have to avoid smashing in to the other lines on the game - robots from your point of view.

It’s multiplayer and draws to a canvas. It’s checking the canvas opacity of the pixel we just drew on to check for collision, pretty basic, but works.

Tweet near your buddy: BeThere

remy — Tue, 15 Jun 2010 13:51:45 +0100

Tweet near your buddy: BeThere:

BeThere is one of the hacks I did for Warblecamp a few months back. It uses Twitter’s @anywhere API to connect and authenticate with Twitter.

From there it runs through your timeline looking for your friends’ geo data. When you click on a friend, it’ll show them on the map (if there’s no geo data it won’t), and you can tweet from the same location as them - the ultimate in travelling to see friends without leaving your sofa!

This demo is very experimental - in fact I find I have to refresh sometimes when it doesn’t load properly. It was hacked over about 3 hours with very little sleep - so please forgive me!

I do plan to release this a fully fledge app for those people who want to protect (and play) with their privacy on Twitter though - so watch my space!

Collaborative Drawing

remy — Wed, 09 Jun 2010 10:07:00 +0100

Collaborative Drawing:

I ran an HTML5 API workshop for Web Directions @media this week and in the last 30 minutes of the workshop I hacked this together based on some of the technologies we had learnt from the day. It uses Web Sockets and the Canvas API to share drawings.

The server can be a little unstable, so if it says it can’t connect, it might need a kick.

It’s obviously not the sexiest looking thing, but the rawness comes from our 30 minute hack :)

The server is run using node.ws.js.

Just a couple of awesome examples from the hack:

What they said and where they said it

remy — Thu, 03 Jun 2010 15:29:40 +0100

What they said and where they said it:

Whilst seb_ly was caught out somewhere in Europe making his way home overland due to the volcano, he was tweeting as he went along.

I decided to capture the geo info on those tweets and map it out on Google maps.

This demo uses only the JavaScript you see in the page to work looping through all the tweets to plot a journey of an individual via Twitter’s geo tagging.

HEX to RGB

remy — Thu, 27 May 2010 16:45:53 +0100

HEX to RGB:

Almost finished micro app for getting rgb from hex and visa versa. Works on the iPhone too.

Pure animating CSS Gallery

remy — Wed, 26 May 2010 22:51:00 +0100

Pure animating CSS Gallery:

Uses CSS transitions combined with the :target selected to create different effects when clicking on the different thumbnails.

Disable JavaScript and the entire gallery still works.

The default demo is a cross fade - but here’s a few more examples:

WebKit only: