8 Crazy Animations With WebGL and HTML5 Canvas

Posted by & filed under Tech, Web Development. 101,766 views

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.

    Sticky thing

  • 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!

    Animated Volume particles

  • Voxels Liquid

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

    Voxels Liquid

  • Pulpo

    WebGl & tree.js Rules! Animated Star ray.

    Pulpo

  • Wormz

    HTML5 Canvas Experiment with all tiny little worms

    Wormz

  • 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.

    Crazier Tentacles

  • 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.

    Visual Random

  • 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.

    Conductor

SHARE IT

RELATED POSTS

5 Questions to Answer When Creating a Website for Your Business
Beautiful And Consistent Web Forms With Javascript Plugins
12 Minimal Portfolio Website With Subtle Animation Effect

COMMENTS