main.ts

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

module djankey {
    export class DelaunayTriangulation {
        private canvas:HTMLCanvasElement;
        private stage:createjs.Stage;
        private stats:Stats;
        private w:number;
        private h:number;

        private disp:createjs.Shape;
        private delaunay:djankey.Delaunay;
        private indices:Array<number> = [];
        private points:Array<createjs.Point> = new Array<createjs.Point>(250);


        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.mouseChildren = false;
            this.stage.mouseEnabled = false;

            this.w = this.canvas.width;
            this.h = this.canvas.height;

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

            this.disp = new createjs.Shape();
            this.stage.addChild(this.disp);

            this.delaunay = new djankey.Delaunay();
            this.reset();

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

        reset = ():void => {
            this.disp.graphics.clear();
            this.disp.graphics.beginFill("#CC0000");

            var p:createjs.Point;
            for (var i:number = 0; i < this.points.length; i++)
            {
                if (this.points[i] == null) this.points[i] = new createjs.Point( Math.random() * this.w, Math.random() * this.h );
                else {
                    this.points[i].x += Math.sin(i);
                    this.points[i].y += Math.cos(i);
                    while (this.points[i].x > this.w) this.points[i].x -= this.w;
                    while (this.points[i].x < 0) this.points[i].x += this.w;
                    while (this.points[i].y > this.h) this.points[i].y -= this.h;
                    while (this.points[i].y < 0) this.points[i].y += this.h;
                }

                p = this.points[i];
                this.disp.graphics.moveTo(p.x, p.y).drawCircle(p.x, p.y, 2);
            }

            this.disp.graphics.endFill().setStrokeStyle(1, "round").beginStroke("#DDDDDD");
            this.indices = this.delaunay.compute(this.points);
            this.delaunay.render( this.disp.graphics, this.points, this.indices);
        }

        update = ():void => {
            this.reset();
            this.stage.update();
            this.stats.update();
        }
    }
}