JavaScript - 数学 - 幾何図形とフラクタルを描画(正方形に円を詰める)

Pythonからはじめる数学入門
原著

開発環境

• OS X El Capitan - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• D3.js (JavaScript Library)
• kjs-array (JavaScript Library)
• Safari(Web browser)
• JavaScript 第6版 (David Flanagan(著)、村上 列(翻訳)、オライリージャパン)(参考書籍)
• JavaScriptリファレンス 第6版(David Flanagan(著)、木下 哲也(翻訳)、オライリージャパン)(参考書籍)

Pythonからはじめる数学入門 (Amit Saha (著)、黒川 利明 (翻訳)、オライリージャパン)の6章(幾何図形とフラクタルを描画)、6.4(プログラミングチャレンジ)、問題6-1(正方形に円を詰める)をJavaScript(とarray.js)で取り組んでみる。

問題6-1(正方形に円を詰める)

コード(Emacs)

HTML5

<div id="graph0"></div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script src="array.js"></script>
<script src="sample1.js"></script>

JavaScript

(function () {
    'use strict';
    var width = 600,
        height = 600,
        padding = 50,
        
        div_graph = document.querySelector('#graph0'),
        drawCircles;

    drawCircles = function () {
        var svg,
            xscale,
            yscale,
            xaxis,
            yaxis,
            points = [],
            len,
            xs = range(1.5, 5, 1),
            ys = range(1.5, 5, 1),
            r,
            circles,
            i,
            ids = [];

        ys.forEach(function (y) {
            xs.forEach(function (x) {
                points.push([x, y]);
            });
        });
        
        svg = d3.select('#graph0')
            .append('svg')
            .attr('width', width)
            .attr('height', height);
        
        xscale = d3.scaleLinear()
            .domain([1.0, 5.0])
            .range([padding, width - padding]);
        yscale = d3.scaleLinear()
            .domain([1.0, 5.0])
            .range([height - padding, padding]);
        xaxis = d3.axisBottom(xscale);
        yaxis = d3.axisLeft(yscale);

        r = xscale(0.5) - xscale(0.0);

        svg.append('rect')
            .attr('x', padding)
            .attr('y', padding)
            .attr('width', width - 2 * padding)
            .attr('height', height - 2 * padding)
            .attr('fill', 'yellow')
            .attr('stroke', 'blue');

        svg.append('g')
            .attr('transform',
                  'translate(0, ' + (height - padding) + ')')
            .call(xaxis);
        svg.append('g')
            .attr('transform',
                  'translate(' + padding + ', 0)')
            .call(yaxis);

        i = 0;
        ids.push(setInterval(function () {
            // select
            circles = svg.selectAll('circle')
                .data(points.slice(0, i + 1));

            // enter
            circles.enter()
                .append('circle')
                .attr('cx', function (d) {
                    return xscale(d[0]);
                })
                .attr('cy', function (d) {
                    return yscale(d[1]);
                })
                .attr('r', r)
                .attr('fill', 'green')
                .attr('stroke', 'blue');

            // update
            circles.transition()
                .duration(2000)
                .attr('cx', function (d) {
                    return xscale(d[0]);
                })
                .attr('cy', function (d) {
                    return yscale(d[1]);
                })
                .attr('r', r)
                .attr('fill', 'green')
                .attr('stroke', 'blue');
            
            i += 1;
            if (i === points.length) {
                ids.forEach(function (id) {
                    clearInterval(id);
                });
                ids = [];
            }
        }, 1000));
    };

    drawCircles();
}());