Difference between revisions of "Hilbert curve"

From JSXGraph Wiki
Jump to navigationJump to search
Line 155: Line 155:
  
 
<source lang="javascript">
 
<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'/*,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;
 +
        };
 
</source>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]

Revision as of 18:07, 28 November 2008

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:

        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;
        };