miaou.clouds.js

(function() {
	// setting it up so you can view it 
	document.documentElement.style.height = '100%';
	left.style.background = 'Transparent';
	right.style.background = 'Transparent';
	document.body.style.background = 'linear-gradient(to bottom, #F5F5F5 0%,#1E90FF 100%)';
}())

Math.Tau = Math.PI * 2;
// utils
function apply_styles(elms, styles) {
    !Array.isArray(elms) && (elms = [elms]);
    for( var i = 0; i < elms.length; i++ ) {
        for( var key in styles ) {
            if( styles.hasOwnProperty(key) ) {
                elms[i].style[key] = styles[key];
            }
        }
    }
}

var canvas = document.createElement('canvas'),
	context = canvas.getContext('2d'),
	bg = document.body,
	height = canvas.height = bg.offsetHeight,
	width = canvas.width = bg.offsetWidth;

var clouds = [];
init();
function init() {
	for( var i = 0; i < 24; i++ ) {
		var cloud = {
			x: Math.random() * width * 1.5 - ( width * .25 ),
			y: Math.random() * ( height / 7.5 ) + ( height / 7.5 ),
			r: Math.random() * 20 + 20,
			a: Math.random() * Math.Tau,
			o: Math.random() * 0.15 + 0.15,
			c: Math.random() * 15 + 35
		};
		cloud.seeds = [].map.call(new Uint16Array(cloud.c),Math.random);
		var icanvas = document.createElement('canvas'),
			icontext = icanvas.getContext('2d');
		icanvas.height = icanvas.width = cloud.r * 2;
		var grad = icontext.createRadialGradient(cloud.r, cloud.r, 0, cloud.r, cloud.r, cloud.r);
		grad.addColorStop(0, 'rgba(255, 255, 255, ' + cloud.o + ')');
		grad.addColorStop(1, 'rgba(255, 255, 255, 0)');
		icontext.fillStyle = grad;
		icontext.beginPath();
		icontext.arc(cloud.r, cloud.r, cloud.r, 0, Math.Tau, true);
		icontext.fill();
		icontext.closePath();
		cloud.render = function(context) {
			for( var i = 0; i < this.c; i++ ) {
				var x = this.x - this.r + this.seeds[i] * this.r * Math.cos(this.a+i) * Math.PI;
				var y = this.y - this.r + this.seeds[i] * this.r * Math.sin(this.a+i) * (Math.PI/2);
				context.drawImage(this.img, x, y);
			}		
		};
		cloud.img = icanvas;
		clouds.push(cloud);
	}
    apply_styles(canvas, {
        'position':'absolute',
        'top': '0px',
        'left': '0px',
        'bottom': '0px',
        'right': '0px'
    });
    bg.insertBefore(canvas, bg.firstChild);
	render();
	update();
};

function render() {
	requestAnimationFrame(render);
	context.clearRect(0,0,width,height);
	for( var i = 0, l = clouds.length; i < l; i++ ) {
		clouds[i].render(context);
	}
}

function update() {
	for( var i = 0, l = clouds.length; i < l; i++ ) {
		clouds[i].x -= 0.119;
		if( clouds[i].x < clouds[i].r * -4 ) {
			clouds[i].x = width + clouds[i].r * 4;
		}
	}
	setTimeout(update, 1000/60);
}