2016年9月10日土曜日

学習環境/開発環境

数学読本〈3〉平面上のベクトル/複素数と複素平面/空間図形/2次曲線/数列 (松坂 和夫(著)、岩波書店)の第10章(新しい数とその表示 - 複素数と複素平面)、10.2(複素平面)、1直線上にある3点、同じ向きに相似な三角形、問14.を取り組んでみる。

問14.

γα βα = αβ γβ γ 2 ( α+β )γ+αβ= α 2 β 2 +2αβ α 2 + β 2 + γ 2 αββγγα=0

number.js、D3.js を利用して必要条件であることを確認。

HTML5

<div id="graph0"></div>
<span style="color:red">α</span> =
<label for="real0">
</label>
<input id="real0" type="number" value="0"> +
<label for="imag0">
</label>
<input id="imag0" type="number" value="0">i
<br>
<span style="color:blue">β</span> =
<label for="real1">
</label>
<input id="real1" type="number" value="1"> +
<label for="imag1">
</label>
<input id="imag1" type="number" value="0">i
<br>
<span style="color:green">γ</span> = <span id="gamma0"></span>
<br>
α^2 + β^2 + γ^2 - αβ - βγ - γα = <span id="answer0"></span>
<br>

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

<script src="number.js"></script>
<script src="sample14.js"></script>

JavaScript

コード(Emacs)

(function () {
    'use strict';
    var svg,
        width = 600,
        height = 600,
        padding = 50,
        xscale,
        xaxis,
        yscale,
        yaxis,
        div_graph = document.querySelector('#graph0'),
        input_real0 = document.querySelector('#real0'),
        input_imag0 = document.querySelector('#imag0'),
        input_real1 = document.querySelector('#real1'),
        input_imag1 = document.querySelector('#imag1'),
        inputs = [input_real0, input_imag0, input_real1, input_imag1],
        span_gamma = document.querySelector('#gamma0'),
        span_answer = document.querySelector('#answer0'),
        gamma,
        complexFromMagArg,
        draw,
        calc,
        output;

    complexFromMagArg = function (mag, arg) {
        var real = mag * Math.cos(arg),
            imag = mag * Math.sin(arg);

        return new Complex(real, imag);
    };
    gamma = function (a, b) {
        var c = complexFromMagArg(1, Math.PI / 3);
        
        return b.sub(a).mul(c).add(a);
    };

    draw = function (zs) {
        var points = [],
            min,
            max = -Infinity,
            colors = ['red', 'blue', 'green'];

        zs.forEach(function (z) {
            var x = z.getReal(),
                y = z.getImag(),
                max0 = Math.max(Math.abs(x), Math.abs(y));

            if (max0 > max) {
                max = max0;
            }
            points.push([x, y]);
        });
        max = max * 1.5;
        min = -max;
        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);

        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', 5)
            .attr('fill', function (d, i) {
                return colors[i];
            });

        svg.append('g')
            .attr('transform', 'translate(0, ' + (height / 2) + ')')
            .call(xaxis);
        svg.append('g')
            .attr('transform', 'translate(' + (width / 2) + ', 0)')
            .call(yaxis);
    };
    calc = function (a, b, c) {
        return a.mul(a).add(b.mul(b)).add(c.mul(c))
            .sub(a.mul(b)).sub(b.mul(c)).sub(c.mul(a));  
    };
    output = function () {
        var real0 = parseFloat(input_real0.value),
            imag0 = parseFloat(input_imag0.value),
            real1 = parseFloat(input_real1.value),        
            imag1 = parseFloat(input_imag1.value),
            a = new Complex(real0, imag0),
            b = new Complex(real1, imag1),
            c = gamma(a, b),
            answer = calc(a, b, c);

        span_gamma.innerHTML = '<math>' + c + '</math>';
        draw([a, b, c]);
        span_answer.innerHTML = '<math>' + answer + '</math>';    
    };

    inputs.forEach(function (input) {
        input.onchange = output;
    });

    output();
}());
α = + i
β = + i
γ =
α^2 + β^2 + γ^2 - αβ - βγ - γα =

0 コメント:

コメントを投稿

Comments on Google+: