dekokun/1Sierpinski.markdown

## 1Sierpinski.markdown

      
    Raw
  

              1Sierpinski.markdown
            
          
    正月だからフラクタル

正月といえばフラクタルだそうですので、ちょうど現在パーフェクトJavaScriptで勉強していることもあり、JavaScriptとcanvasタグを使用しシェルピンスキーのギャスケットを描画してみました。

JavaScript、ほぼ初めて書いた…

ソースコードはこのページの下部に記載してありますよ。

change_patを書き換えていろいろな画像を出力しても面白いと思いますよ。
正月はフラクタルの元ネタ様 ?

http://d.hatena.ne.jp/ku-ma-me/20100102/p1
スクリーンショット


## Sierpinski.html
<!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>

## Sierpinski.js
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)();
}();
	<!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)();
	}();