astarasikov · February 3, 2014 20:42
diff --git a/Hilbert Curve 2D b/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>