色分けした反復関数と確率による樹木の生成|HTML5

色分けした反復関数と確率による樹木の生成|HTML5

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

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

1.HTML

<!DOCTYPE html>
<html lang="jp">
	<head>
		<meta charset="UTF-8" />
		<title>Tree Color 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;
	background: #000;
}

#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 ID = 0;
	var T = 0;
	var R = 0;
	
	var A2 = "#0000ff";
	var A5 = "#ff0000";
	var A8 = "#0000ff";
	var A11 = "#00ff00";
	var A14 = "#ff00ff";
	var A17 = "#ffff00";
	
	var B2 = 0.1;
	var B5 = 0.2;
	var B8 = 0.2;
	var B11 = 0.2;
	var B14 = 0.2;
	var B17 = 0.1;
	
	var D2 = 0.05;
	var D3 = 0;
	var D5 = 0.05;
	var D6 = 0;
	var D8 = 0.46;
	var D9 = 0.39;
	var D11 = 0.47;
	var D12 = 0.17;
	var D14 = 0.43;
	var D15 = -0.25;
	var D17 = 0.42;
	var D18 = -0.35;
	
	var E2 = 0;
	var E3 = 0.6;
	var E5 = 0;
	var E6 = -0.5;
	var E8 = -0.32;
	var E9 = 0.5;
	var E11 = -0.15;
	var E12 = 0.42;
	var E14 = 0.28;
	var E15 = 0.45;
	var E17 = 0.26;
	var E18 = 0.31;
	
	var F2 = 0;
	var F3 = 0;
	var F5 = 0;
	var F6 = 1;
	var F8 = 0;
	var F9 = 0.6;
	var F11 = 0;
	var F12 = 1.1;
	var F14 = 0;
	var F15 = 1;
	var F17 = 0;
	var F18 = 0.7;
	
	var FunA = new Array(6);
	for(var i=0; i<FunA.length;i++)
	{
		FunA[i] = new Array(2);
		for(var j=0; j<2; j++)
		{
			FunA[i][j]=['',''];
		}
	}
	
	var FunB = new Array(6);
	for(var i=0; i<FunB.length;i++)
	{
		FunB[i] = ['',''];
	}
	
	var CumulativeProbability = new Array(6);//累積確率
	
	var colors = new Array(6);
	
	var points = new Array();
	var dis = 0.5;
	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};
	}
	
	iteratedFunction();

	function init()
	{
		ID = 2;
		T = 0;
		for(var i=0; i<6; i++)
		{
			colors[i] = eval('A'+ID);
			T = T + eval('B'+ID);
			CumulativeProbability[i]=T;
			FunA[i][0][0]=eval('D'+ID);
			FunA[i][0][1]=eval('E'+ID);
			FunA[i][1][0]=eval('D'+(ID+1));
			FunA[i][1][1]=eval('E'+(ID+1));
			FunB[i][0]=eval('F'+ID);
			FunB[i][1]=eval('F'+(ID+1));
			ID = ID + 3;
		}
	}
	
	function iteratedFunction()
	{
		init();
		
		X0 = 1;
		Y0 = 1;
		
		//iteratedFunction colors
		for(var i=0; i<=20000; i++)
		{
			var R = Math.random();
			ID = 5;
			for(var j = 0; j<6; j++)
			{
				if(R<CumulativeProbability[j])
				{
					ID = j;
					break;
				}
				
			}
			X1 = FunA[ID][0][0]*X0+FunA[ID][0][1]*Y0+FunB[ID][0];
			Y1 = FunA[ID][1][0]*X0+FunA[ID][1][1]*Y0+FunB[ID][1];
			setDraw(ctx,theCanvas,centerX+(X1*130),centerY-(Y1*130),colors[ID]);
			X0 = X1;
			Y0 = Y1;
		}
	}
	
	function setDraw(ctx,theCanvas,offsetX,offsetY,c)
	{
		ctx.strokeStyle= c;
		ctx.lineWidth=0;
		ctx.fillStyle = c;
		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();
	}
}

コメントを残す

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