学習環境/開発環境
- 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.2(複素平面)、1直線上にある3点、同じ向きに相似な三角形、問14.を取り組んでみる。
問14.
number.js、D3.js を利用して必要条件であることを確認。
HTML5
<div id="graph0"></div>
<span style="color:red">α</span> =
<label for="real0">
</label>
<input id="real0" type="number" value="0"> +
<label for="imag0">
</label>
<input id="imag0" type="number" value="0">i
<br>
<span style="color:blue">β</span> =
<label for="real1">
</label>
<input id="real1" type="number" value="1"> +
<label for="imag1">
</label>
<input id="imag1" type="number" value="0">i
<br>
<span style="color:green">γ</span> = <span id="gamma0"></span>
<br>
α^2 + β^2 + γ^2 - αβ - βγ - γα = <span id="answer0"></span>
<br>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script src="number.js"></script>
<script src="sample14.js"></script>
JavaScript
コード(Emacs)
(function () {
'use strict';
var svg,
width = 600,
height = 600,
padding = 50,
xscale,
xaxis,
yscale,
yaxis,
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],
span_gamma = document.querySelector('#gamma0'),
span_answer = document.querySelector('#answer0'),
gamma,
complexFromMagArg,
draw,
calc,
output;
complexFromMagArg = function (mag, arg) {
var real = mag * Math.cos(arg),
imag = mag * Math.sin(arg);
return new Complex(real, imag);
};
gamma = function (a, b) {
var c = complexFromMagArg(1, Math.PI / 3);
return b.sub(a).mul(c).add(a);
};
draw = function (zs) {
var points = [],
min,
max = -Infinity,
colors = ['red', 'blue', 'green'];
zs.forEach(function (z) {
var x = z.getReal(),
y = z.getImag(),
max0 = Math.max(Math.abs(x), Math.abs(y));
if (max0 > max) {
max = max0;
}
points.push([x, y]);
});
max = max * 1.5;
min = -max;
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);
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', 5)
.attr('fill', function (d, i) {
return colors[i];
});
svg.append('g')
.attr('transform', 'translate(0, ' + (height / 2) + ')')
.call(xaxis);
svg.append('g')
.attr('transform', 'translate(' + (width / 2) + ', 0)')
.call(yaxis);
};
calc = function (a, b, c) {
return a.mul(a).add(b.mul(b)).add(c.mul(c))
.sub(a.mul(b)).sub(b.mul(c)).sub(c.mul(a));
};
output = 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),
c = gamma(a, b),
answer = calc(a, b, c);
span_gamma.innerHTML = '<math>' + c + '</math>';
draw([a, b, c]);
span_answer.innerHTML = '<math>' + answer + '</math>';
};
inputs.forEach(function (input) {
input.onchange = output;
});
output();
}());
α =
+
i
β = + i
γ =
α^2 + β^2 + γ^2 - αβ - βγ - γα =
0 コメント:
コメントを投稿