JavaScript - 数学 - 初等解析問題を解く(曲線の長さを求める)

Pythonからはじめる数学入門
原著

開発環境

開発環境

• OS X El Capitan - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• kjs-array (JavaScript Library)
• D3.js (JavaScript Library)
• Safari(Web browser)
• 参考書籍
  • JavaScript 第6版 (David Flanagan(著)、村上 列(翻訳)、オライリージャパン)
  • JavaScriptリファレンス 第6版(David Flanagan(著)、木下 哲也(翻訳)、オライリージャパン)
  • インタラクティブ・データビジュアライゼーション(Scott Murray (著)、長尾 高弘 (翻訳)、オライリージャパン)

Pythonからはじめる数学入門 (Amit Saha (著)、黒川 利明 (翻訳)、オライリージャパン)の7章(初等解析問題を解く)、7.10(プログラミングチャレンジ)、問題7-4(曲線の長さを求める)をJavaScript取り組んでみる。

問題7-4(曲線の長さを求める)

コード(Emacs)

HTML5

<div id="graph0"></div>
走破距離: <span id="answer0"></span>
<br>
<label for="dx0">
  dx =
</label>
<input id="dx0" type="number" min="0" step="0.01" value="0.001">
<br>
<label for="a0">a = </label>
<input id="a0" type="number"  step="0.1" value="-5">
<label for="b0">b = </label>
<input id="b0" type="number"  step="0.1" value="10">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script src="array.js"></script>
<script src="sample4.js"></script>

JavaScript

(function () {
    'use strict';
    var fx,
        f1x,
        width = 600,
        height = 600,
        padding = 50,
        xmin = -10,
        xmax = 10,
        ymin = -250,
        ymax = 250,
        xscale,
        yscale,
        xaxis,
        yaxis,
        svg,
        div_graph = document.querySelector('#graph0'),
        span_answer = document.querySelector('#answer0'),
        input_dx = document.querySelector('#dx0'),
        input_a = document.querySelector('#a0'),
        input_b = document.querySelector('#b0'),
        inputs = [input_dx, input_a, input_b],
        getPoints,
        draw,
        integral,
        output;

    xscale = d3.scaleLinear()
        .domain([xmin, xmax])
        .range([padding, width - padding]);
    yscale = d3.scaleLinear()
        .domain([ymin, ymax])
        .range([height - padding, padding]);
    xaxis = d3.axisBottom().scale(xscale);
    yaxis = d3.axisLeft().scale(yscale);

    fx = function (x) {
        return 2 * Math.pow(x, 2) + 3 * x + 1;
    };
    f1x = function (x) {
        return 4 * x + 3;
    };
    getPoints = function () {
        return Array.range(-10, 10, 0.05).map(
            function (x) {
                return [x, fx(x)];
            });
    };
    draw = function () {
        var points = getPoints();

        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', 1)
            .attr('fill', 'blue');

        svg.append('g')
            .attr('transform', 'translate(0, ' + (height / 2) + ')')
            .call(xaxis);
        svg.append('g')
            .attr('transform', 'translate(' + (width / 2) + ', 0)')
            .call(yaxis);
    };
    integral = function (f, a, b, dx) {
        var answer = 0;

        Array.range(a, b, dx).forEach(function (x) {
            answer += dx * f(x);
        });
        return answer;
    };
    output = function () {
        var dx = parseFloat(input_dx.value),
            a = parseFloat(input_a.value),
            b = parseFloat(input_b.value);

        xmax = Math.max(Math.abs(a), Math.abs(b)) + 1;
        xmin = -xmax;

        draw();
        svg.append('circle')
            .attr('cx', xscale(a))
            .attr('cy', yscale(fx(a)))
            .attr('r', 5)
            .attr('fill', 'green');
        svg.append('circle')
            .attr('cx', xscale(b))
            .attr('cy', yscale(fx(b)))
            .attr('r', 5)
            .attr('fill', 'green');    span_answer.innerText =
            integral(function (x) {
                return Math.sqrt(1 + Math.pow(f1x(x), 2));
            }, a, b, dx);    
    };
    inputs.forEach(function (input) {
        input.onchange = output;
    });

    output();
}());

走破距離:
dx =
a = b =