Hilbert curve - Revision history

Michael at 07:22, 8 June 2011

2011-06-08T07:22:06Z

← Older revision		Revision as of 07:22, 8 June 2011
Line 23:		Line 23:

	<jsxgraph width="600" height="600" box="jxgbox">		<jsxgraph width="600" height="600" box="jxgbox">
	var b = JXG.JSXGraph.initBoard('jxgbox', {~~originX~~: 20, ~~originY: 20~~, ~~unitX: 5~~, ~~unitY: 5~~});		var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-4, 4, 116, -116]});
	var UP = 0;		var UP = 0;
	var LEFT = 1;		var LEFT = 1;
Line 119:		Line 119:

	var curve = b.create('curve',[pointsX,pointsY],{curveType:'plot'});		var curve = b.create('curve',[pointsX,pointsY],{curveType:'plot'});
			// we don't need highlighting. improves speed on mouse move
			curve.hasPoint = function () { return false; }
	var s = b.create('slider', [[0.75,-110],[50,-110],[1,1,9]], {name:'S',snapWidth:1});		var s = b.create('slider', [[0.75,-110],[50,-110],[1,1,9]], {name:'S',snapWidth:1});
	/*
	~~function doIt(){~~
	~~pos = [0,0];~~
	~~pointsX = [0];~~
	~~pointsY = [0];~~
	~~maxlev = $('maxlev').value;~~
	~~step = 50/(Math.pow(2,maxlev-1));~~
	~~hilbert(maxlev,LEFT);~~
	~~curve.dataX = pointsX;~~
	~~curve.dataY = pointsY;~~
	~~b.update();~~
	}
	*/
	var oldlev = -1;		var oldlev = -1;
	curve.updateDataArray = function() {		curve.updateDataArray = function() {
Line 156:		Line 146:
	=== The underlying JavaScript code ===		=== The underlying JavaScript code ===
	<source lang="javascript">		<source lang="javascript">
	var b = JXG.JSXGraph.initBoard('jxgbox', {~~originX~~: 20, ~~originY: 20~~, ~~unitX: 5~~, ~~unitY: 5~~});		var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-4, 4, 116, -116]});
	var UP = 0;		var UP = 0;
	var LEFT = 1;		var LEFT = 1;
Line 252:		Line 242:

	var curve = b.create('curve',[pointsX,pointsY],{curveType:'plot'});		var curve = b.create('curve',[pointsX,pointsY],{curveType:'plot'});
			// we don't need highlighting. improves speed on mouse move
			curve.hasPoint = function () { return false; }

	var s = b.create('slider', [[0.75,-110],[50,-110],[1,1,9]], {name:'S',snapWidth:1});		var s = b.create('slider', [[0.75,-110],[50,-110],[1,1,9]], {name:'S',snapWidth:1});
	var oldlev = -1;		var oldlev = -1;

A WASSERMANN at 09:53, 25 March 2011

2011-03-25T09:53:16Z

