2016年9月4日日曜日

学習環境/開発環境

線型代数入門 (松坂 和夫(著)、岩波書店)の第4章(複素数、複素ベクトル空間)、2(複素平面)、問7.を取り組んでみる。

問7.

それぞれの集合は、αを中心とする半径rの円の周上、閉包(円の周上の内部。

number.js で確認。

HTML5

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

<label for="real0">
  α =
</label>
<input id="real0" type="number" value="5">
<label for="imag0">
  +
</label>
<input id="imag0" type="number" value="10">i, 
<label for="radius0">
  r = 
</label>
<input id="radius0" type="number" min="1" value="5">

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

JavaScript

コード(Emacs)

(function () {
    'use strict';
    var width = 600,
        height = 600,
        padding = 50,

        div_graph = document.querySelector('#graph0'),
        input_real = document.querySelector('#real0'),
        input_imag = document.querySelector('#imag0'),
        input_radius = document.querySelector('#radius0'),
        inputs = [input_real, input_imag, input_radius],

        draw;

    draw = function () {
        var real = parseFloat(input_real.value),
            imag = parseFloat(input_imag.value),
            a = new Complex(real, imag),
            radius = parseFloat(input_radius.value),
            points = [],

            xmin = -1.5 * (Math.abs(real) + radius),
            ymin = -1.5 * (Math.abs(imag) + radius),
            min = Math.min(xmin, ymin),
            max = -min,

            svg,
            xscale,
            yscale,
            xaxis,
            yaxis;
        
        range(min, max, (max - min) / 100).forEach(function (y) {
            range(min, max, (max - min) / 100).forEach(function (x) {
                points.push([x, y]);
            })
        });

        div_graph.innerHTML = '';
        svg = d3.select('#graph0')
            .append('svg')
            .attr('width', width)
            .attr('height', height);
        xscale = d3.scaleLinear()
            .domain([min, max])
            .range([padding, width - padding]);
        yscale = d3.scaleLinear()
            .domain([min, max])
            .range([height - padding, padding]);

        xaxis = d3.axisBottom().scale(xscale);
        yaxis = d3.axisLeft().scale(yscale);

        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', 2)
            .attr('fill', function (d) {
                var z = new Complex(d[0], d[1]);

                if (z.sub(a).magnitude().le(radius)) {
                    return 'green';
                } else {
                    return 'yellow';
                }
            });

        svg.append('circle')
            .attr('cx', xscale(real))
            .attr('cy', yscale(imag))
            .attr('r', 2)
            .attr('fill', 'red');
        
        svg.append('g')
            .attr('transform', 'translate(0, ' + (height / 2) + ')')
            .call(xaxis);
        svg.append('g')
            .attr('transform', 'translate(' + (width / 2) + ', 0)')
            .call(yaxis);
    };

    draw();

    inputs.forEach(function (input) {
        input.onchange = draw;
    });
}());
i,

0 コメント:

コメントを投稿