4 ms·
Hilbert curve: The space filling curve drawn with JavaScript
- cobbal 3y agoThere's a simple way to draw the curve at full precision using SVG: <rect x="0" y="0" width="1" height="1" />
- gus_massa 3y agoIt took me a while to see the slide just below the graphic. I was expecting to click or press space to get the next level. There is some infesting/weird aliasing at the 8 and 9 level (at least in my screen). I'm almost sure it's aliasing, not a real density difference.
- red_trumpet 3y agoI'm not so sure. Some of what looks like an artifact on level 8 is already more clearly visible on level 7 as a density difference. Do we talk about the same thing, some white lines which are not often crossed?
- gus_massa 3y agoThe definition of the Hilbert curve is a line of width 0, so my question makes no theoretical sense. Anyway, a real example has a line of non zero width, let's asume 1/2^n. Centered? How even is the average dendity distribution? Are the crosses real or an artifact of the pixels in my screen? I don't know and I'm curious?
- chertoleg 3y agoI worked at that chair at Uni Bayreuth for a while. Here is the github repo (webpage is hugged to death) https://github.com/jsxgraph/jsxgraph https://github.com/jsxgraph/jsxgraph Shoutout to Prof. Wassermann for keeping up the good work.
- ipsin 3y agoSome time ago I made an animation of a Hilbert curve with sections transitioning between levels. As simple as it is, it's kind of fun to watch. https://ehq.com/rloop2.svg https://ehq.com/rloop2.svg
- wccrawford 3y agoI first heard about this the other day when Clough42 (on Youtube) was talking about using the Hilbert curve setting for the bottom layer of a 3d print to make that layer look better for his final product. I haven't tried it on my own prints, but mine typically don't show the lines on the first layer, so I'm not sure it would make a difference in my prints. But maybe I'm over-extruding a bit there.
- rented_mule 3y agoIn 1990, I included the Hilbert Curve in my senior thesis for my BS in Math, which I presented to all the professors in our math department. Years later, one of those professors became a family friend. He was an incredibly supportive mentor to multiple people in our family. After he passed away last year, I learned that his great-great grandfather was David Hilbert, creator of this curve. It must have been fun to see some of his family's work displayed in one of his student's theses. https://www.hmc.edu/in-memoriam/hank-krieger/ https://www.hmc.edu/in-memoriam/hank-krieger/
- throw_pm23 3y agoYou realize it was his mathematical great-great grandfather, right? That means, his PhD advisor's advisor's advisor's advisor. There are a few thousand mathematicians who can claim that: https://www.mathgenealogy.org/id.php?id=7298 https://www.mathgenealogy.org/id.php?id=7298
- NoMoreNicksLeft 3y agoSilly me, I thought mathematicians reproduced by budding. I assumed that's what they did while reclusing in their mountain shacks between public appearances.
- OscarCunningham 3y agoI once made a visualisation of the Hilbert curve evaluated at 2048 random points: https://mathstodon.xyz/@OscarCunningham/108889112101425236 https://mathstodon.xyz/@OscarCunningham/108889112101425236
- hasoleju 3y agoYour post sent me down a rabbit hole, thanks!
- graypegg 3y agoI made a little hilbert curve demo for an interview take home test a while ago! https://graypegg.com/hilbert https://graypegg.com/hilbert (https://github.com/graypegg/hilbertcurveplayground https://github.com/graypegg/hilbertcurveplayground) Maps weather data, sorted by date onto the curve. Makes the seasons obvious since they get grouped together!
- readyplayernull 3y agoThis curve always reminds me of isometric embeddings: https://medium.com/coffee-shop-math/coffee-shop-math-isometric-embedding-60d219856753 https://medium.com/coffee-shop-math/coffee-shop-math-isometr...
- fishtoaster 3y agoI love putting hilbert curves into various simulation and building games - you often get interesting results! And if you don't, it at least looks cool. One time I wrote some ruby and some lua to generate a hilbert curve in Factorio - I'm pretty happy with the result: https://github.com/kkuchta/factorio_hilbert https://github.com/kkuchta/factorio_hilbert
- foresto 3y agoRelated: Google’s S2, geometry on the sphere, cells and Hilbert curve https://news.ycombinator.com/item?id=10066616 https://news.ycombinator.com/item?id=10066616 I've always thought S2 was a clever name for something built with the Hilbert curve. (Look at the shape of the glyphs.)
- plumeria 3y agoA fun aspect of this space filling curve is that it can be used for the infill pattern of a 3D print.
- ceautery 3y agoIt's nice to see just how popular Hilbert curves are. For me it touches the same nerve that Conway's Game of Life does. I threw together a hacky demo of the Hilbert curve and some other l-system curve for a middle school computer club I ran way back when. Not the best UI in the world, but it shows you either the string substitutions following each l-system ruleset, or with "show canvas" checked each click draws the next generation. https://autery.net/pages/l-systems.html https://autery.net/pages/l-systems.html
- roombarampage 3y agoI also have one of those: https://jonathan-potter.github.io/hilbert-curve/ https://jonathan-potter.github.io/hilbert-curve/
- oneearedrabbit 3y agoNot long ago, I went down the rabbit hole of space-filling curves, and learned about an obscure paper by Rolf Niedermeier, Klaus Reinhardt, and Peter Sanders that introduced a rather peculiar curve with an unfortunate name: H-curve [1]. The paper mentions that H-curve preserves better locality properties compared to Hilbert curve. It fills the space with H-like shapes, hence the name. Also, like the Moore curve, it generates a loop. Space-filling curves are ridiculously easy to implement with L-system rules, and I spent a few days developing a set of axioms to express it in a rewrite system. This was a fun puzzle [2]. A => BF-F-BFFFC-F-FC+F+BF-F-BFFFC-F-FC B => BFFFC-F-FC+F+B C => C+F+BF-F-BFFFC [1] https://www.sciencedirect.com/science/article/pii/S0166218X00003267 https://www.sciencedirect.com/science/article/pii/S0166218X0... [2] https://kruzenshtern.org/25-h-curve.html https://kruzenshtern.org/25-h-curve.html
- jethkl 3y agoCool! Obligatory https://xkcd.com/195/ https://xkcd.com/195/ Its locality properties provide a practical alternative to the Hilbert curve for this type of map. Also interesting that it is loopy.
- thechao 3y agoThis is the space-filling curve we used for the last-level (4x4/16x16) tiles in the very early Larrabee work. It's a great curve!
- oneearedrabbit 3y agoThat sounds super interesting. I would like to learn more if you're willing to share.
- kragen 3y agohmm, i tried those rules in xfractint with 90-degree angles, and it doesn't seem to be a space-filling curve; http://canonical.org/~kragen/nothcurve.png http://canonical.org/~kragen/nothcurve.png is what i get at order 3 maybe my translation is buggy? hcurve { Angle 4 Axiom A A=BF-F-BFFFD-F-FD+F+BF-F-BFFFD-F-FD B=BFFFD-F-FD+F+B D=D+F+BF-F-BFFFD ; C is reserved in Fractint }
- montroser 3y agoOne beautiful quality of these curves is that they can nicely reduce a two (or n) dimensional space down to one, so that neighbors can be found simply by looking at ranges. https://stackoverflow.com/questions/499166/mapping-n-dimensional-value-to-a-point-on-hilbert-curve https://stackoverflow.com/questions/499166/mapping-n-dimensi...
- kragen 3y agocoincidentally i wrote code to render a hilbert curve in emoji the other day. it was three or four lines of golfed python #!/usr/bin/python3 T=['a'];[T.append(''.join(dict(a='lbffraffarffbl',b='rafflbffblffar').get(c,c)for c in T[-1]))for i in 'abcd'];D,V=[0],1 for c in T[-1]:M,T=dict(f=(1,1),r=(0,1j),l=(0,-1j)).get(c,(0,1));D.append(D[-1]+M*V);V*=T X=range(31);print('\n'.join(''.join('⬜'[j-i*1j in D]for j in X)for i in X)) hn silently censors that in a way that breaks the code but the original is at http://canonical.org/~kragen/sw/dev3/hilbert.py http://canonical.org/~kragen/sw/dev3/hilbert.py there is an almost perfectly correct explanation of the code by gpt-4 at https://bin.gy/altypsisca https://bin.gy/altypsisca the only problem was that gpt-4 guessed wrong about which particular fractal was being drawn i think the turtle-graphics formulation of the hilbert curve that underlies this l-system is nicer than the manhattan formulation in the linked js. i'm undecided about whether the l-system formulation as string rewrite rules is better or worse than the explicit recursion with conditionals used in the js. fractint's l-system engine includes a `!` operator which swaps left and right, which i think could make the hilbert curve simpler, though the definition in fractint.l doesn't sudo apt install xfractint and type tlsystem and hit enter to explore more l-systems` arguably a formulation in terms of a shape grammar or iterated function system would be a better fit also, if l-systems are the kind of thing you like, you'll probably enjoy http://canonical.org/~kragen/sw/dev3/skitch http://canonical.org/~kragen/sw/dev3/skitch