Canvas City

by secretgspot

HTML

<canvas id='world'></canvas>

CSS

body{
    padding:0;
    margin:0;
}
#world{
    display:block;
}

JavaScript

!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!
function(d, w){
    var FPS = 60;
    var TRAIL_PLAN = ["u","r","d","b","r","c"];
    pointCopy = function(src, dst){
        dst.x = src.x;
        dst.y = src.y;
        dst.z = src.z;
        return dst;
    };
    Trail = function(pos, t, plan_i){
        this.pos={x:0,y:0,z:0};
        this.start={x:0,y:0,z:0};
        this.goal={x:0,y:0,z:0};
        this.start_time;
        this.take_time;
        this.vertexes = [];
        pointCopy(pos, this.pos);
        pointCopy(pos, this.start);
        pointCopy(pos, this.goal);
        this.plan_i = plan_i%TRAIL_PLAN.length || 0;
        this.sz = pos.z;
        this.setNextGoal(t);
    };
    Trail.prototype.setNextGoal = function(t){
        pointCopy(this.goal, this.start);
        this.plan_i = (this.plan_i+1)%TRAIL_PLAN.length;
        switch(TRAIL_PLAN[this.plan_i]){
            case "r":
                this.goal.x += Math.random()*100+50;
                break;
            case "u":
                this.goal.y -= Math.random()*200+100;
                break;
            case "d":
                this.goal.y = 0;
                break;
            case "b":
                this.goal.z += Math.random()*1;
                break;
            case "c":
                this.goal.z = this.sz;
                break;
            default:
                break;
        }
        this.start_time = t;
        this.take_time = 100+Math.random()*100;
        this.vertexes.push(pointCopy(this.start, {x:0,y:0,z:0}));
        if(this.vertexes.length > 100){
            this.vertexes.splice(0,this.vertexes.length-100);
        }
    };
    Trail.prototype.update = function(t){
        quadIn(
            t-this.start_time,
            this.start,
            this.goal,
            this.take_time,
            this.pos
            );
        if(t-this.start_time > this.take_time){
            this.setNextGoal(this.start_time+this.take_time);
            this.update(t);
       ...