数学 – 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)

数学読本〈3〉平面上のベクトル/複素数と複素平面/空間図形/2次曲線/数列 (松坂和夫(著)、岩波書店)の第10章(新しい数とその表示 - 複素数と複素平面)、10.2(複素平面)、シムソンの定理、問15、16.を取り組んでみる。

問15.

$\begin{array}{l} w - z_{1} = \frac{1}{2} (α + \frac{β γ}{δ}) \\ w - z_{2} = \frac{1}{2} (β + \frac{γ α}{δ}) \\ \frac{w - z_{1}}{w - z_{2}} = \frac{α + \frac{β γ}{δ}}{β + \frac{γ α}{δ}} = \frac{α δ + β γ}{α γ + β δ} \end{array}$
$\begin{array}{l} \bar{ϵ} = \bar{\frac{α δ + β γ}{α γ + β δ}} = \frac{\bar{α} \bar{δ} + \bar{β} \bar{γ}}{\bar{α} \bar{γ} + \bar{β} \bar{δ}} \\ = \frac{\frac{1}{α δ} + \frac{1}{β γ}}{\frac{1}{α γ} + \frac{1}{β δ}} = \frac{α δ + β γ}{α γ + β δ} \\ = ϵ \end{array}$
$\begin{array}{l} ϵ \in ℝ \\ \frac{w - z_{1}}{w - z_{2}} \in ℝ \\ {w,z}_{1} {,z}_{2} は一直線上にある。 \\ シムソン線は点 w も通る。 \end{array}$

問16.

全 問 の w を α 、 β 、 γ 、 δ の シ ム ソ ン 線 に つ い て 考 え る と 、 い ず れ も 点 w を 通 る 。

number.js、D3.js を利用して確認。

HTML5


  <div id="graph0"></div>
<span style="color: brown">w</span> = <span id="w0"></span>
<br>
<span style="color:red">α</span> =
<label for="alpha0">
  cos 
</label>
<input id="alpha0" type="number" min="-3.140" max="3.150" step="0.01"
       value="0"> +
<i>i</i>sin<span id="alpha1"></span>
<br>
<span style="color:blue">β</span> =
<label for="beta0">
  cos 
</label>
<input id="beta0" type="number" min="-3.140" max="3.150" step="0.01"
       value="1.57"> +
<i>i</i>sin<span id="beta1"></span>
<br>
<span style="color:green">γ</span> =
<label for="gamma0">
  cos 
</label>
<input id="gamma0" type="number" min="-3.140" max="3.150" step="0.01"
       value="3.14"> +
<i>i</i>sin<span id="gamma1"></span>
<br>
<span style="color:purple">δ</span> =
<label for="delta0">
  cos 
</label>
<input id="delta0" type="number" min="-3.140" max="3.150" step="0.01"
       value="-1.57"> +
<i>i</i>sin<span id="delta1"></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="sample15.js"></script>

JavaScript

