2016年9月27日火曜日

開発環境

計算機プログラムの構造と解釈[第2版](ハロルド エイブルソン (著)、ジュリー サスマン (著)、ジェラルド・ジェイ サスマン (著)、Harold Abelson (原著)、Julie Sussman (原著)、Gerald Jay Sussman (原著)、和田 英一 (翻訳)、翔泳社、原著: Structure and Interpretation of Computer Programs (MIT Electrical Engineering and Computer Science)(SICP))の第1章(手続きによる抽象の構築)、1.3(高階手続きによる抽象)、1.3.3(一般的方法としての手続き)、問題1.39.を JavaScript で取り組んでみる。

その他参考書籍

問題1.39.

コード(Emacs)

HTML5

<div id="graph0"></div>
<label for="x0">x = </label>
<input id="x0" type="number" step="0.001" value="3.140">
<label for="k0">k = </label>
<input id="k0" type="number" min="2" step="1" value="5">
<br>
近似値: tan x = <span id="output0"></span>, 
Math.tan(x) = <span id="output1"></span>

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

JavaScript

(() => {
    'use strict';
    let div_graph = document.querySelector('#graph0'),
        input_x = document.querySelector('#x0'),
        input_k = document.querySelector('#k0'),
        inputs = [input_x, input_k],
        span_output0 = document.querySelector('#output0'),
        span_output1 = document.querySelector('#output1'),
        width = 600,
        height = 600,
        padding = 50,
        contFrac = (n, d, k) => {
            var iter;

            iter = (i, result) => {
                if (i === 0) {
                    return result;
                }
                return iter(i - 1, n(i) / (d(i) + result));
            };
            return iter(k, 0);
        },
        tanCf = (x, k) => {
            let n = (i) => -1 * Math.pow(x, 2),
                d = (i) => 2 * i + 1;
            
            return x / (1 + contFrac(n, d, k - 1));
        },
        draw = () => {
            let x = parseFloat(input_x.value),
                k = parseInt(input_k.value, 10),
                ys = Array.range(1, k + 1).map((k) => tanCf(x, k)),
                y = Math.tan(x), 
                ymax = Math.max.apply(null, ys),
                ymin = Math.min.apply(null, ys);

            let xscale = d3.scaleLinear()
                .domain([1, k])
                .range([padding, width - padding]);
            let yscale = d3.scaleLinear()
                .domain([ymin, ymax])
                .range([height - padding, padding]);

            let xaxis = d3.axisBottom().scale(xscale);
            let yaxis = d3.axisLeft().scale(yscale);

            div_graph.innerHTML = '';
            let svg = d3.select('#graph0')
                .append('svg')
                .attr('width', width)
                .attr('height', height);

            svg.selectAll('circle')
                .data(ys)
                .enter()
                .append('circle')
                .attr('cx', (_, i) => xscale(i + 1))
                .attr('cy', (d) => yscale(d))
                .attr('r', 5)
                .attr('fill', 'green');

            console.log(y);
            svg.append('line')
                .attr('x1', xscale(1))
                .attr('y1', yscale(y))
                .attr('x2', xscale(k))
                .attr('y2', yscale(y))
                .attr('stroke', 'rgba(0, 0, 255, 0.5)');

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

            span_output0.innerText = ys.pop();
            span_output1.innerText = y;
        };

    inputs.forEach((input) => {
        input.onchange = draw;
    });
    draw();
})();

近似値: tan x = , Math.tan(x) =

0 コメント:

コメントを投稿

Comments on Google+: