プログラミングとイラストレーション » ヒルベルト曲線|HTML5
プログラミングとイラストレーション > HTML5 > ヒルベルト曲線|HTML5

ヒルベルト曲線|HTML5

ヒルベルト

ヒルベルト曲線(HTML5, JavaScript, CSS3) : デモ

ヒルベルト曲線(HTML5, JavaScript, CSS3) : ZIPファイル(4kb)

1.HTML

<!DOCTYPE html>
<html lang="jp">
	<head>
		<meta charset="UTF-8" />
		<title>Hilbert Curve</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 = 10;
	var centerY = (theCanvas.currentStyle || document.defaultView.getComputedStyle(theCanvas,'')).height;
	centerY = Number(centerY.replace('px',''));
	centerY =  centerY / 2;
	centerY = 10;
	var ctx = theCanvas.getContext("2d");
	
	var X = 0;
	var Y = 0;
	var ID = 0;
	var H = 0;
	var OrderNo = 0;
	var Istep = 0;
		
	var nowX = 0;
	var nowY = 0;
	
	init();
	
	function initPosition(X,Y)
	{
		nowX = X;
		nowY = Y;
	}
	
	function relativeDraw(X,Y)
	{
		var NX = nowX + X;
		var NY = nowY + Y;
		
		ctx.strokeStyle="#000000";
		ctx.lineWidth=1;
		ctx.beginPath();
		
        ctx.moveTo(centerX + nowX*0.1, centerY + nowY*0.1);
        ctx.lineTo(centerX + NX*0.1, centerY + NY*0.1);
        ctx.stroke();
        ctx.fill();
	    ctx.closePath();
	    
	    nowX = NX;
	    nowY = NY;
	}
	
	function init()
	{
		var Order = 4;
		H = 1;
		var S = 2760;
		S = S/H;
		ID = Order;
		for(var i = 2;i<=Order;i++)
		{
			H = H*2+1;
		}
		H = S/H;
		ID = Order;
		initPosition(0,0);
		RUL();
	}
	
	function RUL()
	{
		if(ID>0)
		{
			ID = ID-1;
			URD();
			relativeDraw(H,0);
			RUL();
			relativeDraw(0,H);
			RUL();
			relativeDraw(-H,0);
			DLU();
			ID=ID+1;
		}
	}
	
	function DLU()
	{
		if(ID>0)
		{
			ID = ID-1;
			LDR();
			relativeDraw(0,-H);
			DLU();
			relativeDraw(-H,0);
			DLU();
			relativeDraw(0,H);
			RUL();
			ID= ID+1;
		}
	}
	
	function LDR()
	{
		if(ID>0)
		{
			ID = ID-1;
			DLU();
			relativeDraw(-H,0);
			LDR();
			relativeDraw(0,-H);
			LDR();
			relativeDraw(H,0);
			URD();
			ID= ID+1;
		}
	}
	
	function URD()
	{
		if(ID>0)
		{
			ID = ID-1;
			RUL();
			relativeDraw(0,H);
			URD();
			relativeDraw(H,0);
			URD();
			relativeDraw(0,-H);
			LDR();
			ID= ID+1;
		}
	}	
}

コメントを残す

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

コメントフィード

トラックバック URL : http://www.htmlcode.jp/%e3%83%92%e3%83%ab%e3%83%99%e3%83%ab%e3%83%88%e6%9b%b2%e7%b7%9a%ef%bd%9chtml5/trackback/