Fur ball from Anvaka

Wrote this guy during my flight form NYC to Moscow :)

by Umar

HTML

<div class='about'>
    (C) 2012 Andrei Kashcha. Ported this guy from <a href='http://wonderfl.net/c/7au5' target='_blank'>Flash Version</a><br/>
<a href="https://twitter.com/anvaka" class="twitter-follow-button" data-show-count="false">Follow me</a>
           <iframe allowtransparency="true" frameborder="0" scrolling="no"
               id='twitterShare'
               src="http://platform.twitter.com/widgets/tweet_button.html?counturl=http%3A%2F%2Fjsfiddle.net%2Fanvaka%2FFsjej%2Fshow%2F&text=Fur%20ball%20in%20WebGL&via=anvaka"
               style="width:130px; height:20px;"></iframe>

</div>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

CSS

body { margin: 0px; width: 100%; height: 100%; position: absolute; }
.about { position : absolute; bottom: 4px; color: white; left: 10px}
.about a { color: orange; }

JavaScript

window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
    })();

    // The idea is taken from here: http://wonderfl.net/c/md93 and adapted for WebGL
    // by Andrei Kashcha ([email protected])
function marimo(graphics){
    var width = graphics.width || 468;
    var height = graphics.height || 468;
    var sphereR = 50;
    var particlesRate = 50;
    var hairJointsCount = 4;
    var particleVelocity = 14;
    var gravity = 2.2;
    var speedRandomRate = 1.0;
    var colorRandomRate = 0.0;
    
    var centerX = width/2.0;
    var centerY = height/2.0;
    
    var sphereColor = new Color(0, 0, 0, 1);
    var hairRootsColor = new Color(0.0, 0.0, 0.2, 1);
    var hairTipsBottomColor = new Color(0.4, 0.0, 0.5, 1);
    var hairTipsTopColor = new Color(0, 0.0, 0.3, 1);
    var speedX = [],
        speedY = [],

    createRandomSpeeds = function() {
        // Just precalculate random speed components to reuse on every frame
        for (var xri = 0; xri < particlesRate; xri++){
            var xAngle = Math.PI * xri / particlesRate;
            var r = Math.sin(xAngle) * sphereR;
            
            speedX[xri] = [];
            speedY[xri] = [];
            var sliceHairsCount = (particlesRate * 2 * r / sphereR) << 0;
            for (var zri = 0; zri < sliceHairsCount; zri++){
                speedX[xri][zri] = particleVelocity * speedRandomRate * (0.5 - Math.random());
                speedY[xri][zri] = particleVelocity * speedRandomRate * (0.5 - Math.random());
             }
        }
    },
    
    render = function () {
        graphics.beginRender();
        graphics.drawCircle(centerX, centerY,...