Coding Challenge 182: Apollonian Gasket Fractal
Вставка
- Опубліковано 14 чер 2024
- Happy Pi Day 2024! In this video, I attempt to create an Apollonian Gasket using the Descartes Circle Theorem and complex numbers. So many circles! Code: thecodingtrain.com/challenges...
🚀 Watch this video ad-free on Nebula nebula.tv/videos/codingtrain-...
p5.js Web Editor Sketches:
🕹️ Apollonian Gasket: editor.p5js.org/codingtrain/s...
🕹️ Colorful Recursive Gaskets in Gaskets: editor.p5js.org/codingtrain/s...
🎥 Previous: • Coding Challenge 181: ...
🎥 All: • Coding Challenges
References:
🔗 Apollonian Gasket: en.wikipedia.org/wiki/Apollon...
🔗 A Tisket, a Tasket, an Apollonian Gasket: www.americanscientist.org/art...
🔗 Apollonian Gaskets: mathlesstraveled.com/2016/04/...
🔗 Beyond the Descartes Circle Theorem: arxiv.org/pdf/math/0101066.pdf
🔗 The Kiss Precise: www.nature.com/articles/13710...
🔗 Frederick Soddy: en.wikipedia.org/wiki/Frederi...
🔗 Problem of Apollonius: en.wikipedia.org/wiki/Problem...
🔗 Four Proofs of a Generalization of the Descartes Circle Theorem: www.jstor.org/stable/2316373
🔗 Beyond the Descartes Circle Theorem: arxiv.org/pdf/math/0101066.pdf
🔗 Descartes' theorem: en.wikipedia.org/wiki/Descart...
🔗 Complex.js: www.npmjs.com/package/complex.js
Related Coding Challenges:
🚂 21 Mandelbrot Set with p5.js: • Coding Challenge #21: ...
🚂 22 Julia Set in Processing: • Coding Challenge #22: ...
🚂 77 Recursion: • Coding Challenge #77: ...
🚂 50 Circle Packing: • Coding Challenge #50.1...
🚂 95 Approximating the Value of Pi: • Coding Challenge 95: A...
🚂 96 Visualizing the Digits of Pi: • Coding Challenge #96: ...
🚂 97 The Book of Pi: • Coding Challenge #97: ...
🚂 139 Calculating Digits of Pi with Collisions: • Coding Challenge #139:...
🚂 140 Leibniz Formula for Pi: • Coding Challenge #140:...
🚂 141 Calculating Digits of Pi with Mandelbrot Set: • Coding Challenge #141:...
🚂 169 Pi in the Sky Game: • Coding Challenge 169: ...
🚂 176 Buffon's Needle: • Coding Challenge 176: ...
Timestamps:
0:00 Happy PI Day!!
1:40 References
3:22 Describe the Apollonian problem
5:51 Curvature
10:08 Start coding!
11:53 Write a function to find the fourth curvature
15:31 Complex numbers
21:11 Create a complex number class
22:52 Square root of -1
25:32 Square root of a complex number
27:57 Implement complex Descartes theorem
33:50 Make the circles in the complexDescartes function
36:26 Use an array to add recursion
41:04 Validate the circles
42:35 Check if all 4 circles are tangent
48:04 Stop adding circles when radius falls below a threshold
49:20 Implement arbitrary arrangement of circles
53:14 Debug
55:32 Possible variations
56:34 Outro
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: ua-cam.com/users/thecodingtrainjoin
🛒 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...
#apolloniangasket #pi #circlepacking #complexnumbers #curvature #descartestheorem #p5js #javascript
=====================================================
I started watching this video thinking, ‘oh that makes sense’ and then progressively got to a point where I was just thinking, ‘well, as long as he knows what’s happening!’
Great video!
When you generate 3 random circles, 2 within the larger, the 2 inner circles don't necessarily both have their centers on a line with the big circle's center.
You could (for instance) have 2 small circles sitting side by side on the inside of the big circle.
This way you can have asymmetrical starting positions which should be neat.
This is crazy. This is the 4th video in a row where you’re working on something that I’ve been working on 😂. My intention was to combine my weighted voronoi algorithm with these gaskets. Finding the center of each circle and giving it a weight.
Are you sure you aren't his sleep walking alter ego?
the simulation saves some RAM by making us share memory 😂😂
Every coding train video I watch, pushes me one pixel closer to finally diving in to learning shaders. I don't know what P5 is, I just kinda translate it all to c# in my head, but the concepts and math are where the real magic is! Thank you for making these and making them so easy to digest! Your excitement is infectious.
hes just using JavaScript, but a little different since its using the P5 library
If you get to learning shaders definitely check out shadertoy. It only has the pixel/fragment (the same thing) shader stage, yet it is a great way to start as it enables you to write code and play around with math without being bothered by all the boilerplatey vulkan or opengl bs.
You may be learning how fake the difference between languages is. It isn't totally fake, but it's definitely smaller than it may seem. Especially, say, object oriented ones
you don't really need to dive deep in to get started with shaders. You can also just go to shadertoy and try some stuff out
i hope you're not on a 8k train XD
Oh man I am SO hyped i found your channel and website. This is 100% the kind of programming I've been looking for inspiration and guidance on, for so long! Can't wait to get into some math art deep dives ❤ thank you!
This is fucking incredible. I'm just a measly web developer who definitely isn't good at math, but I was fully engaged watching you work through this 🤯 I'm so intrigued!!! Thanks for this great video!
I feel like you might be missing some possible gasket configurations with your choice of third circle. For instance, what if that circle wasn’t directly opposite the second, but instead a bit to one side (and scaled down appropriately)? Then, if done right, you’d have 3 larger circles instead of the 2 or 4 you see in all of yours.
👍That really was quite nifty Dan ! One of my favorites perhaps since that Fourier drawing thingy. MUCH thanks for doing what you do.
Hey! I just wanted to say congrats for uploading for so long, I used to watch you when I was 7 years old, 8 years ago and I found you in my recommended again. Glad to see you're still energetic and making good videos :)
yaaaaay its pi daaaay!!! have a hapPI day, everyone!
I really enjoyed watching this video. Thanks for your simple explanations throughout the coding.
This has been one of my favorite videos you've done yet
2:38 That is precisely what I love about this channel. You know most channels, when reached a certain number of subscribers, become "official" in the sense that they have everything prepared, all clean and on the rails.
But the Coding Train isn't, and that is what makes this train so fun to ride!! Keep uploading off-the-rail videos, please!
Shout-out to F Soddy; the man made some poetry.
you could animate the Gasket by slowly changing the coords and the size of the first inner circle
It was a pleasure watching this coding challenge, as always.
The way you build up things is simply amazing.
Thanks for the inspiration 🙏
Tack!
When you were debugging the descartes function, it was easy to forget that the bend values are signed, and thus can be negative. What eventually became the local product variable has a negative k1 value, because c1 always had a negative bend value, therefore, the sum of the k1 * k2 and k1 * k3 terms can have a significantly more negative value than what k2 * k3 might have as a positive value, for the intial invocation.
I still don't understand why k1 has to be negative
i made a version of bad apple using apollonian gaskets a while back, and my sloppy python code was so slow that it took like a minute per frame. This is giving me the motivation to finally improve that program.
Wow. We need more teachers in the world like you. I never went to school for coding but ive learned c, html, css, js, and python through free havard classes. It was very hard for me to understand code but the fact that you arent just reading off code as you go but you show the process of code and how to think it out. Absolutely beautiful content and keep doing what you do!
This video is like a ray of sunshine on a cloudy day.
All of his videos are. I don't even know how to describe the vibe of these videos, but it's so good...
I appreciate the amount of energy your thought process burns. I couldn't watch this in one sitting. Kudos.
Super interesting and fun as always. Can’t wait for the 2nd edition of the book!
The video is very good.
a good example of use is thinking about clusters of places in maps api. I did something similar a few years ago with OSM and Leaflet to add points outside of clusters and not overlap.
Thank you very much for the excellent content.
This is my favorite coding challenge ever!
I have been doing this as a zentangle with pen to paper for years! I have wanted to learn how to do this in code for a while now.
The variation that I want to use this for is to have multiple circles draw a straight line by staggering them on either side. I want to overlay line drawings on this algorithm and let it follow those lines in the drawing, kind of like how you make images from the stipling technique you did in a recent vid.
My daughters subbed to your channel on my account and I am glad they did. These are super helpful.
great video, love your enthusiasm, its so contagious.
Love your content!! Happy pie day to all.
I think the easier approach [O(n^2)] would be to use exponentials. Finding the angle and magnitude of each complex vector and normalizing one vector's magnitude with respect to the other would let you multiply (normalized magnitude)*e^(i*theta1) with (magnitude of the second vector)*e^(i*theta2). Meaning you would just be adding theta1 with theta2 and the resultant complex multiplication would become = "(normalized magnitude)*(magnitude of the second vector)*cos(theta1+theta2) + i*sin(theta1+theta2)"
Great vdo! Loved it. I got a weak spot Decartes thm :D
Make it tall and have an Apollonian Gasket pencil holder.
Hey man, just wanted to let you know you your videos are very entertaining and are a great source for me to improve at programming. I'm going to college next year for comp sci and you were a great inspiration.
Very cool. I have never heard of these before.
you made me understand coding. you are as iconic as bill nye the science guy
@35:00 allCircles[0] and [1] are the new internal ones. [2] and [3] are "new" external ones which happen to coincide with the outer circle. My initial instinct is to write a function to compare all the circles and return only unique ones, but due to the nature of the circles possible placements and the specific goal of the fractal, ignoring all outer ones is probably the best option...unless the starting circles aren't kissing. A consolidation array might be useful though.
Brilliant and fun as always! Thanks! 😃
I found this channel yesterday from the book of shaders website. Looks like I'm a bit late to the party. However, it seems it's not too late and he's still releasing videos. I just hope some of the previous challenges (the Machine learning ones esp.) will still work. Also, keep up the good work.🙂
Conductor stop the train. My brain hurts. But seriously, that is really cool math. I really need to start playing with P5.
Thank you for reducing the sound of the 'error buzz' sound effect around 25:10!
Look how excited you were when the the complex thing works. I also love these mathematics and then implementing those in programs.
Is there anything interesting about the invalid circles? It looked like they formed some kind of pattern. Great video, Happy Pi day!
39:50 that moment expresses so well the joy of coding ❤
I love your videos, thank you!
This dude is the coolest coding did ive ever seeen😂😂😂
I come to your channel every PI-day knowing you upload something cool that day.
If only I'd had a teacher like you, many things would have gone differently for me
Dan, I've been watching you for so many years now. I wanted to let you know that the biggest thing you taught me isn't actually the code.
I've thought for the longest time that I was too weird to be suitable for a serious job in programming. You showed me that it's okay to be weird and still deserve to be respected. I'll always be grateful for that ❤
I never thought I would read a poem describing a mathematical theorem
Really enjoyed this one!
I literally love you, thank you so much I have sooooo much fun with you ❤❤❤❤❤
Most coding challenges I watch, I believe I can also complete. This one... this one I won't even try. This was by far the most complicated Coding Challenge I've seen.
A thought occurred while checking the part about complex numbers (don't know if it's true): If you would add the radius of the 4th circle to the radii of the circles with a positive curviture + if you would subtract the radius of the 4th circle from the radii of the circles with a negative curviture, then the points where those 3 new circles dissect should be the center points of all possible positions for the 4th circle.
Beautiful
Good stuff
just started thinking about how many kissing ellipses you can have for a number of separate initial ellipses, and it's pascal's triangle.
Great video
It is an incredible tutorial
awesome!
Dear Dan, please make a 3d version of the Apollonian Gasket. I would be happier if you did it.
Do you really want to see Dan struggle with quaternions? Give the man a break, he's a coding art teacher not a coding math teacher.
Happy PI day to all
54:03 I tried to make sense out of this and this is what I suggest "went wrong":
The paper you use the formula from is for the general case while yours implies that 2 circles are inside the bigger third one, giving the identity
r1 = r2 + r3 (*)
Also, this implies that all centers are on one line.
By definition of curvature, we get
k1 = -1/r1, k2 = 1/r2 and k3 = 1/r3.
If we look at the radicant and replace k1-3, we get the following:
k1*k2+k2*k3+k1*k3 = (-1/r1)*(1/r2) + (1/r2)*(1/r3) + (-1/r1)*(1/r3) = - (1/r1*r2) + (1/r2*r3) - (1/r1*r3)
If we combine fractions, we follow with
= - (r3 / r1 * r2 * r3) + (r1 / r1 * r2 * r3) - (r2 / r1 * r2 * r3) = ( - r3 + r1 - r2 ) / (r1 * r2 * r3).
As we figured with (*), the numerator becomes 0, making the whole term calculate to 0. So basically, in your case, you could have skipped the square part entirely, at least for the first iteration. That's also why you got doubled circles in your first iteration initially.
I guess the radicant became negative because some floating point inaccuracies, especially due to using random numbers. Actually, if we look at your debug, we do get a super small number, which also solidifies the assumption.
As for further iterations, the square term is indeed needed, just to make this clear.
Can you make gasket out of N initial EQUAL circles, not just 2?
I used to watch your videos when I was still learning programming for the first time. It's really nice to see your videos continue to be so much fun and educational! Only thing that bothers me a little is that I don't think that every possible Apollonian Gasket can be generated in the way shown in the video. For example an Apollonian Gasket made by three mutually tangent circles of the same radius inside of the bigger circle won't be generated, unless I'm wrong about this. You could instead generate two different random points inside the big circle and try to find their radii knowing they are tangent. It requires solving some equations but it's not too hard if I remember correctly.
Edit: just noticed that some people might have already pointed this out, sorry if this comment was repetitive
Wonder about doing it with spheres ?
Happy Pi Day, Dan!
thanks sir
happy pi day!!!!!! 🚂🚂 🚂
Wow a new CT's video! Its party time
I wish I could give this video more than one like. It's that good!
Hello @thecodingtrain , thanks for the Videos. Processing is amazing. Are there languages similar to it?
Also are there any videos on Java and Processing?
2Blue1Brown did 2 transformations videos the last week, now I'd kind of like to see maybe more transformations videos on coding train. You also said you intended to possibly go into more "extra dimensional that couldn't be visualized". not that anyone's expecting all that , the transformations theme seam fun though , or an unreal engine lol both :) do a "Shiff Sims" with transformations "the ring" technology from "autoencoder", all three.
It’s Vincent from NYU. Dekalb Q train. Music and Programming
1:23 that video definitely triggered Trypophobia across the internet....
Nice! Now, it is interesting if you set that gasket as various systems with their corresponding attributes and apply hysteresis.
i love pi day!
Happy π day!
I made one in apophasis 7x that is a gasket fractal with infinitely more gasket fractals inside of it. I called the orb fractal.
This is why we code
Just want to let you know that, for me, it's fine when you take a long time to start coding. I don't watch you JUST to watch you code--I love the math, too!
I'm waiting for the new version of the book!
Happi pi day
I get that you have your awesome job, but here on youtube you have 1.6 Million students waiting for the new lesson. Imagine that if I meet someone who wants to learn to program I tell them "watch all the coding train videos to get started".
I say at least for Coding train's birthday on July 10th you could give us a surprise :D
This is a very great video and I enjoyed watching it. But on a side note: you missed some solutions. The square root of a complex number has two solutions. The other solution is rotated by pi. And the angle of a complex number can not only be defined by tan, because then you would miss the edge cases and certain rotations (e.g. -b / -a)
Edit: The +/- infront of the square root is already the rotation py pi.
Interesting :)
Excellent work!
Is it necessary for the 3rd circle be exactly rotate-by-pi opposite 2nd circle? In theory it just needs to be mutually tangential...it's just symmetric if you rotate 180 degrees.
You should do a leet code live stream. See just how quickly you can do them.
And as usual: "I will refactor this later ..." *singing*
My pet theory why it is called a gasket: The outer ring seals everything inside but the inner surface consists of infinite holes, so is infinitely porous, it lets everything through. Sealed at the edge but open in the middle is exactly what a gasket should be like.
im more familiar with C++ than js so i thought overloading the operators for the complex number class could work
Instead of drawing the circles it would be interesting to see what kind of line path would result from connecting the centers of 3 circles to the new circle.
i have learnt a lot from your vedio but i cant implement anything by myself what do i do?
You are making a wonderfull easy to learn videos
Thank you so much
And i really want to ask you for a ml5 handpose video
I would love to apply what you teached us in posenet in a handpose project ❤
Hope you find the time for that
:")
woooo hooooo !!!!
When we consider each circle filled in, does the Apollonian Gasket have any free space? Also, if I wanted to roll one of the circles, would it lockup or all start spinning?
happy Pi day!
Next, modify the code to work with 3D spheres, instead of 2D circles. I would expect adding a 'z' component wouldn't be that difficult, but then I didn't understand about 25% of what you were saying towards the end, especially the Complex number portion. Fun stuff.
Damn, and my copy of Indra's Pearls just arrived. What coincidences 😳
Well, I might be able to solve euler project task after this
Had a beer. Brain broke.
Hey man really love your content but say I wanted to become good enough a programmer to develop my own p5.js library what learning roadmap should I follow. P.S I am a self taught developer
When multiplying imaginary numbers, I'm pretty sure it's not A2B2, but rather R2D2 🤖💫