snaky-particles/js/views/particle.js

(function(window) {
    function ParticleView(modelObject){
        createjs.Shape.call(this);
        this.model = modelObject;
		this.model.view = this;
		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);
        // this.graphics.beginFill("red").drawCircle(0, 0, window.cell_size * 0.2 / 2);
        createjs.Tween.get(this, {loop: true})
            .to({ scaleX: 0.9, scaleY: 1.1 }, 200)
            .to({ scaleX: 1.1, scaleY: 0.9 }, 200);
    }

    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
				)
			.addEventListener("change", function(e){
				controller.hit_test(e, own_view.model);
				})
			.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));