数学 - JavaScript - D3.js - 解析学 - 各種の初等関数 - 三角関数(上半平面、下半平面、定点、同点、速度、最短経路、時間)

解析入門〈1〉

学習環境

• 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
• 参考書籍
  • JavaScriptリファレンス 第6版
  • インタラクティブ・データビジュアライゼーション

解析入門〈1〉(松坂 和夫(著)、岩波書店)の第5章(各種の初等関数)、5.3(三角関数)、問題11.を取り組んでみる。

n

11. 
    $\begin{array}{l}{P}_1:\left(0,y_1\right)\\ P_2:\left(x_2,y_2\right)\\ X:\left(x,0\right)\\ f\left(x\right)=\frac{\sqrt{x^2+y_1{}^2}}{v_1}+\frac{\sqrt{{\left(x-x_2\right)}^2+y_2{}^2}}{v_2}\\ f\text{'}\left(x\right)=\frac{1}{2v_1}{\left(x^2+y_1{}^2\right)}^{-\frac{1}{2}}·2x+\frac{1}{2v_2}{\left({\left(x-x_2\right)}^2+y_2{}^2\right)}^{-\frac{1}{2}}2\left(x-x_2\right)\\ =\frac{x}{v_1\sqrt{x^2+y_1{}^2}}+\frac{x-x_2}{v_2\sqrt{{\left(x-x_2\right)}^2+y_2{}^2}}\\ =\frac{\sin {\theta }_1\left(x\right)}{v_1}-\frac{\sin {\theta }_2\left(x\right)}{v_2}\\ {\theta }_1\left(x\right)は単調増加\\ {\theta }_2\left(x\right)は単調減少\\ \sin {\theta }_1\left(x\right)は単調増加\\ \sin {\theta }_2\left(x\right)は単調減少\\ f\text{'}\left(x\right)は単調増加\\ f\text{'}\left(0\right)<0\\ f\text{'}\left(x_2\right)>0\\ よってただ一つ、\\ f\text{'}\left(x_0\right)=0\left(0<x_0<x_2\right)\\ となるx_0が存在する。\\ A:\left(x_0,0\right)\\ \\ {\theta }_1={\theta }_1\left(x_0\right)\\ {\theta }_2={\theta }_2\left(x_0\right)\\ \frac{\sin {\theta }_1}{v_1}-\frac{\sin {\theta }_2}{v_2}=0\\ \frac{\sin {\theta }_1}{v_1}=\frac{\sin {\theta }_2}{v_2}\end{array}$

コード(Emacs)

HTML5

<div id="graph0"></div>
<pre id="output0"></pre>
P1 = (0, <input id="y1" type="number" min="0.001" value="5">),
P2 = (<input id="x2" type="number" value="5">, <input id="y2" type="number" max="-0.001" value="-5">),
X = (<input id="x0" type="number" step="0.01" value="2.5">, 0), 
<label for="v1">v1 = </label><input id="v1" min="0.001" value="20">, 
<label for="v2">v2 = </label><input id="v2" min="0.001" value="200">

<button id="draw0">draw</button>
<button id="clear0">clear</button>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.6/d3.min.js" integrity="sha256-5idA201uSwHAROtCops7codXJ0vja+6wbBrZdQ6ETQc=" crossorigin="anonymous"></script>

<script src="sample11.js"></script>    

JavaScript

let div0 = document.querySelector('#graph0'),
    pre0 = document.querySelector('#output0'),
    width = 600,
    height = 600,
    padding = 50,
    btn0 = document.querySelector('#draw0'),
    btn1 = document.querySelector('#clear0'),
    input_y1 = document.querySelector('#y1'),
    input_x2 = document.querySelector('#x2'),
    input_y2 = document.querySelector('#y2'),
    input_x0 = document.querySelector('#x0'),
    input_v1 = document.querySelector('#v1'),
    input_v2 = document.querySelector('#v2'),
    inputs = [input_y1, input_x2, input_y2, input_x0, input_v1, input_v2],
    p = (x) => pre0.textContent += x + '\n';

let draw = () => {
    pre0.textContent = '';

    let y1 = parseFloat(input_y1.value),
        x2 = parseFloat(input_x2.value),
        y2 = parseFloat(input_y2.value),
        x0 = parseFloat(input_x0.value),
        lines = [[0, y1, x0, 0], [x0, 0, x2, y2]],
        v1 = parseFloat(input_v1.value),
        v2 = parseFloat(input_v2.value),
        p1x = Math.sqrt(x0 ** 2 + y1 ** 2),
        theta1 = Math.asin(x0 / p1x),
        p2x = Math.sqrt((x2 - x0) ** 2 + y2 ** 2),
        theta2 = Math.asin((x2 - x0) / p2x),
        t = p1x / v1 + p2x / v2;

    let d1 = Math.min(0, x0, y2),
        d2 = Math.max(y1, x0, x2);
    
    let xscale = d3.scaleLinear()
        .domain([d1, d2])
        .range([padding, width - padding]);
    let yscale = d3.scaleLinear()
        .domain([d1, d2])
        .range([height - padding, padding]);

    let xaxis = d3.axisBottom().scale(xscale);
    let yaxis = d3.axisLeft().scale(yscale);
    div0.innerHTML = '';
    let svg = d3.select('#graph0')
        .append('svg')
        .attr('width', width)
        .attr('height', height);

    svg.selectAll('line')
        .data(lines)
        .enter()
        .append('line')
        .attr('x1', (d) => xscale(d[0]))
        .attr('y1', (d) => yscale(d[1]))
        .attr('x2', (d) => xscale(d[2]))
        .attr('y2', (d) => yscale(d[3]))
        .attr('stroke', (d, i) => i === 0 ? 'green' : 'blue');

    svg.append('g')
        .attr('transform', `translate(0, ${yscale(0)})`)
        .call(xaxis);

    svg.append('g')
        .attr('transform', `translate(${xscale(0)}, 0)`)
        .call(yaxis);
    p(`time: ${t}`);
    p(`θ1 = ${theta1}`);
    p(`θ2 = ${theta2}`);
    p(`sin θ1 / v1 = ${Math.sin(theta1) / v1}`);
    p(`sin θ2 / v2 = ${Math.sin(theta2) / v2}`);
    p(`difference: ${Math.abs(Math.sin(theta1) / v1 - Math.sin(theta2) / v2)}`);
};

inputs.forEach((input) => input.onchange = draw);
btn0.onclick = draw;
btn1.onclick = () => pre0.textContent = '';
draw();

P1 = (0, ), P2 = (, ), X = (, 0), v1 = , v2 =