← Older revision		Revision as of 09:53, 25 March 2011
Line 118:		Line 118:
	};		};

	var curve = b.~~createElement~~('curve',[pointsX,pointsY],{curveType:'plot'});		var curve = b.create('curve',[pointsX,pointsY],{curveType:'plot'});
	var s = b.~~createElement~~('slider', [[0.75,-110],[50,-110],[1,1,9]], {name:'S',snapWidth:1});		var s = b.create('slider', [[0.75,-110],[50,-110],[1,1,9]], {name:'S',snapWidth:1});
	/*		/*
	function doIt(){		function doIt(){
Line 251:		Line 251:
	};		};

	var curve = b.~~createElement~~('curve',[pointsX,pointsY],{curveType:'plot'});		var curve = b.create('curve',[pointsX,pointsY],{curveType:'plot'});
	var s = b.~~createElement~~('slider', [[0.75,-110],[50,-110],[1,1,9]], {name:'S',snapWidth:1});		var s = b.create('slider', [[0.75,-110],[50,-110],[1,1,9]], {name:'S',snapWidth:1});
	var oldlev = -1;		var oldlev = -1;
	curve.updateDataArray = function() {		curve.updateDataArray = function() {

A WASSERMANN at 09:42, 25 March 2011

2011-03-25T09:42:42Z

New page

The famous space filling curve drawn with JavaScript.
If it is set to level=9 the curve is defined by
262 144 points - so be careful if you are using Internet Explorer.
<html>

</html>

<jsxgraph width="600" height="600" box="jxgbox">
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 20, originY: 20, unitX: 5, unitY: 5});
var UP = 0;
var LEFT = 1;
var DOWN = 2;
var RIGHT = 3;
var pos = [0,0];
var step = 1;
var pointsX = [];
var pointsY = [];

move = function(dir) {
switch (dir) {
case LEFT:
pos[0] -= step;
break;
case RIGHT:
pos[0] += step;
break;
case UP:
pos[1] += step;
break;
case DOWN:
pos[1] -= step;
break;
}
pointsX[pointsX.length] = pos[0];
pointsY[pointsY.length] = pos[1];
};

hilbert = function(level,dir) {
if (level<=1) {
switch (dir) {
case LEFT:
move(RIGHT);
move(DOWN);
move(LEFT);
break;
case RIGHT:
move(LEFT);
move(UP);
move(RIGHT);
break;
case UP:
move(DOWN);
move(RIGHT);
move(UP);
break;
case DOWN:
move(UP);
move(LEFT);
move(DOWN);
break;
}
} else {
switch (dir) {
case LEFT:
hilbert(level-1,UP);
move(RIGHT);
hilbert(level-1,LEFT);
move(DOWN);
hilbert(level-1,LEFT);
move(LEFT);
hilbert(level-1,DOWN);
break;
case RIGHT:
hilbert(level-1,DOWN);
move(LEFT);
hilbert(level-1,RIGHT);
move(UP);
hilbert(level-1,RIGHT);
move(RIGHT);
hilbert(level-1,UP);
break;
case UP:
hilbert(level-1,LEFT);
move(DOWN);
hilbert(level-1,UP);
move(RIGHT);
hilbert(level-1,UP);
move(UP);
hilbert(level-1,RIGHT);
break;
case DOWN:
hilbert(level-1,RIGHT);
move(UP);
hilbert(level-1,DOWN);
move(LEFT);
hilbert(level-1,DOWN);
move(DOWN);
hilbert(level-1,LEFT);
break;
}
}
};

var curve = b.createElement('curve',[pointsX,pointsY],{curveType:'plot'});
var s = b.createElement('slider', [[0.75,-110],[50,-110],[1,1,9]], {name:'S',snapWidth:1});
/*
function doIt(){
pos = [0,0];
pointsX = [0];
pointsY = [0];
maxlev = $('maxlev').value;
step = 50/(Math.pow(2,maxlev-1));
hilbert(maxlev,LEFT);
curve.dataX = pointsX;
curve.dataY = pointsY;
b.update();
}
*/
var oldlev = -1;
curve.updateDataArray = function() {
maxlev = Math.round(s.Value());
if (oldlev==maxlev) {
return;
}
pos = [0,0];
pointsX = [0];
pointsY = [0];
step = 50/(Math.pow(2,maxlev-1));
hilbert(maxlev,LEFT);
this.dataX = pointsX;
this.dataY = pointsY;
oldlev=maxlev;
};
b.update();
</jsxgraph>

=== References ===
* [http://en.wikipedia.org/wiki/Hilbert_curve http://en.wikipedia.org/wiki/Hilbert_curve]

=== The underlying JavaScript code ===
<source lang="javascript">
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 20, originY: 20, unitX: 5, unitY: 5});
var UP = 0;
var LEFT = 1;
var DOWN = 2;
var RIGHT = 3;
var pos = [0,0];
var step = 1;
var pointsX = [];
var pointsY = [];

move = function(dir) {
switch (dir) {
case LEFT:
pos[0] -= step;
break;
case RIGHT:
pos[0] += step;
break;
case UP:
pos[1] += step;
break;
case DOWN:
pos[1] -= step;
break;
}
pointsX[pointsX.length] = pos[0];
pointsY[pointsY.length] = pos[1];
};

hilbert = function(level,dir) {
if (level<=1) {
switch (dir) {
case LEFT:
move(RIGHT);
move(DOWN);
move(LEFT);
break;
case RIGHT:
move(LEFT);
move(UP);
move(RIGHT);
break;
case UP:
move(DOWN);
move(RIGHT);
move(UP);
break;
case DOWN:
move(UP);
move(LEFT);
move(DOWN);
break;
}
} else {
switch (dir) {
case LEFT:
hilbert(level-1,UP);
move(RIGHT);
hilbert(level-1,LEFT);
move(DOWN);
hilbert(level-1,LEFT);
move(LEFT);
hilbert(level-1,DOWN);
break;
case RIGHT:
hilbert(level-1,DOWN);
move(LEFT);
hilbert(level-1,RIGHT);
move(UP);
hilbert(level-1,RIGHT);
move(RIGHT);
hilbert(level-1,UP);
break;
case UP:
hilbert(level-1,LEFT);
move(DOWN);
hilbert(level-1,UP);
move(RIGHT);
hilbert(level-1,UP);
move(UP);
hilbert(level-1,RIGHT);
break;
case DOWN:
hilbert(level-1,RIGHT);
move(UP);
hilbert(level-1,DOWN);
move(LEFT);
hilbert(level-1,DOWN);
move(DOWN);
hilbert(level-1,LEFT);
break;
}
}
};

