JSFiddle - React, Tailwind, and code Playground

by Takehiko Murakawa

HTML

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

JavaScript

function Turtle(unitlen) {
    this.x = this.xmin = this.xmax = 0;
    this.y = this.ymin = this.ymax = 0;
    this.poly = Array();
    this.angle = 0;
    this.unitlen = unitlen;
}

Turtle.prototype.add = function (param) {
    var angles = param;
    if (!Array.isArray(param)) angles = [param];

    for (var i = 0; i < angles.length; i++) {
        this.angle += angles[i];
        this.x += this.unitlen * Math.cos(this.angle / 180.0 * Math.PI);
        this.y += -this.unitlen * Math.sin(this.angle / 180.0 * Math.PI);
        this.poly.push(Array(this.x, this.y));
    
        if (this.x < this.xmin) this.xmin = this.x;
        if (this.x > this.xmax) this.xmax = this.x;
        if (this.y < this.ymin) this.ymin = this.y;
        if (this.y > this.ymax) this.ymax = this.y;
    }
}

Turtle.prototype.getPath = function () {
    var path = "M 0 0";
    for (var i = 0; i < this.poly.length; i++) {
        path += " L " + this.poly[i][0] + " " + this.poly[i][1];
    }
    path += " Z";
    return path;
}

Turtle.prototype.getRegion = function (margin) {
    obj = {
        xmin: this.xmin,
        xmax: this.xmax,
        ymin: this.ymin,
        ymax: this.ymax,
        width: this.xmax - this.xmin + margin * 2,
        height: this.ymax - this.ymin + margin * 2,
        xtrans: margin - this.xmin,
        ytrans: margin - this.ymin
    };
    //alert([obj.xmin, obj.xmax, obj.ymin, obj.ymax, obj.width, obj.height, obj.xtrans, obj.ytrans].join(", "));
    return obj;
}

function move1() {
    /* 正三角形, 正方形, 正五角形, 正六角形 */
    var t = new Turtle(80);
    t.add(0);
    t.add([120, 120, 120]);
    t.add([90, 90, 90, 90]);
    t.add([-72, -72, -72, -72, -72]);
    t.add([60, 60, 60, 60, 60]);
    return t;
}

function move2() {
    /* 6つの正五角形 */
    var t = new Turtle(80);
    t.add([36, 72, 72, 72, 72]);
    t.add([-36, 72, 72, 72]);
    t.add([-72 * 2, 72, 72, 72]);
    t.add([-72 * 2, 72, 72, 72]);
    t.add([-72 * 2, 72, 72, 72]);
    t.add([-72 * 2, 72, 72, 72]);
   ...