snaky-particles/js/views/particle.js

(function(window) {
    function ParticleView(modelObject){
        this.model = modelObject;
		var dp = this.model.draw_properties;
		var cs = window.cell_size;
        this.graphics
			.beginRadialGradientFill(dp.colors, dp.ratios, 
				dp.inner_center.x * cs, dp.inner_center.y * cs , dp.inner_radius * cs,
				dp.outer_center.x * cs, dp.outer_center.y * cs, dp.outer_radius * cs)
			.drawCircle(0, 0, cs * dp.outer_radius);
    }

    ParticleView.prototype = new createjs.Shape();

    ParticleView.prototype.update = function(){
        this.x = cell_size * this.model.position.x + cell_size / 2;
        this.y = cell_size * this.model.position.y + cell_size / 2;
    }

    ParticleView.prototype.animate = function(){
        if(this.model.target){
            var own_view = this;
            this.update();
            this.update = function(){};
            createjs.Tween.get(this).to(
                {
                    x: cell_size * this.model.target.x + cell_size / 2,
                    y: cell_size * this.model.target.y + cell_size / 2 
                },
                // We do not want to have magnetically curved particles for now
                // {guide:{ path:[0,0, 0,200,200,200, 200,0,0,0] }},
                this.model.target.time - this.model.start_time
            ).call(function(){
                own_view.update = ParticleView.prototype.update;
                own_view.model.position.x = own_view.model.target.x;
                own_view.model.position.y = own_view.model.target.y;
            });
        }
    }

    window.ParticleView = ParticleView;
}(window));