プログラミングとイラストレーション » 反復関数と確率によるシダ植物の生成|HTML5 Canvas
プログラミングとイラストレーション > HTML5 > 反復関数と確率によるシダ植物の生成|HTML5 Canvas

反復関数と確率によるシダ植物の生成|HTML5 Canvas

反復関数と確率によるシダ植物の生成|HTML5

反復関数と確率によるシダ植物の生成(HTML5, JavaScript, CSS3) : デモ

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

1.HTML

<!DOCTYPE html>
<html lang="jp">
	<head>
		<meta charset="UTF-8" />
		<title>Sierpinski Curve 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 = 5;
	var centerY = (theCanvas.currentStyle || document.defaultView.getComputedStyle(theCanvas,'')).height;
	centerY = Number(centerY.replace('px',''));
	centerY =  centerY / 1.7;
	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] = 0;
	
	E[0] = 1/2;
	E[3] = 1/2;
	
	G[0] = 0.5;
	G[1] = Math.sqrt(3)/6;
	H[0] = Math.sqrt(3)/6;
	H[1] = -0.5;
	I[0] = 0;
	I[1] = 0;
	
	G[3] = 0.5;
	G[4] = -(Math.sqrt(3)/6);
	H[3] = -(Math.sqrt(3)/6);
	H[4] = -0.5;
	I[3] = 0.5;
	I[4] = Math.sqrt(3)/6;
	
	F[0] = E[0];
	F[3] = F[0]+E[3];
	
	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;
		}
	}
	
	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];
		}
	}
	
	var points = new Array();
	var dis = 0.2;
	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]*290 ,centerY-D[i]*290);
	}
	
	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();
	}
}

コメントを残す

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

コメントフィード

トラックバック URL : http://www.htmlcode.jp/%e5%8f%8d%e5%be%a9%e9%96%a2%e6%95%b0%e3%81%a8%e7%a2%ba%e7%8e%87%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b7%e3%83%80%e6%a4%8d%e7%89%a9%e3%81%ae%e7%94%9f%e6%88%90%ef%bd%9chtml5-canvas/trackback/