periodic family of square tilings

README.md

Square-Spirals taken from Danny Calegari's blog Mathematics Professor at U Chicago.

I ported graphics from the Postscript language (which your printer speaks) to d3.js (jsFiddle)

Calegari himself took this graphic from Richard Kenyon & was probably done in Mathematica.

Kenyon took the graphic from a paper by William Tutte in 1948.

index.html

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
window.onload = function(){
var x0 = 100,
    y0 = 100;

var r = 50,
    theta = 0.2;

var tiling = d3.select("body").append("svg")
    .attr("width", 500)
    .attr("height", 500);

var N = 10;

var lineFunction = d3.svg.line()
    .x(function (d) {
    return d.x;
})
    .y(function (d) {
    return d.y;
})
    .interpolate("linear");

function sq(x0, y0, dx, dy) {
    return lineFunction([{
        "x": x0,
        "y": y0
    }, {
        "x": x0 + dx,
        "y": y0
    }, {
        "x": x0 + dx,
        "y": y0 + dy
    }, {
        "x": x0,
        "y": y0 + dy
    }, {
        "x": x0,
        "y": y0
    }]);
}

setInterval(

function () {
    theta += 0.025;
    a = r * Math.cos(2 * 3.14159 * theta / 4),
    b = r * Math.sin(2 * 3.14159 * theta / 4);

    d3.selectAll('rect').remove();
    d3.selectAll('path').remove()
    v = [a, b],
    w = [-b, a];

    for (var j = -1 * N; j < N; j++) {
        for (var i = -1 * N; i < N; i++) {

            tiling.append("path").attr("d", sq(
            x0 + i * v[0] + j * w[0],
            y0 + i * v[1] + j * w[1],
            a, a))
                .attr("fill", "#DDFFDD")
                .attr("stroke-width", 2)
                .attr("stroke", "black");
            tiling.append("path").attr("d", sq(
            a + x0 + i * v[0] + j * w[0],
            y0 + i * v[1] + j * w[1],
            b, b))
                .attr("fill", "#FF6666")
                .attr("stroke-width", 2)
                .attr("stroke", "black");

        }
    }
}, 100); }
</script>