var curve = b.createElement('curve',[pointsX,pointsY],{curveType:'plot'});
var s = b.createElement('slider', [[0.75,-110],[50,-110],[1,1,9]], {name:'S',snapWidth:1});
var oldlev = -1;
curve.updateDataArray = function() {
maxlev = Math.round(s.Value());
if (oldlev==maxlev) {
return;
}
pos = [0,0];
pointsX = [0];
pointsY = [0];
step = 50/(Math.pow(2,maxlev-1));
hilbert(maxlev,LEFT);
this.dataX = pointsX;
this.dataY = pointsY;
oldlev=maxlev;
};
b.update();

</source>

[[Category:Examples]]
[[Category:Fractals]]
[[Category:Curves]]

A WASSERMANN at 17:08, 29 October 2009

2009-10-29T17:08:00Z

← Older revision		Revision as of 17:08, 29 October 2009
Line 24:		Line 24:
	<html>		<html>
	<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />		<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
	~~<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>~~
	<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>		<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
	<div id="jxgbox" class="jxgbox" style="width:600px; height:600px;"></div>		<div id="jxgbox" class="jxgbox" style="width:600px; height:600px;"></div>

A WASSERMANN at 09:34, 21 August 2009

2009-08-21T09:34:46Z

← Older revision		Revision as of 09:34, 21 August 2009
Line 153:		Line 153:
	oldlev=maxlev;		oldlev=maxlev;
	};		};
			b.update();
	</script>		</script>
	</html>		</html>
Line 273:		Line 274:
	oldlev=maxlev;		oldlev=maxlev;
	};		};
			b.update();

	</source>		</source>

A WASSERMANN at 09:33, 21 August 2009

2009-08-21T09:33:40Z

← Older revision		Revision as of 09:33, 21 August 2009
Line 3:		Line 3:
	262 144 points - so be careful if you are using the Internet Explorer.		262 144 points - so be careful if you are using the Internet Explorer.
	<html>		<html>
			<!--
	<form>		<form>
	Set the iteration level:		Set the iteration level:
Line 18:		Line 19:
	<input type="button" value=" set " onClick="doIt()" style='margin:1em'>		<input type="button" value=" set " onClick="doIt()" style='margin:1em'>
	</form>		</form>
			-->
	</html>		</html>

