main.ts

/// <reference path="defs/easeljs.d.ts" />
/// <reference path="defs/stats.d.ts" />
/// <reference path="CustomShape.ts"/>
/// <reference path="Shape3D.ts"/>

module djankey {
    export class ShapesEffect {
        private canvas:HTMLCanvasElement;
        private stage:createjs.Stage;
        private canvas_rect:ClientRect;
        private shapes:Array<djankey.Shape3D> = [];
        private mouse_x:number;
        private mouse_y:number;
        private stats:Stats;

        constructor(canvasID:string) {
            this.canvas = <HTMLCanvasElement>document.getElementById(canvasID);
            if (!this.canvas || !this.canvas.getContext) {
                alert('HTML5 Canvas is not supported!');
            } else {
                this.init(canvasID);
            }
        }

        init = (id:string):void => {
            // stage
            this.stage = new createjs.Stage(this.canvas);

            //this.stage = new createjs.SpriteStage(id, false, false);
            //this.stage.updateViewport(this.canvas.width, this.canvas.height);
            this.stage.mouseChildren = false;
            this.stage.mouseEnabled = false;

            // stats
            this.stats = new Stats();
            this.stats.setMode(0);
            document.getElementById("stats").appendChild(this.stats.domElement);

            // pointer
            this.canvas_rect = this.canvas.getBoundingClientRect();
            this.canvas.addEventListener("mousemove", this.onMousemove, true);
            this.canvas.addEventListener("touchmove", this.onTouchmove, true);

            // update
            createjs.Ticker.timingMode = createjs.Ticker.RAF;
            createjs.Ticker.addEventListener("tick", this.update);
        }

        onMousemove = (event:any):void => {
            this.mouse_x = event.clientX - this.canvas_rect.left;
            this.mouse_y = event.clientY - this.canvas_rect.top;
            this.pointerMove();
        }

        onTouchmove = (event:any):void => {
            this.mouse_x = event.touches[0].clientX - this.canvas_rect.left;
            this.mouse_y = event.touches[0].clientY - this.canvas_rect.top;
            this.pointerMove();
        }

        pointerMove = ():void => {
            var s:djankey.Shape3D;
            var c:number = 3;
            var color:string = '#'+Math.floor(Math.random()*16777215).toString(16);     // http://www.paulirish.com/2009/random-hex-color-code-snippets/
            var cs:djankey.CustomShape;

            while(c-->0){
                cs = new djankey.CustomShape(color);
                s = new djankey.Shape3D(cs.cacheCanvas.toDataURL());
                this.stage.addChild(s);
                s.x = this.mouse_x;
                s.y = this.mouse_y;
                this.shapes.push(s);
            }
        }

        update = ():void => {
            var t:number = new Date().getTime();
            var s:djankey.Shape3D;

            for (var i:number = this.shapes.length - 1; i >= 0;i-- ) {
                s = this.shapes[i];
                s.update(t);
                if (s.power<=0) {
                    this.shapes.splice(i, 1);
                    if (s.parent) {
                        s.parent.removeChild(s);
                    }
                }
            }

            this.stage.update();
            this.stats.update();
        }
    }
}