JavaScript - 数学 - 幾何図形とフラクタルを描画(シェルピンスキーの三角形(Sierpinski gasket))

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-2(シェルピンスキーの三角形(Sierpinski gasket))をJavaScript(とarray.js)で取り組んでみる。

問題6-2(シェルピンスキーの三角形(Sierpinski gasket))

コード(Emacs)

HTML5

<div id="graph0"></div>
<label for="nums">
  点の個数:
</label>
<input id="nums0" type="number" min="1" step="1" value="1000">

<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="sample2.js"></script>

JavaScript

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

        transform1,
        transform2,
        transform3,
        transforms,
        getIndex,
        getPoints,
        draw;

    transform1 = function (points) {
        var x = points[0],
            y = points[1];
        
        return [0.5 * x, 0.5 * y];
    };
    transform2 = function (points) {
        var x = points[0],
            y = points[1];
        
        return [0.5 * x + 0.5, 0.5 * y + 0.5];
    };
    transform3 = function (points) {
        var x = points[0],
            y = points[1];
        
        return [0.5 * x + 1, 0.5 * y];
    };
    transforms = [transform1, transform2, transform3];

    getIndex = function () {
        var p = Math.random(),
            i;

        if (p < 1 / 3) {
            i = 0;
        } else if (p < 2 / 3) {
            i = 1;
        } else {
            i = 2;
        }
        return i;
    };
    getPoints = function () {
        var n = parseInt(input_nums.value, 10),
            point = [0, 0],
            points = [point];

        range(n - 1).forEach(function () {
            point = transforms[getIndex()](point);
            points.push(point);
        });
        return points;
    };
    draw = function () {
        var xscale,
            yscale,
            xaxis,
            yaxis,
            points = getPoints(),
            xs = points.map(function (point) { return point[0]; }),
            ys = points.map(function (point) { return point[1]; }),
            svg;

        xscale = d3.scaleLinear()
            .domain([d3.min(xs), d3.max(xs)])
            .range([padding, width - padding]);
        yscale = d3.scaleLinear()
            .domain([d3.min(ys), d3.max(ys)])
            .range([height - padding, padding]);
        xaxis = d3.axisBottom().scale(xscale);
        yaxis = d3.axisLeft().scale(yscale);

        div_graph.innerHTML = '';
        svg = d3.select('#graph0')
            .append('svg')
            .attr('width', width)
            .attr('height', height);
        
        svg.selectAll('circle')
            .data(points)
            .enter()
            .append('circle')
            .attr('cx', function (d) {
                return xscale(d[0]);
            })
            .attr('cy', function (d) {
                return yscale(d[1]);
            })
            .attr('r', 1)
            .attr('fill', 'green');
        
        svg.append('g')
            .attr('transform', 'translate(0, ' + (height - padding) + ')')
            .call(xaxis);
        svg.append('g')
            .attr('transform', 'translate(' + padding + ', 0)')
            .call(yaxis);
    };

    draw();

    input_nums.onchange = draw;
}());

点の個数: