Skip to content

Instantly share code, notes, and snippets.

@jason-s

jason-s/hilbertcurve.html

Created December 15, 2014 17:39
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jason-s/36867c728b0f781f3bd6 to your computer and use it in GitHub Desktop.
Save jason-s/36867c728b0f781f3bd6 to your computer and use it in GitHub Desktop.
Download ZIP
Hilbert curve generator using Javascript + SVG
Raw
hilbertcurve.html
<html>
<head>
<script type="text/javascript">
function createSVG(e)
{
return document.createElementNS("http://www.w3.org/2000/svg",e);
}
function left(v)
{
x = v[0];
y = v[1];
v[0] = y;
v[1] = -x;
}
function right(v)
{
x = v[0];
y = v[1];
v[0] = -y;
v[1] = x;
}
function A(list,v,k)
{
if (k > 0)
{
left(v);
B(list,v,k-1);
list.push([v[0],v[1]]);
right(v);
A(list,v,k-1);
list.push([v[0],v[1]]);
A(list,v,k-1);
right(v);
list.push([v[0],v[1]]);
B(list,v,k-1);
left(v);
}
}
function B(list,v,k)
{
if (k > 0)
{
right(v);
A(list,v,k-1);
list.push([v[0],v[1]]);
left(v);
B(list,v,k-1);
list.push([v[0],v[1]]);
B(list,v,k-1);
left(v);
list.push([v[0],v[1]]);
A(list,v,k-1);
right(v);
}
}
function doit()
{
var svgdiv = document.getElementById('svg1');
var r0 = 600;
for (var k = 0; k < 9; ++k)
{
var list = [];
var v = [1,0];
var f = Math.pow(0.5,k);
var r = r0*f;
A(list,v,k+1);
var pathd = "M "+(r0*f/2)+" "+(2*r0 - r0*f/2)+" ";
for (var i = 0; i < list.length; ++i)
{
var v = list[i];
pathd += 'l '+(v[0]*r)+' '+(v[1]*r)+' ';
}
console.log((list.length)+' points');
var subdiv = document.createElement('div');
var svg = createSVG('svg');
svg.setAttribute('width',r0*2);
svg.setAttribute('height',r0*2);
var c = createSVG('path');
c.setAttribute('d',pathd);
c.setAttribute('stroke','green');
c.setAttribute('stroke-width',1);
c.setAttribute('fill','none');
svg.appendChild(c);
var text = document.createTextNode('Hilbert curve, iteration '+(k+1)+', '+list.length+' points');
var p = document.createElement('p');
p.appendChild(text);
subdiv.appendChild(p);
subdiv.appendChild(svg);
svgdiv.appendChild(subdiv);
}
}
window.onload = doit;
</script>
</head>
<body>
<div id="svg1"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment