学習環境/開発環境
- Surface 3 (4G LTE)、Surface 3 タイプ カバー、Surface ペン(端末)
- Windows 10 Pro (OS)
- 数式入力ソフト(TeX, MathML): MathType
- MathML対応ブラウザ: Firefox、Safari
- MathML非対応ブラウザ(Internet Explorer, Google Chrome...)用JavaScript Library: MathJax
- OS X El Capitan - Apple (OS)
- Emacs (Text Editor)
- JavaScript (プログラミング言語)
- kjs-math-number (JavaScript Library)
- D3.js (JavaScript Library)
- Safari(Web browser)
数学読本〈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 コメント:
コメントを投稿