Hilbert curve

From JSXGraph Wiki
Revision as of 12:33, 15 December 2008 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.

Set the iteration level:

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'/*,fillColor:'#ff4400'*/});
        var s = b.createElement('slider', [0.75,-110,50,1.5,7,1], {name:'S'});

        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.X());
            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;
        };