2016年9月13日火曜日

開発環境

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

問題7-3(2曲線で囲まれた領域の面積)

コード(Emacs)

HTML5

<div id="graph0"></div>
Area: <span id="area0"></span>
<br>
<label for="dx0">
  dx =
</label>
<input id="dx0" type="number" min="0" value="0.001">
<br>
<label for="a0">a = </label>
<input id="a0" type="number"  step="0.01" value="0.00">
<label for="b0">b = </label>
<input id="b0" type="number"  step="0.01" value="1.00">

<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="sample3.js"></script>

JavaScript

'use strict';
var fx,
    gx,
    width = 600,
    height = 600,
    padding = 50,
    xmin,
    xmax,
    ymin,
    ymax,
    xscale,
    yscale,
    xaxis,
    yaxis,
    svg,
    div_graph = document.querySelector('#graph0'),
    span_area = document.querySelector('#area0'),
    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;

fx = function (x) {
    return x;
};
gx = function (x) {
    return Math.pow(x, 2);
};
getPoints = function () {
    var dx = parseFloat(input_dx.value),
        points = [];

    range(xmin, xmax, dx).forEach(function (x) {
        points.push([x, fx(x), 'green']);
    });
    range(xmin, xmax, dx).forEach(function (x) {
        points.push([x, gx(x), 'blue']);
    });
    return points;
};
draw = function () {
    var points = getPoints();

    ymax = Math.max.apply(null,
                          points.map(function (point) {
                              return point[1];
                          }));
    ymax += 1;
    ymin = -ymax;
    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);
    
    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', function (d) {
            return d[2];
        });

    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 area = 0;

    range(a, b, dx).forEach(function (x) {
        area += dx * f(x);
    });
    return area;
};
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();
    span_area.innerText =
        integral(function (x) {
            return fx(x) - gx(x);
        }, a, b, dx);
    
};
inputs.forEach(function (input) {
    input.onchange = output;
});

output();
Area:

0 コメント:

コメントを投稿