Coding the Hilbert Curve

Рет қаралды 110,020

Күн бұрын

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: kzfaq.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

Пікірлер: 263

@CrashingThunder 4 жыл бұрын

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

@Diamonddrake 4 жыл бұрын

CrashingThunder me too

@TheLostSorcerer 4 жыл бұрын

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

@TheBytesCode 4 жыл бұрын

Came here to say this.

@KeithKritselis 4 жыл бұрын

Ditto, thanks Roku. 😁

@brmveen56 4 жыл бұрын

Here, here.

@anthonycannet1305 4 жыл бұрын

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

@coolankush100 4 жыл бұрын

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

@silviugrada3561 4 жыл бұрын

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

@amund8767 4 жыл бұрын

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 4 жыл бұрын

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

@generic6ixty5ive 4 жыл бұрын

This may be the single best series out there

@oshgnacknak72 4 жыл бұрын

Catchphrase: Remind me to refactor this later, bye

@arnavsirigere2877 4 жыл бұрын

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

@amund8767 4 жыл бұрын

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

@TheCodingTrain 4 жыл бұрын

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

@GrinyaPLAY 4 жыл бұрын

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 3 жыл бұрын

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

@szymoniak75 4 жыл бұрын

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

@MrSyNRG 7 ай бұрын

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

@johanrojassoderman5590 4 жыл бұрын

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

@catapillie 4 жыл бұрын

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

@truthteller4689 4 жыл бұрын

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

@gabrielmoreno4135 4 жыл бұрын

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

@qcdiamond8292 4 жыл бұрын

Meh

@jaredbowen827 4 жыл бұрын

Drop "the" , then it would be better.

@D00FY98 3 жыл бұрын

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!

@AntonPanchishin 4 жыл бұрын

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.

@SkyeMpuremagic 8 ай бұрын

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 8 ай бұрын

How did you find this video?

@SkyeMpuremagic 8 ай бұрын

@@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 KZfaq for me 🤷 I'm really interested in watching lectures on topology & geometric knots. 😅 I get around LOL!

@monsieuralexandergulbu3678 4 жыл бұрын

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

@wilstaley9479 4 жыл бұрын

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

@olbluelips 4 жыл бұрын

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! :)

@CSGOClips12 4 жыл бұрын

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.

@Djzaamir 4 жыл бұрын

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

@ruben_meerman 6 ай бұрын

I love your enthusiasm Mister Shiffman! This is wonderful

@sanderbos4243 4 жыл бұрын

Loved the editing on this episode!

@anasadeelallawala4156 4 жыл бұрын

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

@mikenguyen9826 4 жыл бұрын

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

@felipedelgado4328 4 жыл бұрын

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

@Ouro17 4 жыл бұрын

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

@turzim_uai 4 жыл бұрын

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!

@stellanadais Жыл бұрын

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

@lalit_096 2 жыл бұрын

love the way you code ...

@zacharymcarthur9013 4 жыл бұрын

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

@solsticeprojekt1937 4 жыл бұрын

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

@scottstensland 3 ай бұрын

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

@deadmusik9969 4 жыл бұрын

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

@BradleyDunlap 4 жыл бұрын

Awesome video. Thanks for enduring the cold for us!

@redhen 4 жыл бұрын

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 4 жыл бұрын

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

@neeharikaroyal9293 4 жыл бұрын

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

@RandomHamster 4 жыл бұрын

Wow that looks really cold!

@prototy 4 жыл бұрын

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

@realcygnus 4 жыл бұрын

Total awesomeness ! .....as usual

@arjuns.3752 4 жыл бұрын

I love what u do Never stop it

@davutsauze8319 4 жыл бұрын

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

@beron_the_colossus 4 жыл бұрын

Ooh great topic with a great venue!

@Mihai-mb4ew 4 жыл бұрын

Amazing video, much love from Romania!

@rasenmaher7666 4 жыл бұрын

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

@live_destin-3408 4 жыл бұрын

"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

@akhilkaushik7348 3 жыл бұрын

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.

@kevnar 4 жыл бұрын

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

@algc19 4 жыл бұрын

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

@orugma Жыл бұрын

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

@timh.6872 4 жыл бұрын

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.

@devincustodio2258 4 жыл бұрын

Bravo Dan!!

@iPrint3D 4 жыл бұрын

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

@amanadwani9100 4 жыл бұрын

just amazing

@1996Pinocchio 4 жыл бұрын

Props for the editing.

@deadphim Жыл бұрын

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

@magikmaker 4 жыл бұрын

Wonderful!!

@alikellaway3901 2 жыл бұрын

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.

@RicoGalassi 4 жыл бұрын

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

@ThePiGuy24 4 жыл бұрын

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

@AlexandraDiehl Жыл бұрын

Man, you are awesome!

@aayushparashar4143 4 жыл бұрын

Nice touch with the notepad!!

@delanolourenco 4 жыл бұрын

Hope you reach 1M subs soon.👍

@BillyBob-tr5cv 4 жыл бұрын

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

@Hoobizone 3 жыл бұрын

So cool!! thank you!!

@ArtNowCoding 4 жыл бұрын

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

@redumptious2544 4 жыл бұрын

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

@Fragdemented 4 жыл бұрын

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

@ColinTimmins 8 ай бұрын

Love these videos so much. =]

@truthteller4689 4 жыл бұрын

my fingers are cold just watching!!!

@SxC97 4 жыл бұрын

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

@shadowatom 4 жыл бұрын

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.

@cosmicgoo8074 4 жыл бұрын

Thank you for braving the cold for us

@kisame_5331 4 жыл бұрын

God, I love this!

@cakdham4607 4 жыл бұрын

As usual.. great tutor

@MyTwinkie 4 жыл бұрын

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?

@X22GJP 4 жыл бұрын

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

@astropgn 4 жыл бұрын

🥰 always inspiring

@thiennguyenngoc1922 4 жыл бұрын

another awesome video

@porigonopop 4 жыл бұрын

Interesting thing would be to give a function the x, y coordinate and return the index in the curve

@Moll-ayyy 4 жыл бұрын

The Bob Ross of coding

@1996Pinocchio 4 жыл бұрын

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.

@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!

@danielluna7648 3 жыл бұрын

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 11 ай бұрын

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

@clipi_ 4 жыл бұрын

Great video!!!

@arnedebor6637 4 жыл бұрын

Thanks a lot

@ionel71089 4 жыл бұрын

I’m watching on my television!

@BrainSlugs83 4 жыл бұрын

@20:49 -- err, I've only ever watched your videos on my TV; and yes, I spend a significant amount of time shouting at the TV about something or other that you get wrong (but usually eventually fix). 😅

@indycinema 4 жыл бұрын

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

@TheCodingTrain 4 жыл бұрын

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

@kenhaley4 4 жыл бұрын

How about a recursive approach? Roughly speaking, to draw nth-order curve, draw 4 n-1 order curves rotating and positioning appropriately. When n is 1 just draw the simple U-shape and a line to connect to the next one.