開発環境
開発環境
- OS X El Capitan - Apple (OS)
- Emacs (Text Editor)
- JavaScript (プログラミング言語)
- D3.js (JavaScript Library)
- Safari(Web browser)
- JavaScript 第6版 (David Flanagan(著)、村上 列(翻訳)、オライリージャパン)(参考書籍)
- JavaScriptリファレンス 第6版(David Flanagan(著)、木下 哲也(翻訳)、オライリージャパン)(参考書籍)
Pythonからはじめる数学入門 (Amit Saha (著)、黒川 利明 (翻訳)、オライリージャパン)の6章(幾何図形とフラクタルを描画する)、6.2(フラクタルを描く)、6.2.2(バーンスレイのシダを描く)をJavaScriptで取り組んでみる。
6.2.2(バーンスレイのシダを描く)
コード(Emacs)
HTML5
<div id="graph0"></div>
<label for="points0">
点の数:
</label>
<input id="points0" type="number" min="1" step="1" value="1000">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script src="barnsley_fern.js"></script>
JavaScript
(function () {
'use strict';
var width = 600,
height = 600,
padding = 50,
div_graph = document.querySelector('#graph0'),
input_points = document.querySelector('#points0'),
transform1,
transform2,
transform3,
transform4,
transform,
getIndex,
drawFern;
transform1 = function (points) {
var x = points[0],
y = points[1];
return [0.85 * x + 0.04 * y, -0.04 * x + 0.85 * y + 1.6];
};
transform2 = function (points) {
var x = points[0],
y = points[1];
return [0.2 * x - 0.26 * y, 0.23 * x + 0.22 * y + 1.6];
};
transform3 = function (points) {
var x = points[0],
y = points[1];
return [-0.15 * x + 0.28 * y, 0.26 * x + 0.24 * y + 0.44];
};
transform4 = function (points) {
var y = points[1];
return [0, 0.16 * y];
};
getIndex = function (probability) {
var r = Math.random(),
c_probability = 0,
sum_probability = [],
i,
max;
probability.forEach(function (p, i) {
c_probability += p;
sum_probability[i] = c_probability;
});
for (i = 0, max = sum_probability.length; i < max; i += 1) {
if (r <= sum_probability[i]) {
return i;
}
}
return probability.length - 1;
};
transform = function (points) {
var transformations = [transform1, transform2, transform3, transform4],
probability = [0.85, 0.07, 0.07, 0.01],
tindex = getIndex(probability),
t = transformations[tindex],
p = t(points);
return p;
};
drawFern = function () {
var n = parseInt(input_points.value, 10),
i,
point = [0, 0],
points = [point],
svg,
xscale,
xaxis,
yscale,
yaxis,
points;
div_graph.innerHTML = '';
svg = d3.select('#graph0')
.append('svg')
.attr('width', width)
.attr('height', height);
xscale = d3.scaleLinear()
.domain([-3, 3])
.range([padding, width - padding]);
yscale = d3.scaleLinear()
.domain([0, 10])
.range([height - padding, padding]);
xaxis = d3.axisBottom().scale(xscale);
yaxis = d3.axisLeft().scale(yscale);
for (i = 0; i < n; i += 1) {
point = transform(point);
points.push(point);
}
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', 1)
.attr('fill', 'green');
svg.append('g')
.attr('transform', 'translate(0, ' + (height - padding + ')'))
.call(xaxis);
svg.append('g')
.attr('transform', 'translate(' + padding + ', 0)')
.call(yaxis);
};
drawFern();
input_points.onchange = drawFern;
}());
0 コメント:
コメントを投稿