2016年9月1日木曜日

開発環境

開発環境

Pythonからはじめる数学入門 (Amit Saha (著)、黒川 利明 (翻訳)、オライリージャパン)の6章(幾何図形とフラクタルを描画する)、6.2(フラクタルを描く)、6.2.2(バーンスレイのシダを描く)をJavaScriptで取り組んでみる。

6.2.2(バーンスレイのシダを描く)

コード(Emacs)

HTML5

<div id="graph0"></div>
<label for="points0">
  点の数:
</label>
<input id="points0" 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="barnsley_fern.js"></script>

JavaScript

(function () {
    'use strict';
    var width = 600,
        height = 600,
        padding = 50,
        
        div_graph = document.querySelector('#graph0'),
        input_points = document.querySelector('#points0'),
        
        transform1,
        transform2,
        transform3,
        transform4,
        transform,
        getIndex,
        drawFern;

    transform1 = function (points) {
        var x = points[0],
            y = points[1];

        return [0.85 * x + 0.04 * y, -0.04 * x + 0.85 * y + 1.6];
    };
    transform2 = function (points) {
        var x = points[0],
            y = points[1];

        return [0.2 * x - 0.26 * y, 0.23 * x + 0.22 * y + 1.6];
    };
    transform3 = function (points) {
        var x = points[0],
            y = points[1];

        return [-0.15 * x + 0.28 * y, 0.26 * x + 0.24 * y + 0.44];
    };
    transform4 = function (points) {
        var y = points[1];

        return [0, 0.16 * y];
    };
    getIndex = function (probability) {
        var r = Math.random(),
            c_probability = 0,
            sum_probability = [],
            i,
            max;

        probability.forEach(function (p, i) {
            c_probability += p;
            sum_probability[i] = c_probability;
        });
        for (i = 0, max = sum_probability.length; i < max; i += 1) {
            if (r <= sum_probability[i]) {
                return i;
            }
        }
        return probability.length - 1;
    };
    transform = function (points) {
        var transformations = [transform1, transform2, transform3, transform4],
            probability = [0.85, 0.07, 0.07, 0.01],
            tindex = getIndex(probability),
            t = transformations[tindex],
            p = t(points);

        return p;
    };

    drawFern = function () {
        var n = parseInt(input_points.value, 10),
            i,
            point = [0, 0],
            points = [point],
            svg,
            xscale,
            xaxis,
            yscale,
            yaxis,
            points;

        div_graph.innerHTML = '';
        svg = d3.select('#graph0')
            .append('svg')
            .attr('width', width)
            .attr('height', height);

        xscale = d3.scaleLinear()
            .domain([-3, 3])
            .range([padding, width - padding]);
        yscale = d3.scaleLinear()
            .domain([0, 10])
            .range([height - padding, padding]);
        xaxis = d3.axisBottom().scale(xscale);
        yaxis = d3.axisLeft().scale(yscale);

        for (i = 0; i < n; i += 1) {
            point = transform(point);
            points.push(point);
        }
        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);
    };

    drawFern();

    input_points.onchange = drawFern;
}());

0 コメント:

コメントを投稿