Hilbert curve

From JSXGraph Wiki
Revision as of 17:08, 29 October 2009 by A WASSERMANN (talk | contribs)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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 the Internet Explorer.

References

The underlying JavaScript code

        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();