八大疯狂的HTML5 Canvas及WebGL动画效果——8 CRAZY ANIMATIONS WITH WEBGL AND HTML5 CANVAS【收藏】

HTML5, WebGL and Javascript have changed the way animation used to be. Past few years, we can only achieve extraordinary web animation by using Flash and Java Applet. It's possible to create insane effects and crazy animations with scripting and render it on the browser. There are a few reasons that make this achievable:

• Poweful processing power. Our computers are too powerful and sufficient enough to render most complicated animation.
• Modern browser and web technologies. Modern browsers such as FF, Chrome, Safari and IE10 and support of new web technologies such as Canvas, SVG and WebGL.
• Fast Internet connection. Some experiments require live streaming of data and preloaded resources.

We have found 8 stunning effects made with WebGL, HTML5 Canvas and Javascript. They are simply mind-blowing, crazy and very creative. For example, sticky thing demonstrates the gravity physic! However, keep in mind that these are experiment only and probably you won't see it used commercially because legacy browsers won't able to run it, and the web technologies are quite new. Anyway, it's good to see what the web capable to do, and certainly look forward what will happen in a few years time. Best view with Chrome and you can try it with Safari, Firefox and IE10 as well.

• Sticky Thing

  Throw it and see if it sticks.

  

• Animated Volume Particles

  Use float textures and frame buffer objects to simulate 3D particles flying through the volume an animated animal. Click and move the mouse!

  

• Voxels Liquid

  3D representation of this classic 2D water effect algorithm.

  

• Pulpo

  WebGl & tree.js Rules! Animated Star ray.

  

• Wormz

  HTML5 Canvas Experiment with all tiny little worms

  

• Crazier Tentacles

  This is a physics-based version of Crazy Tentacles. It uses the same formula to generate the target shape and elastic rod physics to make it go towards that shape.

  

• Visual Random

  Multiple levels of random: where the voxel drops, the color of the voxel, the highest stack generated by the random drop. All of these things combined create an interesting perspective of what random actually looks like.

  

• Conductor

  At www.mta.me, Conductor turns the New York subway system into an interactive string instrument. Using the MTA’s actual subway schedule, the piece begins in realtime by spawning trains which departed in the last minute, then continues accelerating through a 24 hour loop. The visuals are based on Massimo Vignelli’s 1972 diagram.