All posts tagged ‘Rumpetroll’

File Under: HTML5, Web Apps

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 — 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 (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 ( 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:

File Under: CSS, HTML5, JavaScript, Web Apps

Chat With Other Tadpoles in Rumpetroll

This may be the most bizarre chatroom ever created.

It’s called Rumpetroll. In Norwegian, the word means “tadpole,” but the literal translation is “ass troll.” It’s a very clever name, as Rumpetroll is a chat room.

Enter, and you’re dropped into a color-shifting primordial soup with a bunch of other tadpoles (that also happen to look like sperm). Click around with your mouse to swim around and join up with other groups. Type to chat, and enter “name: Mike” to give your tadpole/sperm a display name.

The visual environment is powered by Canvas, JavaScript and CSS 3. It also uses WebSockets, a technology which allows persistent client-server connections. It exemplifies how web standards can be used to write a front-end that turns the most banal and simple web app into something unique and interesting.

Because of these leading-edge technologies, you’ll need a modern browser like Chrome, Firefox 4 or Safari 5.

I’ve been hanging out in Rumpetroll all morning. I’ve gone on some fruitless adventures into the abyss. I also met some Russians. I’ve even encountered a few users who have learned how to hack the site’s JavaScript to increase the size of their tadpole, or speed it up so they can fly around at amazing speeds.

The creators are four hackers from Oslo, Norway: Daniel Mahal, Hans Petter Eikemo, Hugo Ahlberg and Simen Brekken. Kudos!

See also: