10 Crazy HTML5 and JS Experiment Showcase

Sam Deering

Check out our collection of some of the crazy HTML5 and JavaScript experiments that demonstrate the performance of the framework in rendering a variety of cool interactive effects. Take note though that most of the demos here run smoothly with Google Chrome and Firefox but not in IE as HTML5 is not yet fully supported by it. Have fun!

Related Posts:

1. Canvas Sphere

Canvas Sphere by Emil Korngold renders a 2D projection of the 3D points of a sphere using a tiny sprite 3D engine. The demo uses z-sorting and alpha motion blurring to give the sense of 3D and rotation. Check out the awesome demo!


Canvas Sphere

Source
Demo

2. Marbles

Simple physics demo using the freshly released A3 WebGL Engine. Make sure to use Chrome to be able to see the demo. Pretty cool!


Marbles

Source
Demo

3. Noise Field

Particle trails via Perlin noise. Move mouse to change particle motion. Click to randomize parameters.


Noise Field

Source
Demo

4. Fishbowl

An amazing HTML 5 test, created by Microsoft to test the performance capability of your browser. Try it and see how many fishes you can run.


Fishbowl

Source + Demo

5. Sticky Thing

Throw it and see if it sticks.


Sticky Thing

Source
Demo

6. Breathing Galaxies

Is a hypotrochoid with dynamically changing color and diameter powered by JavaScript. You can use the keyboard to change shapes mid-stream, or move the mouse to create a new shape.


Breathing Galaxies

Source
Demo

7. Flower Power

Another experiment inspired by nature – simple drawing tool with flowers as brushes using bezier curves.


Flower Power

Source
Demo

8. One Hour Per Second

Holy nyans! YouTube now has one hour of video uploaded to the site every second. To put that incredible figure in context, Youtube created an HTML5 site with some figures to compare it to — for example, how many nyan cat “nyans” there are in one day (e.g. 24 seconds of uploads)? Answer: 345,600!


One Hour Per Second

Source
Demo

9. Asteroid Belt

HTML5 animation effect on rendered on a photo.


Asteroid Belt

Source + Demo

10. Graph Layout

An interactive force-directed graph layout.


Graph Layout

Source
Demo

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.