数学 - 線型代数 - JavaScript - 複素数、複素ベクトル空間(複素数と平面幾何学、正三角形の頂点の必要十分条件)

線型代数入門

学習環境/開発環境

• 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)
• 参考書籍
  • JavaScript 第6版 (David Flanagan(著)、村上 列(翻訳)、オライリージャパン)
  • JavaScriptリファレンス 第6版(David Flanagan(著)、木下 哲也(翻訳)、オライリージャパン)
  • インタラクティブ・データビジュアライゼーション(Scott Murray (著)、長尾 高弘 (翻訳)、オライリージャパン)

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

問1.

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

JavaScript(number.js) で確認してみる。

HTML5

<div id="graph0"></div>
<math>
 <msup>
  <mi>α</mi>
  <mn>2</mn>
 </msup>
 <mo>+</mo><msup>
  <mi>β</mi>
  <mn>2</mn>
 </msup>
 <mo>+</mo><msup>
  <mi>γ</mi>
  <mn>2</mn>
 </msup>
 <mo>−</mo><mi>β</mi><mi>γ</mi><mo>−</mo><mi>γ</mi><mi>α</mi><mo>−</mo><mi>α</mi><mi>β</mi>
</math> = <span id="output0"></span>
<br>
<br>
<label for="real0">
  <span style="color:red">α</span> =
</label>
<input id="real0" type="number" step="0.001" value="0.000"> +
<input id="imag0" type="number" step="0.001" value="0.000"><i>i</i>
<br>
<label for="real1">
  <span style="color:green">β</span> =
</label>
<input id="real1" type="number" step="0.001" value="1.000"> +
<input id="imag1" type="number" step="0.001" value="0.000"><i>i</i>
<br>
<label for="real2">
  <span style="color:blue">γ</span> =
</label>
<input id="real2" type="number" step="0.001" value="0.500"> +
<input id="imag2" type="number" step="0.001" value="0.866"><i>i</i>


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

JavaScript

コード(Emacs)

(function () {
    'use strict';
    var width = 600,
        height = 600,
        padding = 50,
        xscale,
        yscale,
        xaxis,
        yaxis,
        svg,
        div_graph = document.querySelector('#graph0'),
        span_output = document.querySelector('#output0'),
        input_real0 = document.querySelector('#real0'),
        input_imag0 = document.querySelector('#imag0'),
        input_real1 = document.querySelector('#real1'),
        input_imag1 = document.querySelector('#imag1'),
        input_real2 = document.querySelector('#real2'),
        input_imag2 = document.querySelector('#imag2'),
        inputs = [input_real0, input_imag0,
                  input_real1, input_imag1,
                  input_real2, input_imag2],
        calc,
        draw,
        output;

    calc = function (alpha, beta, gamma) {
        return alpha.mul(alpha)
            .add(beta.mul(beta))
            .add(gamma.mul(gamma))
            .sub(beta.mul(gamma))
            .sub(gamma.mul(alpha))
            .sub(alpha.mul(beta));
    };
    draw = function (zs) {
        var min,
            max = 0,
            points,
            colors = ['red', 'green', 'blue'];

        points = zs.map(function (z, i) {
            var mag = z.magnitude();
            
            if (max < mag) {
                max = mag;
            }
            return [z.getReal(), z.getImag(), colors[i]];
        });
        if (max === 0) {
            max = 1;
        } else {
            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) {
                return d[2];
            });

        points.push(points[0]);
        svg.selectAll('line')
            .data(points.slice(0, -1))
            .enter()
            .append('line')
            .attr('x1', function (d) {
                return xscale(d[0]);
            })
            .attr('y1', function (d) {
                return yscale(d[1]);
            })
            .attr('x2', function (d, i) {
                return xscale(points[i + 1][0]);
            })
            .attr('y2', function (d, i) {
                return yscale(points[i + 1][1]);
            })
            .attr('stroke', 'black');
        
        svg.append('g')
            .attr('transform', 'translate(0, ' + (height / 2) + ')')
            .call(xaxis);
        svg.append('g')
            .attr('transform', 'translate(' + (width / 2) + ', 0)')
            .call(yaxis);
    };
    output = function () {
        var real0 = parseFloat(input_real0.value),
            imag0 = parseFloat(input_imag0.value),
            real1 = parseFloat(input_real1.value),
            imag1 = parseFloat(input_imag1.value),
            real2 = parseFloat(input_real2.value),
            imag2 = parseFloat(input_imag2.value),
            alpha = new Complex(real0, imag0),
            beta = new Complex(real1, imag1),
            gamma = new Complex(real2, imag2),
            zs = [alpha, beta, gamma];

        draw(zs);
        span_output.innerHTML =
            '<math>' + calc(alpha, beta, gamma) + '</math>';
    };

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

${\alpha }^2+{\beta }^2+{\gamma }^2-\beta \gamma -\gamma \alpha -\alpha \beta$ =

α = + i
β = + i
γ = + i