学習環境/開発環境
- 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(複素平面)、問7.を取り組んでみる。
問7.
それぞれの集合は、αを中心とする半径rの円の周上、閉包(円の周上の内部。
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,
<label for="radius0">
r =
</label>
<input id="radius0" type="number" min="1" value="5">
<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="sample7.js"></script>
JavaScript
コード(Emacs)
(function () {
'use strict';
var width = 600,
height = 600,
padding = 50,
div_graph = document.querySelector('#graph0'),
input_real = document.querySelector('#real0'),
input_imag = document.querySelector('#imag0'),
input_radius = document.querySelector('#radius0'),
inputs = [input_real, input_imag, input_radius],
draw;
draw = function () {
var real = parseFloat(input_real.value),
imag = parseFloat(input_imag.value),
a = new Complex(real, imag),
radius = parseFloat(input_radius.value),
points = [],
xmin = -1.5 * (Math.abs(real) + radius),
ymin = -1.5 * (Math.abs(imag) + radius),
min = Math.min(xmin, ymin),
max = -min,
svg,
xscale,
yscale,
xaxis,
yaxis;
range(min, max, (max - min) / 100).forEach(function (y) {
range(min, max, (max - min) / 100).forEach(function (x) {
points.push([x, y]);
})
});
div_graph.innerHTML = '';
svg = d3.select('#graph0')
.append('svg')
.attr('width', width)
.attr('height', height);
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);
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).magnitude().le(radius)) {
return 'green';
} else {
return 'yellow';
}
});
svg.append('circle')
.attr('cx', xscale(real))
.attr('cy', yscale(imag))
.attr('r', 2)
.attr('fill', 'red');
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,
0 コメント:
コメントを投稿