main.ts

/// <reference path="defs/PIXI.d.ts" />
/// <reference path="defs/stats.d.ts" />
/// <reference path="Shape3DImage.ts"/>
/// <reference path="CustomShape.ts"/>

module djankey {
    export class ShapesEffect {
        private canvas:HTMLElement;
        private stage:PIXI.Stage;
        private renderer:any;
        private shapes:Array<djankey.Shape3DImage> = [];
        private stats:Stats;
        private canvas_rect:ClientRect;
        private mouse_x:number;
        private mouse_y:number;

        constructor(canvasID:string) {
            this.canvas = <HTMLElement>document.getElementById(canvasID);
            this.init();
        }

        init = () => {
            this.stage = new PIXI.Stage(0x000000);
            this.stage.interactive = true;
            this.renderer = PIXI.autoDetectRenderer(465, 465);
            this.renderer.view.style.position = "absolute";
            this.renderer.view.style.top = "0px";
            this.renderer.view.style.left = "0px";
            this.canvas.appendChild(this.renderer.view);

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

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

            requestAnimFrame(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 c:number = 3;
            var color:number = Math.random()*0xFFFFFF<<0;
            var cs:CustomShape;
            var s:Shape3DImage;

            while(c-->0){
                cs = new djankey.CustomShape(color);
                s = new djankey.Shape3DImage(cs.generateTexture(), Math.floor(Math.random()*1000));
                this.stage.addChild(s);
                s.x = this.mouse_x;
                s.y = this.mouse_y;
                this.shapes.push(s);
            }
        }

        update = ():void => {
            requestAnimFrame(this.update);

            var t:number = new Date().getTime();
            var s:djankey.Shape3DImage;

            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);
                    s.parent.removeChild(s);
                }
            }

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