Skip to content

Instantly share code, notes, and snippets.

@dekokun
Created January 2, 2012 08:58
Show Gist options
  • Save dekokun/1549936 to your computer and use it in GitHub Desktop.
Save dekokun/1549936 to your computer and use it in GitHub Desktop.
正月はフラクタル

正月だからフラクタル

正月といえばフラクタルだそうですので、ちょうど現在パーフェクトJavaScriptで勉強していることもあり、JavaScriptとcanvasタグを使用しシェルピンスキーのギャスケットを描画してみました。
JavaScript、ほぼ初めて書いた…
ソースコードはこのページの下部に記載してありますよ。
change_patを書き換えていろいろな画像を出力しても面白いと思いますよ。

正月はフラクタルの元ネタ様 ?

http://d.hatena.ne.jp/ku-ma-me/20100102/p1

スクリーンショット

a

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="cv" style="background-color:white;"></canvas>
<script src="Sierpinski.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
window.onload = function(){
Array.prototype.fill = function(item) {
var result = [].concat(this);
for (var i = 0; i < result.length; i++) {
result[i] = item;
}
return result;
};
// 状態定義
var death = 0;
var live = 1;
// ルール指定
var change_pat = { 0:death, 1:live, 2:death, 3:live, 4:live, 5:death, 6:live, 7:death };
// 初期状態指定
var first_state_length = 1001;
var first_state = (new Array(first_state_length)).fill(death);
first_state.splice(Math.floor(first_state_length/2), 1, live);
// 世代数指定
var last_generation = 500;
var now_state = first_state;
var next_state = [];
var next_individual;
var all_state = [];
var influence_indivisuals;
var cylinder_state;
for (var i = 0; i < last_generation; i++) {
// 配列の前後がくっついている円筒形を模すために、lastと[0]を前後にくっつけた配列作成
cylinder_state = [].concat(now_state);
cylinder_state.unshift(now_state[first_state_length - 1]);
cylinder_state.push(now_state[0]);
for (var j = 0; j < (length = now_state.length); j++) {
influence_indivisuals = cylinder_state.slice(j,j+3);
next_individual = change_pat[parseInt(influence_indivisuals.join(''), 2)];
next_state[j] = next_individual;
}
all_state.push(now_state);
now_state = next_state;
next_state = [];
}
elmCv = document.getElementById('cv');
elmCv.height = last_generation;
elmCv.width = first_state_length;
ctxCv = elmCv.getContext('2d');
ctxCv.lineWidth = 1;
var x = 0;
var y = 0;
var size = 1;
var display_state = function(generation){
return function(){
all_state[generation].forEach(function(individual){
if (individual === live) {
ctxCv.fillStyle = "red";
ctxCv.fillRect(x, y, size, size);
}
x += size;
});
x = 0;
y = (generation + 1) * size;
if (generation < last_generation){
setTimeout(display_state(generation + 1), 10);
}
};
};
display_state(0)();
}();
@dekokun
Copy link
Author

dekokun commented Jan 5, 2012

jsdoit使って誰でも見られる形にした。
http://jsdo.it/dekokun/1uZq

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment