astarasikov/Hilbert Curve 2D

## Hilbert Curve 2D
<html>

<script type="text/javascript">
	function d2xy(n, d) {
		var rx, ry, s, t, x, y;

		t = d;
		x = y = 0;
		for (s = 1; s < n; s *= 2) {
			rx = 1 & (t / 2);
			ry = 1 & (t ^ rx);
			var xy = rot(s, [x, y], rx, ry);
			x = xy[0];
			y = xy[1];

			x = x + s * rx;
			y = y + s * ry;
			t /= 4;
		}

		return [x, y];
	}

	function rot(n, xy, rx, ry) {
		if (ry == 0) {
			if (rx == 1) {
				xy[0] = (n - 1) - xy[0];
				xy[1] = (n - 1) - xy[1];
			}

			var t = xy[0];
			xy[0] = xy[1];
			xy[1] = t;
		}
		return xy;
	}

	function getNum(name) {
		var control = document.getElementById(name);
		return parseInt(control.value);
	}

	function draw() {
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");

		var order = getNum("hilord");
		var scale = getNum("hilscale");
		var count = getNum("hilcount");

		ctx.fillStyle = "blue";
		ctx.fillRect(0, 0, 300, 300);

		ctx.fillStyle = "yellow";
		ctx.beginPath();
		for (var i = 0; i < count; i++) {
			var xy = d2xy(order, i);
			ctx.lineTo(xy[0] * scale, xy[1] * scale);
		}
		ctx.stroke();
	}
</script>

<body onload="draw()">
	<form>
		Order: <input type="text" id="hilord" onchange="draw()" value="64"/>
		<br />
		Scale: <input type="number" id="hilscale" onchange="draw()"
			value="10" min="2" max="20" step="1"/>
		<br />
		Count: <input type="number" id="hilcount" onchange="draw()"
			value="400" min="0" max="10000" step="1"/>
		<br />
		<input type="button" value="repaint" onclick="draw()"/>
	</form>
	<canvas id="canvas" width="300" height="300"/>
</body>
</html>
	<html>

	<script type="text/javascript">
	function d2xy(n, d) {
	var rx, ry, s, t, x, y;

	t = d;
	x = y = 0;
	for (s = 1; s < n; s *= 2) {
	rx = 1 & (t / 2);
	ry = 1 & (t ^ rx);
	var xy = rot(s, [x, y], rx, ry);
	x = xy[0];
	y = xy[1];

	x = x + s * rx;
	y = y + s * ry;
	t /= 4;
	}

	return [x, y];
	}

	function rot(n, xy, rx, ry) {
	if (ry == 0) {
	if (rx == 1) {
	xy[0] = (n - 1) - xy[0];
	xy[1] = (n - 1) - xy[1];
	}

	var t = xy[0];
	xy[0] = xy[1];
	xy[1] = t;
	}
	return xy;
	}

	function getNum(name) {
	var control = document.getElementById(name);
	return parseInt(control.value);
	}

	function draw() {
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");

	var order = getNum("hilord");
	var scale = getNum("hilscale");
	var count = getNum("hilcount");

	ctx.fillStyle = "blue";
	ctx.fillRect(0, 0, 300, 300);

	ctx.fillStyle = "yellow";
	ctx.beginPath();
	for (var i = 0; i < count; i++) {
	var xy = d2xy(order, i);
	ctx.lineTo(xy[0] * scale, xy[1] * scale);
	}
	ctx.stroke();
	}
	</script>

	<body onload="draw()">
	<form>
	Order: <input type="text" id="hilord" onchange="draw()" value="64"/>
	<br />
	Scale: <input type="number" id="hilscale" onchange="draw()"
	value="10" min="2" max="20" step="1"/>
	<br />
	Count: <input type="number" id="hilcount" onchange="draw()"
	value="400" min="0" max="10000" step="1"/>
	<br />
	<input type="button" value="repaint" onclick="draw()"/>
	</form>
	<canvas id="canvas" width="300" height="300"/>
	</body>
	</html>