学習環境/開発環境
- 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 (プログラミング言語)
- D3.js (JavaScript Library)
- kjs-math-number (JavaScript Library)
- kjs-array (JavaScript Library)
- Safari(Web browser)
線型代数入門 (松坂 和夫(著)、岩波書店)の第4章(複素数、複素ベクトル空間)、2(複素平面)、問8.を取り組んでみる。
問8.
線分αβの垂直二等分線の線分自身とαを含む半平面。
number.js で確認。
HTML5
<div id="graph0"></div>
<label for="real0">
α =
</label>
<input id="real0" type="number" value="5">
<label for="imag0">
+
</label>
<input id="imag0" type="number" value="10">i,
<br>
<label for="real1">
β =
</label>
<input id="real1" type="number" value="10">
<label for="imag1">
+
</label>
<input id="imag1" type="number" value="5">i
<script src="array.js"></script>
<script src="number.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script src="sample8.js"></script>
JavaScript
コード(Emacs)
(function () {
'use strict';
var width = 600,
height = 600,
padding = 50,
div_graph = document.querySelector('#graph0'),
input_real0 = document.querySelector('#real0'),
input_imag0 = document.querySelector('#imag0'),
input_real1 = document.querySelector('#real1'),
input_imag1 = document.querySelector('#imag1'),
inputs = [input_real0, input_imag0, input_real1, input_imag1],
draw;
draw = function () {
var real0 = parseFloat(input_real0.value),
imag0 = parseFloat(input_imag0.value),
real1 = parseFloat(input_real1.value),
imag1 = parseFloat(input_imag1.value),
a = new Complex(real0, imag0),
b = new Complex(real1, imag1),
points = [],
max = d3.max([real0, real1, imag0, imag1].map(Math.abs)) * 1.5,
min = -max,
svg,
xscale,
yscale,
xaxis,
yaxis;
xscale = d3.scaleLinear()
.domain([min, max])
.range([padding, width - padding]);
yscale = d3.scaleLinear()
.domain([min, max])
.range([height - padding, padding]);
xaxis = d3.axisBottom().scale(xscale);
yaxis = d3.axisLeft().scale(yscale);
range(min, max, (max - min) / 100).forEach(function (x) {
range(min, max, (max - min) / 100).forEach(function (y) {
points.push([x, y]);
})
});
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', 2)
.attr('fill', function (d) {
var z = new Complex(d[0], d[1]);
if (z.sub(a).div(z.sub(b)).magnitude().le(1)) {
return 'green';
} else {
return 'yellow';
}
});
svg.append('circle')
.attr('cx', xscale(real0))
.attr('cy', yscale(imag0))
.attr('r', 5)
.attr('fill', 'red');
svg.append('circle')
.attr('cx', xscale(real1))
.attr('cy', yscale(imag1))
.attr('r', 5)
.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);
};
draw();
inputs.forEach(function (input) {
input.onchange = draw;
});
}());
i,
i
0 コメント:
コメントを投稿