Canvas Worms

by secretgspot

HTML

<canvas id="c" width="500" height="500"></canvas>

CSS

* {
  margin: 0;
  padding: 0;
}

JavaScript

var Blur=function(c){
	this.c=c;
	this.alpha=0.4;
	this.quality=5;
};
Blur.prototype={
	apply:function(blur){
		var c=this.c;
		var cx=c.getContext('2d');
		var cache=cx.globalAlpha;
		cx.globalAlpha=this.alpha;
		for(var i=this.quality;i>1;i--)this._apply(c,i/this.quality/blur);
		cx.globalAlpha=cache;
	},
	_apply:function(c,ratio){
		var cx=c.getContext('2d');
		var tc=document.createElement('canvas');
		var tcx=tc.getContext('2d');
		tc.width=~~c.width*ratio;
		tc.height=~~c.height*ratio;
		tcx.drawImage(c,0,0,tc.width,tc.height);
		cx.drawImage(tc,0,0,c.width,c.height);
	}
};

var c =document.getElementById('c');
var cx=c.getContext('2d');
var blur = new Blur(c);

var points=[];
for(var i=0,j=100; i<j; i++){
	points.push({x:Math.random()*500, y:Math.random()*500,r:Math.random()*Math.PI*2,s:0.5+Math.random()*4});
}

setInterval(function(){
	blur.apply(3);
	cx.globalAlpha=0.05;
	cx.fillStyle='#FFFFFF';
	cx.fillRect(0,0,500,500);
	cx.globalAlpha=1;
	cx.fillStyle='#000000';
	for(var i=0,j=points.length; i<j; i++){
		var p=points[i];
		p.x+=Math.sin(p.r)*p.s;
		p.y+=Math.cos(p.r)*p.s;
		p.r+=0.05;
		if(p.x>500||p.y>500||p.x<0||p.y<0){
			p.x=Math.random()*500;
			p.y=Math.random()*500;
		}
		cx.beginPath();
		cx.arc(p.x, p.y, 3, 0, Math.PI*2, false);
		cx.closePath();
		cx.fill();
	}
},50);