Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
​
<!DOCTYPE html>
<html>
    <head>
        <title>Hilbert Path</title>
        <style>
            body {
                margin: 0;
                font-family: sans;
            }
​
            /* don't put space underneath for ascenders */
            svg { display: block; height: auto;}
​
            path {
                fill: none; stroke: black;
                stroke-width: 0.001px;
            }
            input[type="number"] {
                width: 3em;
            }
            #controls {
                text-align: center;
            }
        </style>
        <script type="text/javascript" src="hilbert.js"></script>
        <script type="text/javascript">
            function engage() {
                var inPoints = document.getElementById('points')
                var inLocked = document.getElementById('locked')
                var inDepth = document.getElementById('depth')
​
                var pow4points = inPoints.value
                var points = Math.pow(4,pow4points)
                var depth
                if(inLocked.checked) {
                    inDepth.disabled = true;
                    inDepth.value = pow4points;
                } else {
                    inDepth.disabled = false;
                }
                depth = inDepth.value;
        console.log("Engaging with "+points+" points and depth "+depth)
                var dc = document.getElementById('democurve');
                dc.setAttribute('d','M0,0');
​
                for (var i = 1; i < points; i++){
          console.log("Point "+i);
                    dc.setAttribute('d',dc.getAttribute('d')+'L'+hilbert_1d_to_2d(i/points,depth).join());
                }
            }
        </script>
    </head>
    <body onload="engage()">
            <div id="controls">
                <label for="points">Points: 4^</label>
                <input id="points" type="number" step="1" min="1" max="8" value="4" oninput="engage()">
                <label for="locked">Locked</label>
                <input id="locked" type="checkbox" checked onchange="engage()">
                <label for="depth">Depth: </label>
                <input id="depth" type="number" disabled step="1" min="1" max="28" value="4" oninput="engage()">
            </div>
        <svg viewBox="0 0 1 1">
                <path id="democurve" d='M0,0'>
            </svg>
    </body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers