反復関数と確率による樹木の生成|HTML5

反復関数と確率による樹木の生成|HTML5

反復関数と確率による樹木の生成(HTML5, JavaScript, CSS3) : デモ

反復関数と確率による樹木の生成(HTML5, JavaScript, CSS3) : ZIPファイル(5kb)

1.HTML

<!DOCTYPE html>
<html lang="jp">
	<head>
		<meta charset="UTF-8" />
		<title>Tree IFS</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 = 5;
	var centerY = (theCanvas.currentStyle || document.defaultView.getComputedStyle(theCanvas,'')).height;
	centerY = Number(centerY.replace('px',''));
	centerY =  centerY / 1.04;
	var ctx = theCanvas.getContext("2d");
	
	var max = 20002;
	var A = new Array();
	var B = new Array();
	var C = new Array();
	var D = new Array();
	var E = new Array();
	var G = new Array();
	var H = new Array();
	var I = new Array();
	var F = new Array();
	
	A[0] = 0;
	B[0] = 0;
	
	C[0] = 1;
	D[0] = 1;
	
	E[0] = 0.1;
	E[3] = 0.2;
	E[6] = 0.2;
	E[9] = 0.2;
	E[12] = 0.2;
	E[15] = 0.1;
	
	G[0] = 0.05;
	G[1] = 0;
	H[0] = 0;
	H[1] = 0.6;
	I[0] = 0;
	I[1] = 0;
	
	G[3] = 0.05;
	G[4] = 0;
	H[3] = 0;
	H[4] = -0.5;
	I[3] = 0;
	I[4] = 1;
	
	G[6] = 0.46;
	G[7] = 0.39;
	H[6] = -0.32;
	H[7] = 0.5;
	I[6] = 0;
	I[7] = 0.6;
	
	G[9] = 0.47;
	G[10] = 0.17;
	H[9] = -0.15;
	H[10] = 0.42;
	I[9] = 0;
	I[10] = 1.1;
	
	G[12] = 0.43;
	G[13] = -0.25;
	H[12] = 0.28;
	H[13] = 0.45;
	I[12] = 0;
	I[13] = 1;
	
	G[15] = 0.42;
	G[16] = -0.35;
	H[15] = 0.26;
	H[16] = 0.31;
	I[15] = 0;
	I[16] = 0.7;
	
	F[0] = E[0];
	F[3] = F[0]+E[3];
	F[6] = F[3]+E[6];
	F[9] = F[6]+E[9];
	F[12] = F[9]+E[12];
	F[15] = F[12]+E[15];
	
	for(var i=1; i<=max;i++)
	{
		A[i]= Math.random();
	}
	
	for(i=1; i<=max;i++)
	{
		if(A[i]<F[0])
		{
			B[i] = 1;
		}
		else
		if(A[i]<F[3])
		{
			B[i] = 2;
		}
		else
		if(A[i]<F[6])
		{
			B[i] = 3;
		}
		else
		if(A[i]<F[9])
		{
			B[i] = 4;
		}
		else
		if(A[i]<F[12])
		{
			B[i] = 5;
		}
		else
		if(A[i]<F[15])
		{
			B[i] = 6;
		}
	}
	
	for(i=1; i<=max;i++)
	{
		if(B[i]==1)
		{
			C[i] = G[0]*C[i-1]+H[0]*D[i-1]+I[0];
			D[i] = G[1]*C[i-1]+H[1]*D[i-1]+I[1];
		}
		else
		if(B[i]==2)
		{
			C[i] = G[3]*C[i-1]+H[3]*D[i-1]+I[3];
			D[i] = G[4]*C[i-1]+H[4]*D[i-1]+I[4];
		}
		else
		if(B[i]==3)
		{
			C[i] = G[6]*C[i-1]+H[6]*D[i-1]+I[6];
			D[i] = G[7]*C[i-1]+H[7]*D[i-1]+I[7];
		}
		else
		if(B[i]==4)
		{
			C[i] = G[9]*C[i-1]+H[9]*D[i-1]+I[9];
			D[i] = G[10]*C[i-1]+H[10]*D[i-1]+I[10];
		}
		else
		if(B[i]==5)
		{
			C[i] = G[12]*C[i-1]+H[12]*D[i-1]+I[12];
			D[i] = G[13]*C[i-1]+H[13]*D[i-1]+I[13];
		}
		else
		if(B[i]==6)
		{
			C[i] = G[15]*C[i-1]+H[15]*D[i-1]+I[15];
			D[i] = G[16]*C[i-1]+H[16]*D[i-1]+I[16];
		}
	}
	
	var points = new Array();
	var dis = 0.7;
	var degs = [45,135,225,315];
	
	for (var i = 0; i < 4; i++)
	{
		var deg = degs[i];
		var x = Math.cos(deg*Math.PI/180)*dis;
		var y = Math.sin(deg*Math.PI/180)*dis;
		points[i]={x:x, y:y};
		
	}
	
	for(i=0; i<C.length;i++)
	{
		setDraw(ctx, theCanvas, centerX+C[i]*140 ,centerY-D[i]*140);
	}
	
	function setDraw(ctx,theCanvas,offsetX,offsetY)
	{
		ctx.strokeStyle="#000000";
		ctx.lineWidth=0;
		ctx.fillStyle = "#000000";
		ctx.beginPath();
		ctx.moveTo(points[0].x + offsetX, points[0].y + offsetY);
		
		for (var i = 1; i < points.length; i++)
		{
			ctx.lineTo(points[i].x + offsetX, points[i].y + offsetY);
		}
		ctx.lineTo(points[0].x + offsetX, points[0].y + offsetY);
		ctx.fill();
		ctx.stroke();
	}
}

コメントを残す

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