ElemarJR/hilbert.htm

## hilbert.htm
<!DOCTYPE html>
<html>
<head>
    <title>Hibert</title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"
        rel="stylesheet" type="text/css" />
    <style>
        *
        {
            font-family: Sans-Serif;
        }

        #workbench
        {
            width: 495px;
            height 490px;
            margin: 10px auto;
            border: 1 solid #000;
        }

        canvas
        {
            display: block;
            margin-right: 0;
            border: 1px solid #ccc;
            float: left;
        }

        #centerXSlider
        {
            width: 476px;
            margin: 0;
        }

        #centerYSlider
        {
            margin: 0 0 0 auto;
            height: 480px;
        }

        .sliders
        {
            margin: 10px auto;
            width: 480px;
            display: block;
        }
    </style>
</head>
<body>
    <div id="workbench">
        <canvas id='myCanvas' height="480" width="480">
        </canvas>
        <div id="centerYSlider">
        </div>
        <div id="centerXSlider">
        </div>
    </div>
    <label class="sliders" for="depthSlider">
        Depth</label>
    <div class="sliders" id="depthSlider">
    </div>
    <label class="sliders" for="lengthSlider">
        Length</label>
    <div class="sliders" id="lengthSlider">
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"
        type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            // -----------------------------------------------------

            var canvas = document.getElementById('myCanvas');
            var context = canvas.getContext('2d');

            var canvasWidth = 480;
            var canvasHeight = 480;

            // -----------------------------------------------------
            $("#depthSlider").slider(
            {
                min: 0, max: 5, value: 0, animate: true,
                change: function (e, ui) { update(); }
            });


            $("#lengthSlider").slider(
            {
                min: 5, max: 100, step: 0.01, value: 30, animate: true,
                change: function (e, ui) { update(); }
            });

            $("#centerXSlider").slider(
            {
                min: 0, max: 480, value: 240, animate: true,
                change: function (e, ui) { update(); }
            });

            $("#centerYSlider").slider(
            {
                min: 0, max: 480, value: 240, animate: true, orientation: "vertical",
                change: function (e, ui) { update(); }
            });

            // -----------------------------------------------------

            function getDepth() {
                return $("#depthSlider").slider("value");
            }

            function getLength() {
                return $("#lengthSlider").slider("value");
            }


            function getCenterX() {
                return $("#centerXSlider").slider("value");
            }

            function getCenterY() {
                return $("#centerYSlider").slider("value"); ;
            }

            // -----------------------------------------------------

            function drawLine(x1, y1, x2, y2) {
                with (context) {
                    beginPath();
                    moveTo(getCenterX() + x1, canvasHeight - (getCenterY() + y1));
                    lineTo(getCenterX() + x2, canvasHeight - (getCenterY() + y2));
                    closePath();
                    stroke();
                }
            }

            function drawZero() {
                context.strokeStyle = '#f00';
                drawLine(-10, 0, 10, 0);
                drawLine(0, -10, 0, 10);
                context.strokeStyle = '#000';
            }

            function DTR(x) {
                return x * Math.PI / 180;
            }

            currentX = 0;
            currentY = 0;
            function walk(dx, dy) {
                drawLine(currentX, currentY, currentX + dx, currentY + dy);
                currentX += dx;
                currentY += dy;
            }

            function hibert(depth, dx, dy) {
                with (context) {
                    if (depth > 0) hibert(depth - 1, dy, dx);
                    walk(dx, dy);
                    if (depth > 0) hibert(depth - 1, dx, dy);
                    walk(dy, dx);
                    if (depth > 0) hibert(depth - 1, dx, dy);
                    walk(-dx, -dy);
                    if (depth > 0) hibert(depth - 1, -dy, -dx);

                }
            }

            function getSize() {
                return getLength() * (Math.pow(2, getDepth() + 1) - 1);
            }

            function update() {
                with (context) {
                    currentX = -getSize() / 2;
                    currentY = -getSize() / 2;
                    clearRect(0, 0, canvasWidth, canvasHeight);
                    hibert(getDepth(), getLength(), 0);
                }

                drawZero();
            }

            update();
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Hibert</title>
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"
	rel="stylesheet" type="text/css" />
	<style>
	*
	{
	font-family: Sans-Serif;
	}

	#workbench
	{
	width: 495px;
	height 490px;
	margin: 10px auto;
	border: 1 solid #000;
	}

	canvas
	{
	display: block;
	margin-right: 0;
	border: 1px solid #ccc;
	float: left;
	}

	#centerXSlider
	{
	width: 476px;
	margin: 0;
	}

	#centerYSlider
	{
	margin: 0 0 0 auto;
	height: 480px;
	}

	.sliders
	{
	margin: 10px auto;
	width: 480px;
	display: block;
	}
	</style>
	</head>
	<body>
	<div id="workbench">
	<canvas id='myCanvas' height="480" width="480">
	</canvas>
	<div id="centerYSlider">
	</div>
	<div id="centerXSlider">
	</div>
	</div>
	<label class="sliders" for="depthSlider">
	Depth</label>
	<div class="sliders" id="depthSlider">
	</div>
	<label class="sliders" for="lengthSlider">
	Length</label>
	<div class="sliders" id="lengthSlider">
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"
	type="text/javascript"></script>
	<script type="text/javascript">
	$(function () {
	// -----------------------------------------------------

	var canvas = document.getElementById('myCanvas');
	var context = canvas.getContext('2d');

	var canvasWidth = 480;
	var canvasHeight = 480;

	// -----------------------------------------------------
	$("#depthSlider").slider(
	{
	min: 0, max: 5, value: 0, animate: true,
	change: function (e, ui) { update(); }
	});


	$("#lengthSlider").slider(
	{
	min: 5, max: 100, step: 0.01, value: 30, animate: true,
	change: function (e, ui) { update(); }
	});

	$("#centerXSlider").slider(
	{
	min: 0, max: 480, value: 240, animate: true,
	change: function (e, ui) { update(); }
	});

	$("#centerYSlider").slider(
	{
	min: 0, max: 480, value: 240, animate: true, orientation: "vertical",
	change: function (e, ui) { update(); }
	});

	// -----------------------------------------------------

	function getDepth() {
	return $("#depthSlider").slider("value");
	}

	function getLength() {
	return $("#lengthSlider").slider("value");
	}


	function getCenterX() {
	return $("#centerXSlider").slider("value");
	}

	function getCenterY() {
	return $("#centerYSlider").slider("value"); ;
	}

	// -----------------------------------------------------

	function drawLine(x1, y1, x2, y2) {
	with (context) {
	beginPath();
	moveTo(getCenterX() + x1, canvasHeight - (getCenterY() + y1));
	lineTo(getCenterX() + x2, canvasHeight - (getCenterY() + y2));
	closePath();
	stroke();
	}
	}

	function drawZero() {
	context.strokeStyle = '#f00';
	drawLine(-10, 0, 10, 0);
	drawLine(0, -10, 0, 10);
	context.strokeStyle = '#000';
	}

	function DTR(x) {
	return x * Math.PI / 180;
	}

	currentX = 0;
	currentY = 0;
	function walk(dx, dy) {
	drawLine(currentX, currentY, currentX + dx, currentY + dy);
	currentX += dx;
	currentY += dy;
	}

	function hibert(depth, dx, dy) {
	with (context) {
	if (depth > 0) hibert(depth - 1, dy, dx);
	walk(dx, dy);
	if (depth > 0) hibert(depth - 1, dx, dy);
	walk(dy, dx);
	if (depth > 0) hibert(depth - 1, dx, dy);
	walk(-dx, -dy);
	if (depth > 0) hibert(depth - 1, -dy, -dx);

	}
	}

	function getSize() {
	return getLength() * (Math.pow(2, getDepth() + 1) - 1);
	}

	function update() {
	with (context) {
	currentX = -getSize() / 2;
	currentY = -getSize() / 2;
	clearRect(0, 0, canvasWidth, canvasHeight);
	hibert(getDepth(), getLength(), 0);
	}

	drawZero();
	}

	update();
	});
	</script>
	</body>
	</html>