Hilbert curve

From JSXGraph Wiki

Jump to: navigation, search

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.

References

The underlying JavaScript code

var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-4, 4, 116, -116]});
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.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 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();
Personal tools