Fractal Generator

fractal.ts

enum Move {
    down = 0,
    right = 1,
    up = 2,
    left = 3
}

class Fractal {

    constructor(public points = [Move.down, Move.right, Move.up]) {
    }

    public grow() {
        let tl = this.copy().rotate().reverse();
        let bl = this.copy();
        let br = this.copy();
        let tr = tl.copy().rotate().rotate();
        this.points = [].concat(tl.points, Move.down, bl.points, Move.right, br.points, Move.up, tr.points);
    }

    private copy() {
        return new Fractal(this.points.map(p => p));
    }

    private reverse() {
        // down <-> up, left <-> right
        this.points = this.points.map(p => (p + 2) % 4).reverse();
        return this;
    }

    private rotate() {
        // down -> right -> up -> left -> down
        this.points = this.points.map(p => (p + 1) % 4);
        return this;
    }

}

class Pen {
    private _down: boolean;
    private _x: number;
    private _y: number;
    private ctx: CanvasRenderingContext2D;

    constructor(public canvas: HTMLCanvasElement) {
        let ctx = this.ctx = canvas.getContext("2d");
        [this._x, this._y] = [canvas.width / 2,canvas.height/2]; 
        ctx.moveTo(this._x, this._y);
    }

    goto(x, y) {
        if (this._down) {
            this.ctx.lineTo(x, y);
        } else {
            this.ctx.moveTo(x, y);
        }
        this.ctx.stroke();
        this._x = x;
        this._y = y;
    }

    get down() {
        return this._down;
    }

    set down(v) {
        this._down = v;
    }

    move(x, y) {
        this.goto(this._x + x, this._y + y);
    }
}

function go() {

    let canvas = <HTMLCanvasElement>document.getElementById("canvas");
    let pen = new Pen(canvas);
    pen.down = true;

    let fractal = new Fractal();
    for (let i=0; i<4; i++) fractal.grow();
    let stepSize = 20;
    fractal.points.forEach(p => {        
        switch (p) {
            case Move.down:
                console.log("down");
                pen.move(0, stepSize);
                break;
            case Move.right:
                console.log("right");
                pen.move(stepSize, 0);
                break;
            case Move.up:
                console.log("up");
                pen.move(0, -stepSize);
                break;
            case Move.left:
                console.log("left");
                pen.move(-stepSize, 0);
                break;
        }
    });

}

window.onload = go;

The idea is generate ArcGIS Routing and Roads and Highways test data using fractals and consume both services within Portal for ArcGIS for a POC trifecta.