Take a Peek Into Rumpetroll's HTML5 Pond

On Monday, we told you about Rumpetroll, the bizarre web app that turns a regular old chat room into a pool of swimming, talking tadpoles. It uses HTML5 Canvas, WebSockets, JavaScript and CSS 3 to power all of the interactions and the front end. So if you have a browser that supports these technologies — […]

On Monday, we told you about Rumpetroll, the bizarre web app that turns a regular old chat room into a pool of swimming, talking tadpoles.

It uses HTML5 Canvas, WebSockets, JavaScript and CSS 3 to power all of the interactions and the front end. So if you have a browser that supports these technologies – currently, that's Chrome, Safari 5 or Firefox 4 Beta – check it out.

We pinged team Rumpetroll, asking how they created the unique app. Hans Petter and Hugo Ahlberg, two of the designers, wrote back with some of the technical details.

We'll let Hans walk us through it:

Our project started on a whim just a few weeks ago when Hugo tweeted that he had secured rumpetroll.com (He's Swedish and finds the word immensely witty) and Daniel Mahal figured he'd create some content for the site.

Daniel, Simen Brekken and Hans Petter work in an interactive agency (apt.no) and Hugo is in the midst of launching his mobile web app startup. So as developers and designers who do this stuff for a living, we figured it'd be a great project to explore what modern browsers can do that is not yet viable for commercial projects. All without plugins. It even supports the iPad if you have iOS 4.2 beta. (The current Mobile Safari does not support WebSockets.)

Swimming around alone was interesting for a minute. But when joined by schools and schools of actual virtual tadpoles, it became inexplicably entertaining.

We use WebSockets to keep the connection between browser and server alive at all times, this makes it really fast. One tadpole sends at most five updates per second to the server, which in turn broadcasts it to every other tadpole. The WebSocket server is implemented in Ruby with the glorious EventMachine and em-websocket. HTML files are hosted on Mediatemple and the WebSocket server runs on a Joyent SmartMachine. The virtual pond is drawn with the HTML5 Canvas element.

You may think of WebSockets as turbocharged Ajax, And it will probably have a huge impact on the future of the web.

The project is open and hosted on github, and we'd love contributions. Certainly anyone who've spent two minutes in the pond must have at least ten ideas for it.

I like his observation that WebSockets is sort of like a "turbocharged Ajax." In a sense it is – WebSockets allows services to keep running in the background and can provide updates to the browser without requiring the user to touch anything. Of course, they are technically not the same thing, but it's a good high-level analogy.

See also: