Coding the Hilbert Curve

Coding in the Cabana is a series where I attempt challenges from my garden cabana in Brooklyn, NY. In this episode, I animate the path of the classic "space filling curve" known as the Hilbert Curve. Code: thecodingtrain.com/challenges...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 All videos: • Coding Challenges
References:
🗄 Hilbert Curve Wikipedia: en.wikipedia.org/wiki/Hilbert...
🔁 Iterative algorithm for drawing Hilbert curve by Marcin Chwedczuk:
Videos:
🎥 Hilbert's Curve: Is infinite math useful?: • Hilbert's Curve: Is in...
Timestamps:
0:00 Introduction
0:58 The Hilbert Curve
7:03 Hilbert Curve: First Iteration
11:38 Adding Higher Orders
23:04 Filling Space
24:55 Adding Color
24:55 Conclusions and Ideas
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: thecodingtrain.com/discord
💖 Membership: kzbin.infojoin
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
#hilbertcurve #iterativealgorithm #spacefilling #processing

[@CrashingThunder]

"Nobody is watching this on a television" Yeah, about that...

[@Diamonddrake]

CrashingThunder me too

[@TheLostSorcerer]

Using my TV as a second monitor so yea...

[@TheBytesCode]

Came here to say this.

[@KeithKritselis]

Ditto, thanks Roku. 😁

[@brmveen56]

Here, here.

[@anthonycannet1305]

Catchphrase: “I’ll see you at the next stop” Like how trains stop at each station

[@coolankush100]

The thought is beautiful and wholesome. Hope Coding Train adopts it.

[@silviugrada3561]

please keep doing these. You are the reason I started to genuinely enjoy programming :))

[@amund8767]

They way he get things wrong really help me to not feel so anxious by making mistakes on my own projects. He Just makes mistakes look "fun" that really motivates me to pickup old projects from earlier

[@pixelpox11]

@@amund8767 I can relate. Truly the Bob Ross of programming.

[@generic6ixty5ive]

This may be the single best series out there

[@oshgnacknak72]

Catchphrase: Remind me to refactor this later, bye

[@arnavsirigere2877]

I watched 3blue1brown's video on the Hilbert curve a while ago........ I can already tell this video is gonna be fun

[@MrSyNRG]

he cordially codes in the cold cabana, regardless of the condensation conundrum

[@szymoniak75]

I love the fact you are always happy and smiling it's so cheering

[@ruben_meerman]

I love your enthusiasm Mister Shiffman! This is wonderful

[@SkyeMpuremagic]

I'm not even a programmer and I enjoyed watching this from beginning to end! Even lifted my spirits a bit because the coder has such a bright and fun personality. Loved the finished result. Screenshot it so I could share it with others. Thank you for this!

[@TheCodingTrain]

How did you find this video?

[@SkyeMpuremagic]

@@TheCodingTrain It was recommended to me. I'm into studying a bunch of things. Mathematics/physics... Weird mysticism stuff 😆 I watched a numberphile video on The Hilbert Curve and I think that's why it was recommended by KZbin for me 🤷 I'm really interested in watching lectures on topology & geometric knots. 😅 I get around LOL!

[@amund8767]

"Nobody is watching this on a televison" I feel attacked

[@TheCodingTrain]

As usual I’m terribly misguided in my understand of the world!

[@GrinyaPLAY]

I prefer TV to watch the coding train too! David, can I ask you to make video about different splines, but not Bézier curves?! Thanks!

[@reyariass]

I’m watching this on tv too! Blast it on my speakers so the neighbors can be interested! (Just kidding on that last bit)

[@johanrojassoderman5590]

17:00 float len = order; v.x += order ... Yep, seems about right xD

[@scottstensland]

funny how I instinctively guessed this was filmed in Brooklyn by seeing the opening snowing scene --- Brooklyn just has a unique architectural look --- justifiably nonplus yet pervasive block after block

[@CSGOClips12]

wow, i was watching 3b1b's video literally 30mins before this got uploaded, and wanted to draw it in processing and now u post this, that's amazing.

[@truthteller4689]

Your catchphrase should be: "Goodbye, and don't forget the this dot."

[@gabrielmoreno4135]

And after that, a "Choo choo!". That would be the perfect catchphrase!

[@qcdiamond8292]

Meh

[@jaredbowen827]

Drop "the" , then it would be better.

[@catapillie]

This is so sweet! I'm also very excited for the new nature of code series! Keep up man :)

[@wilstaley9479]

Love how the animation finishes right at the end of the video!

[@monsieuralexandergulbu3678]

it’s so homely, it’s so nice to see and hear you, keep shooting the video, and keep your joy to yourself always!

[@D00FY98]

These videos are amazing. I used to hate coding but after watching and following along with a few of your vids I’m starting to love it. There’s so many Amazing possibilities!

[@lalit_096]

love the way you code ...

[@anasadeelallawala4156]

Who could possibly dislike such a wonderful video like this. Thumbs up to you Dan!

