数学 – JavaScript - 新しい数とその表示 - 複素数と複素平面 – 複素数と平面幾何学(1直線上にある3点、同じ向きに相似な三角形)

数学読本〈3〉

学習環境/開発環境

• Surface 3 (4G LTE)、Surface 3 タイプ カバー、Surface ペン(端末)
• Windows 10 Pro (OS)
• 数式入力ソフト(TeX, MathML): MathType
• MathML対応ブラウザ: Firefox、Safari
• MathML非対応ブラウザ(Internet Explorer, Google Chrome...)用JavaScript Library: MathJax
• OS X El Capitan - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• kjs-math-number (JavaScript Library)
• D3.js (JavaScript Library)
• Safari(Web browser)

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

問14.

$\begin{array}{l}\frac{\gamma -\alpha }{\beta -\alpha }=\frac{\alpha -\beta }{\gamma -\beta }\\ {\gamma }^2-\left(\alpha +\beta \right)\gamma +\alpha \beta =-{\alpha }^2-{\beta }^2+2\alpha \beta \\ {\alpha }^2+{\beta }^2+{\gamma }^2-\alpha \beta -\beta \gamma -\gamma \alpha =0\end{array}$

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 - αβ - βγ - γα =