Canvas Worms

by secretgspot

HTML

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

CSS

body{
    padding:0px;margin:0px;
}
#c{
    background-color: #999;
    background: -webkit-gradient(radial, center center, 50, center center, 400, from(#fff), to(#888));
    background: -moz-radial-gradient(#fff, #888);
}

JavaScript

// forked from demouth's "worms" http://jsdo.it/demouth/wo3Y
var FL = 250;
var Point3D = function (x,y,z) {
    this.x = typeof x == "undefined" ? 0 : x;
    this.y = typeof y == "undefined" ? 0 : y;
    this.z = typeof z == "undefined" ? 0 : z;
    this.ax = 0.10;
    this.ay = 0.10;
    this.az = 0.10;
    this.fl = FL;
};
Point3D.prototype = {
    getPosition2D : function(){
        var scale = this._getScale2D();
        return {x: this.x * scale , y: this.y * scale };
    },
    _getScale2D : function (){
        return this.fl/(this.fl +this.z);
    },
    setRandom : function (r){
        this.x = r * 2 * Math.random() - r;
        this.y = r * 2 * Math.random() - r;
        this.z = r * 2 * Math.random() - r;
        return this;
    },
    setRandomAccel : function (r){
        this.ax = r * 2 * Math.random() - r;
        this.ay = r * 2 * Math.random() - r;
        this.az = r * 2 * Math.random() - r;
        return this;
    }
};
var Line = function (p1,p2){
    this.p1 = p1;
    this.p2 = p2;
};
Line.prototype = {
    getPositionZ : function(){
        return (this.p1.z + this.p2.z) * 0.5;
    },
    draw : function(context,centerX,centerY){
        centerX = typeof centerX == "undefined" ? 0 : centerX;
        centerY = typeof centerY == "undefined" ? 0 : centerY;
        z = this.getPositionZ();
        if(z<-200) return;
        point1 = this.p1.getPosition2D();
        point2 = this.p2.getPosition2D();
        context.beginPath();
        context.lineCap = 'round';
        lineWidth = FL/(FL+z);
        context.lineWidth = lineWidth * lineWidth * 20;
        context.strokeStyle = 'rgb(0,'+parseInt(lineWidth*50)+', '+parseInt(lineWidth*100)+')';
        context.moveTo(point1.x + centerX ,point1.y + centerY);
        context.lineTo(point2.x + centerX ,point2.y + centerY);
        context.stroke();
    }
};
var Warm = function() {
    
    var i = 0
        l = 6,
        points = [],
        lines = []
    ;
    this.l = l;
    this.points =...