[@AntonPanchishin]

Great video, I love the very personal feel of the cabana!! It is fantastic that you show the whole process of coding, including planning, research, errors, and debugging.

[@olbluelips]

I love your Coding in the Cabana series! It's really like how I program for fun -- just play around with math, noise, cellular automata, and procedural generation in a creative/artistic way. It's soo much fun and every once in a while you discover something really cool! :)

[@stellanadais]

I watched on my TV, great coding, I had fun, thanks!

[@mikenguyen9826]

love this series. very soothing and calming, especially in my moments of feebleness. thank you.

[@Djzaamir]

Thank you for making programming so much fun. I have learned so many maths concepts from your coding videos. Thank you much :)

[@sanderbos4243]

Loved the editing on this episode!

[@deadphim]

truly the famous last words every programmer has uttered at one point

[@felipedelgado4328]

Love your work and your passion for programming. It is really inspiring, best wishes from Chile.

[@Ouro17]

Wonderfully explained! Thank you so much and please! Keep warm! I suffered watching you coding in that cold!

[@deadmusik9969]

telling me to hold on and wait a minute, like im just barely listening to you over my typing, just coding away, ha no im in amazement ha. love this

[@zacharymcarthur9013]

I only ever watch you on my TV. Loved this, very interesting.

[@turzim_uai]

Hey, just saw all the Cabana videos today, and I loved them all! Maybe the next one could be a tutorial on how to plant all those beautiful flowers from the previous episodes! The timing couldn't be better, since you guys at the northern hemisphere are entering Spring haha. Cheers!

[@live_destin-3408]

"You guys are probably screeming at you're television, nobodys watching this on television..." well umm Im actully doing both... my dog thinks im crazy

[@BradleyDunlap]

Awesome video. Thanks for enduring the cold for us!

[@Moll-ayyy]

The Bob Ross of coding

[@truthteller4689]

my fingers are cold just watching!!!

[@alikellaway3901]

I know this video is fairly old now; I implemented this in java with java fx recently for a project (super helpful video, thank you!). I found you get a really cool fractal effect if you draw the order 8 curve in 1024x1024 window and only draw the line if the point you are drawing's index modulus 1.5 is 0. You get some really cool and wacky effects if you change the order or the 1.5 to other values. Take a look and let me know what you think! private void draw() { for (int i = 1; I < path.length; i++) { // Start at one so we can draw backwards. double hue = map(i, path.length); gc.setStroke(Color.hsb(hue, 1, 1)); try { // Draw the line if (i % 1.5 != 0) { gc.strokeLine(path[i].getX(), path[i].getY(), path[i - 1].getX(), path[i - 1].getY()); } } catch (IndexOutOfBoundsException ignored) { } } } private double map(float coordinateIndex, float maxIndex) { return (coordinateIndex/maxIndex) * 360; // Note that when using the hue value in the hsb method, it will loop round to red } Not sure where I can post an image of it so that's why I am dumping here. Let me know if you try it or where I could post the result! P.S. This is not my actual draw function, this is a simplified version since I had to optimise mine for an AnimationTimer class.

[@redhen]

Perhaps a random catch-phrase generator is in need :) Perhaps the excitement this would bring at the end of each episode would be too overwhelming, however. Thanks for the maths, Uncle Shiffles x

[@deansundquist9601]

Watching this during the summer in the middle of the corona virus, makes the cabana and snow look very enjoyable at this time.

[@prototy]

I watch all your videos on my tv lol my cats LOVE watching you code things

[@neeharikaroyal9293]

Colour ful animation😍 I am excited when I am watching the coding👏👌🙂

[@rasenmaher7666]

Actuallly, the nice thing about the Hilbert Curve is that u can map every Point of an INFINITE plane to one single scalar. When just counting line by line, u already couldn't count the second line, because those values are infinite, cause the first row is infinite. Nice video :D

[@Mihai-mb4ew]

Amazing video, much love from Romania!

[@arjuns.3752]

I love what u do Never stop it

[@kevnar]

I like how his breath eventually stops steaming as the electronic equipment warms the cabana.

[@beron_the_colossus]

Ooh great topic with a great venue!

[@solsticeprojekt1937]

Dude, you're awesome! I'm sitting under my (diagonal) window a lot, even when it's winter outside. Got me some hot tea and as long as the wind's not chilling my hands I'm a happy little camper. :D

[@realcygnus]

Total awesomeness ! .....as usual

[@RandomHamster]

Wow that looks really cold!

[@devincustodio2258]

Bravo Dan!!

[@orugma]

Just came to say... I watched this on a television! (And thank you!)

[@BillyBob-tr5cv]

I have never been this early. I just randomly watch coding videos and whelp here I am lol

[@beens3865]

I know that I am about 3 years behind on this video but as a computer science student I might build an app. One that takes in a certain image and converts it to a Hilbert curve pixelation as a research project. Just an idea. Either way, I love your videos man!

[@_rlb]

I actually just watched this on my television.

[@1996Pinocchio]

Props for the editing.

[@algc19]

5 minutes in and I had to go get a cup of tea! So cozy in your cabana

[@davutsauze8319]

Nice, i was waiting for you to make it like a week before

[@magikmaker]

Wonderful!!

[@AlexandraDiehl]

Man, you are awesome!

[@amanadwani9100]

just amazing

[@ionel71089]

I’m watching on my television!

[@ThePiGuy24]

I have a suggestion for the catch phrase: "I will see you in the next iteration!"

[@Hoobizone]

So cool!! thank you!!

[@sebastianmeisel]

Catch phrase: final station, please leave the train.

[@aayushparashar4143]

Nice touch with the notepad!!

[@ColinTimmins]

Love these videos so much. =]

[@delanolourenco]

Hope you reach 1M subs soon.👍

[@iPrint3D]

I like this style of coding maybe more than your normal white board series!

[@cakdham4607]

As usual.. great tutor

[@astropgn]

🥰 always inspiring

[@akhilkaushik7348]

I tried Hilbert curve in Unity, transforming it to Hilbert maze, Really beautiful to dive into this amazing maze , I skip one wall each time randomly choosen So that even I, have no idea where the exit could be. Thanks Daniel for this beautiful video.

[@Fragdemented]

catchphrase idea "May the code in your heart be the same code that fills your screens."

[@cosmicgoo8074]

Thank you for braving the cold for us

[@arnedebor6637]

Thanks a lot

[@clipi_]

Great video!!!

[@thiennguyenngoc1922]

another awesome video

[@wiiuwiiu2020]

You're like Santa in February!

[@danielluna7648]

Absolutely fascinating. I need to learn more maths. But I think I can use this to smoothly transition an RGB LED through every color in the spectrum...time to hook up the Arduino and start tooling around.

[@PMA_ReginaldBoscoG]

Instead do it in python, create an explanatory video about it, and submit in manim discord channel for summer of math exposition 3. Wishing you good luck

[@timh.6872]

I know it's not the Processing way, but I think this curve drawing is worth revisiting recursively. In particular, the 3b1b videos on the towers of hanoi and sierpinski's triangle have a really neat perspective on the recursion. In this case, we're counting in base 4, with a flourish of rotation and translation thrown in between the subtasks. I don't know if processing can cleanly express that idea, but I'd love to see the more pure, if less perfomant, solution.

[@kisame_5331]

God, I love this!

[@indycinema]

This man is by far the best coding teacher. Jelous of the cabana. Where did NYU go?

[@TheCodingTrain]

It's still there, just another way for me to make videos!

[@JNCressey]

4:25 creeper! aw man!

[@X22GJP]

I watch the vast majority of KZbin on my television 😉 Phones are for texts, phone calls and photos, tablets are for browsing and media consumption when on the go!

[@RicoGalassi]

Some say Dan's cup is still steaming to this day.. Awesome work as usual Dan! I know this isn't related, but I'm going to be starting a python course at my job soon and I absolutely cannot wait to dive into another language Edit; yes, I am watching on my television haha

[@1996Pinocchio]

The amazing thing about the Hilbert Curve is very clearly shown in the video at 25:15 where you color it and increase the order, the colors would still be mapped to the same location, whereas if you'd color it just line by line, and increase the order, the result would look completely different for each order, not stabilizing at any point, whereas when filled with the hilbert curve, the color at each point is the value of the hilbert curve color mapping for order to infinity. This color can't be defined for the line-by-line mapping.

[@SxC97]

so jealous of the snow in NY! I live in Texas and it's always so hot here :(

[@zgparsons]

So cool

[@weekipi5813]

At least in this video he was seated.

[@Ken-S]

This is how Ikea demo rooms are built.

[@godongbestari3571]

Awesome

[@redumptious2544]

Man! You're seem so sympathic😅 Rly hope to meet you one day🤘 Your videos finally got me into js back in the days.

[@RhoTrepaan]

whoa, that looks cold :-)

[@OneShot_cest_mieux]

Very nice

[@ArtNowCoding]

"whoopsie! that's our destination for the day" Catchphrase idea haha

[@CharIie83]

this is great

[@shadowatom]

You should do a video based around the Feigenbaum Constant considering it is such a crucial part (as far as I know) of chaos theory.

[@MyTwinkie]

This is a lovely idea and you should definitely continue this series! One drawback that I find however comparing to the old studio episodes is that video repeatedly switches from the code view to other views making it hard to follow the coding process. Would it be possible to make the picture-in-picture or split screen so the code is always seen?

[@RickeyBowers]

L => +RF-LFL-FR+ R => -LF+RFR+FL- Where * means to change the direction of rotation and (.) period means to rotate. L needs to be rotation & direction neutral, or fixups would be required after each L. Splitting the rotate operator allowed further optimization because the first four symbols repeat. Leading to: L => RRL.F*L.* R => *.LF

[@lubomirpacheliev363]

I swear to god you are like the Bob Ross of programming