thumb

8 Interesting HTML5 Experiments

HTML5 is still in its adolescence, but that hasn’t stopped web developers from experimenting with the technology. Thanks to new features, especially the canvas element, front-end developers are able to create complex images and interaction without the need for plugins such as Flash.

Here are 8 Interesting HTML5 Experiments, some more useful than others, of the capabilities of HTML5. To experience the demos you’ll need a modern browser such as Google Chrome.

Magnetic

html-5-experiment-1

Particles orbit around magnets which can be dragged around to create currents. The HTML5 canvas element is used for visual output.

Blowing up HTML5 video and mapping it into 3D space

html-5-experiment-2

I’ve been doing a bit of experimenting with the Canvas and Video tags in HTML5 lately, and found some cool features hiding in plain sight. One of those is the Canvas.drawImage() api call. Here is the description on the draft site.

Visualizing the World Cup

thumb

The visualization above is accomplished using html5 and css3 and by viewing it in a modern web browser. If you are using internet explorer all you’ll see is an unordered list!

Conductor in progress video

html-5-experiment-4

Tentatively titled Conductor, it recreates the New York subway system as a musical instrument. It’s currently built in HTML5 + Javascript. SVG was very useful, as I could create the design in Illustrator, then import the coordinates into Javascript.

Chrome Experiments – Arcade Fire

html-5-experiment-5

Choreographed windows, interactive flocking, custom rendered maps, real-time compositing, procedural drawing, 3D canvas rendering… this Chrome Experiment has them all. “The Wilderness Downtown” is an interactive interpretation of Arcade Fire’s song “We Used To Wait” and was built entirely with the latest open web technologies, including HTML5 video, audio, and canvas.

Rumpetroll

html-5-experiment-6

A massive multiplayer experiement done in HTML5/Canvas/JS and magical websockets. Rumpetroll is norwegian, but probably not what you think

The Cloth Simulation

html-5-experiment-7

What makes this simulation special is the speed at which everything is computed. Javascript (the language this is written in) is not exactly the most efficient language for this type of computation. This being said, much time was spent squeezing out every little detail that slows things down.

Ball Pool

html-5-experiment-8

Mr Doob, or Ricardo Cabello, is a designer/developer that likes to play with the possibilities on the web. He’s done a variety of work, but his latest is an HTML5 experiment that allows you create a pool of balls and shake them when you shake your browser window.

Published by

Joaquin

I am web designer/developer, creative blogger, wordpress user & founder of idesignow.

Leave a Reply

Your email address will not be published. Required fields are marked *