マンデルブロー集合|HTML5

マンデルブロー集合|HTML5

マンデルブロー集合(HTML5, JavaScript, CSS3) : デモ

マンデルブロー集合(HTML5, JavaScript, CSS3) : ZIPファイル(5kb)

1.HTML

<!DOCTYPE html>
<html lang="jp">
	<head>
		<meta charset="UTF-8" />
		<title>マンデルブロ集合 | Manndelbrot Set</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 id="data"></div>
		</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:#00ffff;
}

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

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

#data
{
	position: absolute;
	top: 10px;
	left: 10px;
	width: 300px;
	height:300px;
}

3.JavaScript

base.js

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

function init()
{
	var theCanvas = document.getElementById("canvas");
	var ctx = theCanvas.getContext("2d");
	
	var widthX = 300;
	var heightY = 302;
	var xx = 0;
	var yy = 0;
	var repMax = 256;	//最大計算回数
	var creal = -1.94;	//実数部(-1.94)
	var cimag = -1.3;	//虚数部(-1.3)
	var czoom = 1;
	var cscale = 2.6 / czoom;//描画範囲
	var a = creal;
	var b = cimag;
	var n = 0;
	var col = 0;
	var step = Math.abs(cscale / widthX);
	
	for(var i=0; i<=widthX*heightY; i++)
	{
		mandelbrot();
		if (xx > widthX)
		{
			xx = -1;
			a = creal;
			yy ++;
			b += step;
		}
		
		xx ++;
		a += step;
	}
	
	function mandelbrot()
	{
		var zx = 0;
		var zxx = 0;
		var zy = 0;
		var zyy = 0;
		n = 0;
		while ( n < repMax ) 
		{
			zxx = zx*zx-zy*zy+a;
			zyy = 2*zx*zy+b;
			zx = zxx;
			zy = zyy;
			
			if ((zx*zx+zy*zy)>4) 
			{ 
				break;
			}
			n++;
		}
		getColor();
		draw(xx,yy,col);
	}
	
	function getColor()
	{
		var r = (n%64)*4;
		var g = (n%32)*8;
		var b = (n%16)*16;
		col = r*256*256+g*256+b;
	}
	
	function draw(X,Y,col)
	{
		//ctx.strokeStyle="#"+col.toString(16);
		//ctx.lineWidth=1;
		if(col.toString(16).length<2)
		{
			ctx.fillStyle = "#00000"+col.toString(16);
			//var c = "#00000"+col.toString(16);
		}
		else
		if(col.toString(16).length<6)
		{
			ctx.fillStyle = "#0"+col.toString(16);
			//var c = "#0"+col.toString(16);
		}
		else
		{
			ctx.fillStyle = "#"+col.toString(16);
			//c="#"+col.toString(16);
		}
		//document.getElementById('data').innerHTML=c;
		ctx.beginPath();
		ctx.moveTo(X, Y);
		ctx.lineTo(X + 1, Y);
		ctx.lineTo(X + 1, Y + 1);
		ctx.lineTo(X, Y + 1);
		ctx.lineTo(X, Y);
		ctx.fill();
		ctx.closePath();
		//ctx.stroke();
	}
}

コメントを残す

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