21 Ridiculously Impressive HTML5 Canvas Experiments
HTML5 is the thing to talk about these day. Today, we have a collection of some ridiculously impressive HTML5 canvas-based experiments that will make you say, “Wow!” Let’s take a peek at some of the latest, cutting edge examples out there.
1. 8 Bit Color Cycle
2. Particle Letter Animation
3. Cloth Experiment
This is one of the best canvas-based experiments.
4. Particle System
This is one of my favorites — absolutely amazing!
5. Strange Attractors
This example generates beautiful fractals, like the ones generated by Apophysis. Be sure to tick the composite :) .
6. Canvas Nebula
7. Bomomo
8. Liquid Particles
9. Sinous
This is a really fun game; is it not as easy as it looks!
10. Water in HTML5
11. Blob
12. Magnetic System
13. Trail
14. Particles
15. Shattering Box Physics Simulation
This incredible example depicts real world physics in action.
16. Flower Power
Try to guess the word. :P
17. 9Elements Particle Play
This is a beautiful example which demonstrates audio and canvas in action.
18. Beauty of Maths
19. Tree
20. Cloth Simulation
21. Arcade Fire
So what do you think? Getting your own ideas for a neat canvas application? Well, now you have more than one reason to create HTML5 apps: CodeCanyon just launched an HTML5 category! Have fun!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Why Conway’s Game of Life? Well, Conway’s Game of Life is a very simple cellular automaton – the problem space is small enough to allow you to only focus on the HTML5 canvas tag while still including sufficient elements to make for both an interesting and valid learning experience.
Check it out at: http://www.quesucede.com/public/gameoflife/index.html
Regards,
Brett Kromkamp
My site http://catfan.me also using Html5 canvas technology now, I hope you can put my canvas experiment on this page!
PS:left click the sky to add more cloud, double click to clear up. You also can see FPS on the left top to test the performance of web browser.
Stop spamming with your crappy site. Thanks.
I think those are all examples I saw 5 years ago when processing came out. Actually I think they are just ports from Processing to Processing.js
Very awesome!
Поздравляем всех с прошедшими праздниками и дарим скидки !
Very awesome!!! and lots of things in html5 canvas example is there and also unbelievable with canvas like flash. So i am very impressed by html5 canvas with javascript.
It is now easier to produce canvas drawings check out https://sites.google.com/site/canvasdraw/
I prefer the Canvas Tools project that I’m working on! See it at http://www.davidlindsley.com/canvastools.htm.
I’m still adding features, but you can not only create shapes, but with my Canvas Font Maker, you can quickly and easily add gorgeous fonts to your canvas page.
The Cloth Simulation and Blob are absolutely insane!
All the people here defending flash and saying the canvas tag is nothing to get excited about, you forget one thing. Flash costs LOTS OF MONEY and you must have a proprietary plugin to run it. We are all well aware that flash can do all the above stuff. However the fact that this stuff is now possible with little more than a text editor and a modern browser and some javascript skills has sealed the fate of flash for most of its current uses. The longer time goes on the better and better the javascript libraries for html 5 will get until they can surpass flash altogether.
Check out Picozu at http://www.picozu.com/editor it’s pretty close to a HTML5 Adobe Photoshop clone.
I found CanvaMap, a canvas map tool which also serves as an image zoomer/navigator at
http://blog.fdev.eu/canvamap/
here is one I made based on “8. Liquid Particles” code (with authors permission of course): http://swarm.cmikavac.net/
Here is an HTML5 canvas demo that displays a graphical phone/email directory:
http://www.miabellallc.com/html5demo/
Businesses and other organizations could incorporate this into their online or internal address books.