2016年9月3日土曜日

学習環境/開発環境

数学読本〈3〉平面上のベクトル/複素数と複素平面/空間図形/2次曲線/数列 (松坂 和夫(著)、岩波書店)の第10章(新しい数とその表示 - 複素数と複素平面)、10.1(複素平面)、複素数とベクトル、問5、6.を取り組んでみる。

問5.

それぞれ中心α、半径γの絶対値の円の周上、閉包(周上と内部)。

問6.

  • 線分αβの二等分線によって平面を分割した、αを含む側と、線分上。
  • 点α、βをk対1の内点、k:1の外点を両端とする円の周上。

number.js、D3.js で問6、(2)を描画してみる。

JavaScript

コード(Emacs)

'use strict';
var svg,
    n = 10,
    width = 600,
    height = 600,
    padding = 50,
    xmin = -500,
    xmax = 500,
    ymin = -500,
    ymax = 500,
    xscale,
    xaxis,
    yscale,
    yaxis,

    input_real0 = document.querySelector('#real0'),
    input_imag0 = document.querySelector('#imag0'),
    input_real1 = document.querySelector('#real1'),
    input_imag1 = document.querySelector('#imag1'),
    input_const = document.querySelector('#const_num0'),
    inputs = [input_real0, input_imag0, input_real1, input_imag1, input_const],
    div_graph0 = document.querySelector('#graph0'),

    button_draw = document.querySelector('#draw0'),
    nl = '<br>',
    draw2,
    draw;

draw2 = function (a, b, k) {
    var c1 = a.add(k.mul(b)).div(k.add(1)),
        c2 = (-1).mul(a).add(b.mul(k)).div(k.sub(1)),
        c = c1.add(c2).div(2),
        r = c1.sub(c2).magnitude().div(2);

    svg.append('circle')
        .attr('cx', xscale(c.getReal()))
        .attr('cy', yscale(c.getImag()))
        .attr('r', xscale(r) - xscale(0))
        .attr('stroke', 'green')
        .attr('fill', 'rgba(0, 0, 0, 0)');
};
draw = function () {
    var a = new Complex(parseInt(input_real0.value, 10),
                        parseInt(input_imag0.value, 10)),
        b = new Complex(parseInt(input_real1.value, 10),
                        parseInt(input_imag1.value, 10)),
        points = [a, b],
        k = parseFloat(input_const.value);

    if (k === 1) {
        k = 1.1;
        if (Math.random() < 0.5) {
            input_const.value = 0.99;
        } else {
            input_const.value = 1.01;
        }
    }
    div_graph0.innerHTML = '';
    svg = d3.select('#graph0')
        .append('svg')
        .attr('width', width)
        .attr('height', height);

    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);
    svg.selectAll('circle')
        .data(points)
        .enter()
        .append('circle')
        .attr('cx', function (d) {
            return xscale(d.getReal());
        })
        .attr('cy', function (d) {
            return yscale(d.getImag());
        })
        .attr('r', 5)
        .attr('fill', 'blue');

    svg.append('line')
        .attr('x1', xscale(xmin))
        .attr('y1', yscale(0))
        .attr('x2', xscale(xmax))
        .attr('y2', yscale(0))
        .attr('stroke', 'grey');
    svg.append('line')
        .attr('x1', xscale(0))
        .attr('y1', yscale(ymin))
        .attr('x2', xscale(0))
        .attr('y2', yscale(ymax))
        .attr('stroke', 'grey');
    
    draw2(a, b, k);
    
    svg.append('g')
        .attr('transform', 'translate(0, ' + (height - padding) + ')')
        .call(xaxis);
    svg.append('g')
        .attr('transform', 'translate(' + padding + ', 0)')
        .call(yaxis);
};

draw();

inputs.forEach(function (input) {
    input.onchange = draw;
});
i, i,

0 コメント:

コメントを投稿