コード(Emacs)


  (function () {
    'use strict';
    var w,
        alpha_theta,
        beta_theta,
        gamma_theta,
        delta_theta,
        alpha,
        beta,
        gamma,
        delta,
        svg,
        width = 600,
        height = 600,
        padding = 50,
        xscale,    
        xaxis,
        yscale,
        yaxis,
        min = -2,
        max = 2,
        div_graph = document.querySelector('#graph0'),
        span_w = document.querySelector('#w0'),
        input_alpha = document.querySelector('#alpha0'),
        input_beta = document.querySelector('#beta0'),
        input_gamma = document.querySelector('#gamma0'),
        input_delta = document.querySelector('#delta0'),
        inputs = [input_alpha, input_beta, input_gamma, input_delta],
        span_alpha = document.querySelector('#alpha1'),
        span_beta = document.querySelector('#beta1'),
        span_gamma = document.querySelector('#gamma1'),
        span_delta = document.querySelector('#delta1'),    
        draw,
        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);

    draw = function () {
        var alpha_z1,
            alpha_z2,
            alpha_z3,
            beta_z1,
            beta_z2,
            beta_z3,
            gamma_z1,
            gamma_z2,
            gamma_z3,
            delta_z1,
            delta_z2,
            delta_z3,        
            points,
            colors = ['red', 'blue', 'green', 'purple', 'brown'];

        alpha_theta = parseFloat(input_alpha.value);
        beta_theta = parseFloat(input_beta.value);
        gamma_theta = parseFloat(input_gamma.value);
        delta_theta = parseFloat(input_delta.value);

        alpha = Complex.fromMagnitudeAndArgment(1, alpha_theta);
        beta = Complex.fromMagnitudeAndArgment(1, beta_theta);
        gamma = Complex.fromMagnitudeAndArgment(1, gamma_theta);
        delta = Complex.fromMagnitudeAndArgment(1, delta_theta);
        w = (1/2).mul(alpha.add(beta).add(gamma).add(delta));

        points = [alpha, beta, gamma, delta, w].map(function (z, i) {
            return [z.getReal(), z.getImag(), 5, colors[i]];
        });

        alpha_z1 = (1/2)
            .mul(alpha.add(gamma).add(delta).sub(gamma.mul(delta).div(alpha)));
        alpha_z2 = (1/2)
            .mul(alpha.add(delta).add(beta).sub(delta.mul(beta).div(alpha)));
        alpha_z3 = (1/2)
            .mul(alpha.add(beta).add(gamma).sub(beta.mul(gamma).div(alpha)));
        points = points.concat([alpha_z1, alpha_z2, alpha_z3].map(function (z) {
            return [z.getReal(), z.getImag(), 3, colors[0]];
        }));
        beta_z1 = (1/2)
            .mul(beta.add(delta).add(alpha).sub(delta.mul(alpha).div(beta)));
        beta_z2 = (1/2)
            .mul(beta.add(alpha).add(gamma).sub(alpha.mul(gamma).div(beta)));
        beta_z3 = (1/2)
            .mul(beta.add(gamma).add(delta).sub(gamma.mul(delta).div(beta)));
        points = points.concat([beta_z1, beta_z2, beta_z3].map(function (z) {
            return [z.getReal(), z.getImag(), 3, colors[1]];
        }));
        gamma_z1 = (1/2)
            .mul(gamma.add(alpha).add(beta).sub(alpha.mul(beta).div(gamma)));
        gamma_z2 = (1/2)
            .mul(gamma.add(beta).add(delta).sub(beta.mul(delta).div(gamma)));
        gamma_z3 = (1/2)
            .mul(gamma.add(delta).add(alpha).sub(delta.mul(alpha).div(gamma)));
        points = points.concat([gamma_z1, gamma_z2, gamma_z3].map(function (z) {
            return [z.getReal(), z.getImag(), 3, colors[2]];
        }));
        delta_z1 = (1/2)
            .mul(delta.add(beta).add(gamma).sub(beta.mul(gamma).div(delta)));
        delta_z2 = (1/2)
            .mul(delta.add(gamma).add(alpha).sub(gamma.mul(alpha).div(delta)));
        delta_z3 = (1/2)
            .mul(delta.add(alpha).add(beta).sub(alpha.mul(beta).div(delta)));
        points = points.concat([delta_z1, delta_z2, delta_z3].map(function (z) {
            return [z.getReal(), z.getImag(), 3, colors[3]];
        }));
        
        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', function (d) {
                return d[2];
            })
            .attr('fill', function (d) {
                return d[3];
            });
        
        svg.append('circle')
            .attr('cx', xscale(0))
            .attr('cy', yscale(0))
            .attr('r', xscale(1) - xscale(0))
            .attr('stroke', 'yellow')
            .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);
    };
    output = function () {
        draw();
        span_w.innerHTML = '<math>' + w + '</math>';
        span_alpha.innerText = alpha_theta;
        span_beta.innerText = beta_theta;
        span_gamma.innerText = gamma_theta;
        span_delta.innerText = delta_theta;
    };

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

    output();
}());

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

Kamimura's blog

2016年9月14日水曜日

数学 – JavaScript - 新しい数とその表示 - 複素数と複素平面 – 複素数と平面幾何学(シムソンの定理)

0 コメント:

コメントを投稿