数学 - 線型代数 - 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(複素数と平面幾何学)、問題3.を取り組んでみる。

問題3.

$\begin{array}{l}\text{A}、\text{B}、\text{C}、\text{D}、\text{L}、\text{M}、\text{N}の複素数をそれぞれ\text{α}、\text{β}、\text{γ}、\text{δ}、\text{α'}、\text{β}、\text{'γ'}とおく。\\ \alpha \text{'}=\frac{1}{2}\left(\delta +\beta +\gamma -\frac{\beta \gamma }{\delta }\right)\\ {\beta }^{\prime }=\frac{1}{2}\left(\delta +\gamma +\alpha -\frac{\gamma \alpha }{\delta }\right)\\ \gamma \text{'}=\frac{1}{2}\left(\delta +\alpha +\beta -\frac{\alpha \beta }{\delta }\right)\\ \frac{\alpha \text{'}-\beta \text{'}}{\beta \text{'}-\gamma \text{'}}\\ =\frac{\beta -\alpha -\frac{\beta \gamma -\gamma \alpha }{\delta }}{\gamma -\beta -\frac{\gamma \alpha -\alpha \beta }{\delta }}\\ =\frac{\beta \delta -\alpha \delta -\beta \gamma +\gamma \alpha }{\gamma \delta -\beta \delta -\gamma \alpha +\alpha \beta }\\ =\frac{\left(\beta -\alpha \right)\left(\delta -\gamma \right)}{\left(\gamma -\beta \right)\left(\delta -\alpha \right)}\\ =-\frac{\frac{\beta -\alpha }{\delta -\alpha }}{\frac{\beta -\gamma }{\delta -\gamma }}\in ℝ\end{array}$

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

HTML5

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

<label for="theta00">
  <span>α</span> = cos
</label>
<input id="theta00" type="number" min="-3.150" max="3.150" step="0.001" 
       value="-1.0000"> +
<i>i</i>sin<span id="theta01"></span>
<br>
<label for="theta10">
  <span>β</span> = cos
</label>
<input id="theta10" type="number" min="-3.150" max="3.150" step="0.001"
       value="-2.500"> +
<i>i</i>sin<span id="theta11"></span>
<br>
<label for="theta20">
  <span>γ</span> = cos
</label>
<input id="theta20" type="number" min="-3.150" max="3.150" step="0.001"
       value="1.000"> +
<i>i</i>sin<span id="theta21"></span>
<br>
<label for="theta30">
  <span style="color:purple">δ</span> = cos
</label>
<input id="theta30" type="number" min="-3.150" max="3.150" step="0.001"
       value="2.000"> +
<i>i</i>sin<span id="theta31"></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="sample3.js"></script>

JavaScript

コード(Emacs)

(function () {
    'use strict';
    var width = 600,
        height = 600,
        padding = 50,
        min = -1.5,
        max = 1.5,
        xscale,
        yscale,
        xaxis,
        yaxis,
        svg,
        div_graph = document.querySelector('#graph0'),
        input_theta0 = document.querySelector('#theta00'),
        input_theta1 = document.querySelector('#theta10'),
        input_theta2 = document.querySelector('#theta20'),
        input_theta3 = document.querySelector('#theta30'),
        span_theta0 = document.querySelector('#theta01'),
        span_theta1 = document.querySelector('#theta11'),
        span_theta2 = document.querySelector('#theta21'),
        span_theta3 = document.querySelector('#theta31'),
        inputs = [input_theta0, input_theta1, input_theta2, input_theta3],
        calc,
        output;

    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);

    calc = function (alpha, beta, gamma) {
        return (1/2).mul(alpha.add(beta)
                         .add(gamma)
                         .sub(beta.mul(gamma).div(alpha)));
    };
    output = function (zs) {
        var theta0 = parseFloat(input_theta0.value),
            theta1 = parseFloat(input_theta1.value),
            theta2 = parseFloat(input_theta2.value),
            theta3 = parseFloat(input_theta3.value),
            alpha = Complex.fromMagnitudeAndArgment(1, theta0),
            beta = Complex.fromMagnitudeAndArgment(1, theta1),
            gamma = Complex.fromMagnitudeAndArgment(1, theta2),
            delta = Complex.fromMagnitudeAndArgment(1, theta3),
            lambda0 = calc(delta, beta, gamma),
            lambda1 = calc(delta, gamma, alpha),
            lambda2 = calc(delta, alpha, beta),
            points = [lambda0, lambda1, lambda2, delta],
            colors = ['red', 'green', 'blue', 'purple'],
            zs = [alpha, beta, gamma, alpha],
            lines;

        span_theta0.innerText = theta0;
        span_theta1.innerText = theta1;
        span_theta2.innerText = theta2;
        span_theta3.innerText = theta3;
        lines = zs.map(function (z, i) {
            return [xscale(z.getReal()), yscale(z.getImag())];
        });
        points = points.map(function (z, i) {
            return [xscale(z.getReal()), yscale(z.getImag()), colors[i]];
        });
        
        div_graph.innerHTML = '';
        svg = d3.select('#graph0')
            .append('svg')
            .attr('width', width)
            .attr('height', height);
        svg.selectAll('line')
            .data(lines.slice(0, -1))
            .enter()
            .append('line')
            .attr('x1', function (d) {
                return d[0];
            })
            .attr('y1', function (d) {
                return d[1];
            })
            .attr('x2', function (d, i) {
                return lines[i + 1][0];
            })
            .attr('y2', function (d, i) {
                return lines[i + 1][1];
            })
            .attr('stroke', 'black');
        
        svg.selectAll('circle')
            .data(points)
            .enter()
            .append('circle')
            .attr('cx', function (d) {
                return d[0];
            })
            .attr('cy', function (d) {
                return d[1];
            })
            .attr('r', 5)
            .attr('fill', function (d) {
                return d[2];
            });

        points.pop();
        points.push(points[0]);
        svg.selectAll('line')
            .data(points.slice(0, -1))
            .enter()
            .append('line')
            .attr('x1', function (d) {
                return d[0];
            })
            .attr('y1', function (d) {
                return d[1];
            })
            .attr('x2', function (d, i) {
                return points[i + 1][0];
            })
            .attr('y2', function (d, i) {
                return points[i + 1][1];
            })
            .attr('stroke', 'black');

        svg.append('circle')
            .attr('cx', xscale(0))
            .attr('cy', yscale(0))
            .attr('r', xscale(1) - xscale(0))
            .attr('stroke', 'black')
            .attr('fill', 'rgba(0, 0, 0, 0)');
        svg.append('g')
            .attr('transform', 'translate(0, ' + (height / 2) + ')')
            .call(xaxis);
        svg.append('g')
            .attr('transform', 'translate(' + (width / 2) + ', 0)')
            .call(yaxis);
    };

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

α = cos + isin
β = cos + isin
γ = cos + isin
δ = cos + isin