Difference between revisions of "Hilbert curve"

From JSXGraph Wiki
Jump to navigationJump to search
 
(20 intermediate revisions by one other user not shown)
Line 1: Line 1:
 +
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>
−
<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>
+
  <form>
−
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
+
  Set the iteration level:
−
<div id="jxgbox" class="jxgbox" style="width:600px; height:600px;"></div>
+
  <select id='maxlev' style='margin:1em'>
−
<script language="JavaScript">
+
        <option value="1"> 1
−
         var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 20, originY: 20, unitX: 5, unitY: 5});
+
        <option value="2"> 2
 +
        <option value="3"> 3
 +
        <option value="4"> 4
 +
        <option value="5"> 5
 +
        <option value="6"> 6
 +
        <option value="7"> 7
 +
        <option value="8"> 8
 +
        <option value="9"> 9
 +
  </select>
 +
  <input type="button" value=" set " onClick="doIt()" style='margin:1em'>
 +
  </form>
 +
-->
 +
</html>
 +
 
 +
<jsxgraph width="600" height="600" box="jxgbox">
 +
         var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-4, 4, 116, -116]});
 
         var UP = 0;
 
         var UP = 0;
 
         var LEFT = 1;
 
         var LEFT = 1;
Line 35: Line 53:
  
 
         hilbert = function(level,dir) {
 
         hilbert = function(level,dir) {
−
             if (level==1) {
+
             if (level<=1) {
 
                 switch (dir) {
 
                 switch (dir) {
 
                     case LEFT:
 
                     case LEFT:
Line 100: Line 118:
 
         };
 
         };
  
−
         var curve = b.createElement('curve',[pointsX,pointsY],{curveType:'plot'/*,fillColor:'#ff4400'*/});
+
         var curve = b.create('curve',[pointsX,pointsY],{curveType:'plot'});
−
         var s = b.createElement('slider', [0.75,-110,50,1.5,7,1], {name:'S'});
+
        // 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});
  
−
         function doIt(){
+
         var oldlev = -1;
 +
        curve.updateDataArray = function() {
 +
            maxlev = Math.round(s.Value());
 +
            if (oldlev==maxlev) {
 +
                return;
 +
            }
 
             pos = [0,0];
 
             pos = [0,0];
 
             pointsX = [0];
 
             pointsX = [0];
 
             pointsY = [0];
 
             pointsY = [0];
−
            maxlev = $('maxlev').value;
 
 
             step = 50/(Math.pow(2,maxlev-1));
 
             step = 50/(Math.pow(2,maxlev-1));
 
             hilbert(maxlev,LEFT);
 
             hilbert(maxlev,LEFT);
−
             curve.dataX = pointsX;
+
             this.dataX = pointsX;
−
             curve.dataY = pointsY;
+
             this.dataY = pointsY;
−
             b.update();
+
             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', {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;
 
         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 130: Line 261:
 
             oldlev=maxlev;
 
             oldlev=maxlev;
 
         };
 
         };
−
</script>
+
b.update();
−
</html>
 
  
−
<source lang="javascript">
 
 
</source>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 +
[[Category:Fractals]]
 +
[[Category:Curves]]

Latest revision as of 09:22, 8 June 2011

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();
Retrieved from "http://jsxgraph.org/wiki/index.php?title=Hilbert_curve&oldid=5203"