数学 - 放物線・楕円・双曲線 - 2次曲線 – 放物線・楕円・双曲線(双曲線、距離の差)

数学読本〈3〉

学習環境

• Surface 3 (4G LTE)、Surface 3 タイプ カバー、Surface ペン(端末)
• Windows 10 Pro (OS)
• 数式入力ソフト(TeX, MathML): MathType
• MathML対応ブラウザ: Firefox、Safari
• MathML非対応ブラウザ(Microsoft Edge(対応?), Google Chrome...)用JavaScript Library: MathJax

数学読本〈3〉平面上のベクトル/複素数と放物線・楕円・双曲線/空間図形/2次曲線/数列 (松坂 和夫(著)、岩波書店)の第12章(放物線・楕円・双曲線 - 2次曲線)、12.1(放物線・楕円・双曲線)、双曲線、問7.を取り組んでみる。

問7.

$\begin{array}{l}\sqrt{{\left(x-3\right)}^2+y^2}-\sqrt{{\left(x+3\right)}^2+y^2}=\pm 4\\ \sqrt{{\left(x-3\right)}^2+y^2}=\pm 4+\sqrt{{\left(x+3\right)}^2+y^2}\\ {\left(x-3\right)}^2+y^2=16\pm 8\sqrt{{\left(x+3\right)}^2+y^2}+{\left(x+3\right)}^2+y^2\\ -12x-16=\pm 8\sqrt{{\left(x+3\right)}^2+y^2}\\ 3x+4=\pm 2\sqrt{{\left(x+3\right)}^2+y^2}\\ 9x^2+24x+16=4\left({\left(x+3\right)}^2+y^2\right)\\ 5x^2-4y^2=20\\ \frac{x^2}{4}-\frac{y^2}{5}=1\end{array}$

JavaScript で描画。

$\begin{array}{l}\frac{x^2}{4}-\frac{y^2}{5}=1\\ y^2=\frac{5}{4}{x}^2-5\\ y=\pm \sqrt{\frac{5}{4}{x}^2-5}\\ \frac{5}{4}{x}^2\ge 5\\ x^2\ge 4\\ x\le -2,2\le x\end{array}$

コード(Emacs)

{
    'use strict';
    let width = 600,
        height = 600,
        padding = 50,
        svg,
        xscale,
        yscale,
        xaxis,
        yaxis,
        div_graph = document.querySelector('#graph0');

    let range = (start, end, step) => {
        let result = [];
        for (let i = start; i < end; i += step) {
            result.push(i);
        }
        return result;
    };
    let f = (x) => {
        return Math.sqrt(5 / 4 * Math.pow(x, 2) - 5);
    };

    let draw = () => {
        let xs1 = range(2, 20, 0.01),
            xs2 = xs1.map((x) => -1 * x),
            xs = xs1.concat(xs2);

        let points1 = xs.map((x) => [x, f(x)]),
            points2 = xs.map((x) => [x, -f(x)]),
            points = points1.concat(points2);

        xscale = d3.scaleLinear()
            .domain([-20, 20])
            .range([padding, width - padding]);
        yscale = d3.scaleLinear()
            .domain([-20, 20])
            .range([height - padding, padding]);
        xaxis = d3.axisBottom().scale(xscale);
        yaxis = d3.axisLeft().scale(yscale);
        
        svg = d3.select('#graph0')
            .append('svg')
            .attr('width', width)
            .attr('height', height);

        svg.selectAll('circle')
            .data(points)
            .enter()
            .append('circle')
            .attr('cx', (d) => xscale(d[0]))
            .attr('cy', (d) => yscale(d[1]))
            .attr('r', 1)
            .attr('fill', 'green');

        svg.append('g')
            .attr('transform', `translate(0, ${height / 2})`)
            .call(xaxis);
        svg.append('g')
            .attr('transform', `translate(${width / 2}, 0)`)
            .call(yaxis);
    };

    draw();
}