プログラミングとイラストレーション » フラクタルによる木立枯れ|HTML5
プログラミングとイラストレーション > HTML5 > フラクタルによる木立枯れ|HTML5

フラクタルによる木立枯れ|HTML5

木立枯れ

フラクタルによる木立枯れ(HTML5, JavaScript, CSS3) : デモ

シェルペンスキーのギャスケット(HTML5, JavaScript, CSS3) : ZIPファイル(4kb)

フラクタル幾何学の古典的図形、セルオートマトンによるシェルペンスキーのギャスケット(HTML5, JavaScript, CSS3)

1.HTML

<!DOCTYPE html>
<html lang="jp">
	<head>
		<meta charset="UTF-8" />
		<title>フラクタルの木立ち枯れ</title>
		<link href="css/base.css" rel="stylesheet" type="text/css">
		<script src="js/base.js"></script>
	</head>
	<body>
		<div id="contents">
			<canvas id="canvas" width="300" height="300">
			</canvas>
		</div>
	</body>
</html>

2.CSS

@charset "utf-8";

body
{
	margin:0;
	padding:0;
	background-color: #fff;
	font-family:Helvetica, HiraKakuProN-W3, sans-serif; 
	font-size:25px;
	color:#fff;
}

#contents
{
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height:300px;
	border: 1px solid #000;
	overflow:hidden;
}

#canvas
{
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height:300px;
}

3.JavaScript

base.js

window.addEventListener("load", init, false);

function init()
{
	var theCanvas = document.getElementById("canvas");
	var centerX = (theCanvas.currentStyle || document.defaultView.getComputedStyle(theCanvas,'')).width;
	centerX = Number(centerX.replace('px',''));
	centerX =  centerX / 2;
	centerX = 25;
	var centerY = (theCanvas.currentStyle || document.defaultView.getComputedStyle(theCanvas,'')).height;
	centerY = Number(centerY.replace('px',''));
	centerY =  centerY / 2;
	var ctx = theCanvas.getContext("2d");
	
	var X = 0;
	var Y = 0;
	var nowX = 0;
	var nowY = 0;
	var nowD = 0;
	var trees1 = new Array();
	var trees2 = new Array();
	
	trees1.push(0, -88, 176, -88);
	trees2.push(0.28, 0.28, 0.28, 0.7);
	fractal(250);
	
	function directionChange(degree)
	{
		nowD = nowD + degree;
	}
	
	function process(length)
	{
		X = nowX + length * Math.cos(nowD * Math.PI / 180);
		Y = nowY + length * Math.sin(nowD * Math.PI / 180);
		
		ctx.lineWidth = 1;
	    ctx.strokeStyle = '#000000';
	    //ctx.fillStyle = c;
		ctx.beginPath();
		ctx.moveTo(centerX + nowX, centerY + nowY);
        ctx.lineTo(centerX + X, centerY + Y);
	    //ctx.fill();
	    ctx.stroke();
	    ctx.closePath();
		
		nowX = X;
		nowY = Y;
		
	}
		
	function fractal(length)
	{
		if (length <= 2)
		{
			process(length);
		}
		else
		{
			for (var i = 0; i < 4; i++)
			{
				directionChange(trees1[i]);
				fractal(length * trees2[i]);
			}
		}
	}
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントフィード

トラックバック URL : http://www.htmlcode.jp/%e3%83%95%e3%83%a9%e3%82%af%e3%82%bf%e3%83%ab%e3%81%ab%e3%82%88%e3%82%8b%e6%9c%a8%e7%ab%8b%e6%9e%af%e3%82%8c%ef%bd%9chtml5/trackback/