Line 122:		Line 124:

	var curve = b.createElement('curve',[pointsX,pointsY],{curveType:'plot'});		var curve = b.createElement('curve',[pointsX,pointsY],{curveType:'plot'});
	var s = b.createElement('slider', [[0.75,-110],[50,-110],[1.1,1.1,7]], {name:'S',snapWidth:1});		var s = b.createElement('slider', [[0.75,-110],[50,-110],[1,1,9]], {name:'S',snapWidth:1});
			/*
	function doIt(){		function doIt(){
	pos = [0,0];		pos = [0,0];
Line 135:		Line 137:
	b.update();		b.update();
	}		}
			*/
	var oldlev = -1;		var oldlev = -1;
	curve.updateDataArray = function() {		curve.updateDataArray = function() {
Line 255:		Line 257:

	var curve = b.createElement('curve',[pointsX,pointsY],{curveType:'plot'});		var curve = b.createElement('curve',[pointsX,pointsY],{curveType:'plot'});
	var s = b.createElement('slider', [[0.75,-110],[50,-110],[1.1,1.1,7]], {name:'S',snapWidth:1});		var s = b.createElement('slider', [[0.75,-110],[50,-110],[1,1,9]], {name:'S',snapWidth:1});

	~~function doIt(){~~
	~~pos = [0,0];~~
	~~pointsX = [0];~~
	~~pointsY = [0];~~
	~~maxlev = $('maxlev').value;~~
	~~step = 50/(Math.pow(2,maxlev-1));~~
	~~hilbert(maxlev,LEFT);~~
	~~curve.dataX = pointsX;~~
	~~curve.dataY = pointsY;~~
	~~b.update();~~
	}

	var oldlev = -1;		var oldlev = -1;
	curve.updateDataArray = function() {		curve.updateDataArray = function() {

A WASSERMANN at 17:05, 22 June 2009

2009-06-22T17:05:45Z

← Older revision		Revision as of 17:05, 22 June 2009
Line 138:		Line 138:
	var oldlev = -1;		var oldlev = -1;
	curve.updateDataArray = function() {		curve.updateDataArray = function() {
	maxlev = s.Value();		maxlev = Math.round(s.Value());
	if (oldlev==maxlev) {		if (oldlev==maxlev) {
	return;		return;
Line 271:		Line 271:
	var oldlev = -1;		var oldlev = -1;
	curve.updateDataArray = function() {		curve.updateDataArray = function() {
	maxlev = s.Value();		maxlev = Math.round(s.Value());
	if (oldlev==maxlev) {		if (oldlev==maxlev) {
	return;		return;

A WASSERMANN at 17:04, 22 June 2009

2009-06-22T17:04:30Z

← Older revision		Revision as of 17:04, 22 June 2009
Line 121:		Line 121:
	};		};

	var curve = b.createElement('curve',[pointsX,pointsY],{curveType:'plot'~~/,fillColor:'#ff4400'/~~});		var curve = b.createElement('curve',[pointsX,pointsY],{curveType:'plot'});
	var s = b.createElement('slider', [[0.75,-110],[50,-110],[1.1,1.1,7]], {name:'S'});		var s = b.createElement('slider', [[0.75,-110],[50,-110],[1.1,1.1,7]], {name:'S',snapWidth:1});

	function doIt(){		function doIt(){
Line 138:		Line 138:
	var oldlev = -1;		var oldlev = -1;
	curve.updateDataArray = function() {		curve.updateDataArray = function() {
	maxlev = ~~Math.round(~~s.Value());		maxlev = s.Value();
	if (oldlev==maxlev) {		if (oldlev==maxlev) {
	return;		return;
Line 254:		Line 254:
	};		};

	var curve = b.createElement('curve',[pointsX,pointsY],{curveType:'plot'~~/,fillColor:'#ff4400'/~~});		var curve = b.createElement('curve',[pointsX,pointsY],{curveType:'plot'});
	var s = b.createElement('slider', [[0.75,-110],[50,-110],[1.1,1.1,7]], {name:'S'});		var s = b.createElement('slider', [[0.75,-110],[50,-110],[1.1,1.1,7]], {name:'S',snapWidth:1});

	function doIt(){		function doIt(){
Line 271:		Line 271:
	var oldlev = -1;		var oldlev = -1;
	curve.updateDataArray = function() {		curve.updateDataArray = function() {
	maxlev = ~~Math.round(~~s.Value());		maxlev = s.Value();
	if (oldlev==maxlev) {		if (oldlev==maxlev) {
	return;		return;

A WASSERMANN at 07:49, 5 June 2009

2009-06-05T07:49:52Z

← Older revision		Revision as of 07:49, 5 June 2009
Line 56:		Line 56:

	hilbert = function(level,dir) {		hilbert = function(level,dir) {
	if (level==1) {		if (level<=1) {
	switch (dir) {		switch (dir) {
	case LEFT:		case LEFT:
Line 189:		Line 189:

	hilbert = function(level,dir) {		hilbert = function(level,dir) {
	if (level==1) {		if (level<=1) {
	switch (dir) {		switch (dir) {
	case LEFT:		case LEFT:

A WASSERMANN at 13:28, 4 June 2009

2009-06-04T13:28:22Z

← Older revision		Revision as of 13:28, 4 June 2009
Line 138:		Line 138:
	var oldlev = -1;		var oldlev = -1;
	curve.updateDataArray = function() {		curve.updateDataArray = function() {
	maxlev = Math.round(s.X());		maxlev = Math.round(s.Value());
	if (oldlev==maxlev) {		if (oldlev==maxlev) {
	return;		return;
Line 271:		Line 271:
	var oldlev = -1;		var oldlev = -1;
	curve.updateDataArray = function() {		curve.updateDataArray = function() {
	maxlev = Math.round(s.X());		maxlev = Math.round(s.Value());
	if (oldlev==maxlev) {		if (oldlev==maxlev) {
	return;		return;