Coding Challenge #50.1: Animated Circle Packing - Part 1

Подписаться 1,7 млн

Просмотров 250 тыс.

50% 1

In this multi-part coding challenge, I demonstrate how to use a circle packing algorithm. Code: thecodingtrain.com/challenges...
p5.js Web Editor Sketches:
🕹️ Animated Circle Packing - Text: editor.p5js.org/codingtrain/s...
🕹️ Animated Circle Packing - Image: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge #49: ...
🎥 Next video: • A* Pathfinding Algorit...
🎥 All videos: • Coding Challenges
References:
💻 Various Circle Packing Tutorials: julienleonard.com/tutorials.html
🗄 Circle Packing on Wikipedia: en.wikipedia.org/wiki/Circle_...
Videos:
🎥 Part 2: • Coding Challenge #50.2...
🎥 Livestream Archive: • Coding Train Live 71: ...
Related Coding Challenges:
🚂 #47 Pixel Sorting in Processing: • Coding Challenge #47: ...
Timestamps:
0:00 Introduction
0:47 Circle Packing by Marius Watz
1:09 Create a Circle class
3:06 Add show()
4:22 Create an ArrayList
5:34 Null pointer exception
6:26 Add a grow() function
6:52 Add an edges() function
9:25 Add new circles at random x, y
10:07 Only add valid circles
14:03 Check for overlapping circles
16:02 Make sure circle is not checking itself
20:53 Seed circles based on pixel color
22:06 Read the pixels of an image
23:30 Add circles based on brightness of pixel
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: / discord
💖 Membership: ru-vid.comjoin
🛒 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...
#loadpixels #circlepacking #processingpixels #processing

Опубликовано:

10 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 337

@WnuckVader 7 лет назад

You are like the Bob Ross of programming :)

@TheOlian04 7 лет назад

Except for the fact that bob had a really soothing and calming voice, Daniel on the other hand stresses me out like hell.

@hackit1337 7 лет назад

thought the same in the middle of the vid :)

@azyfloof 7 лет назад

"We're just gonna draw some insane little circles! Now we're gonna draw some crazy circles next to it 'cause omg even circles need friends ahhhh!!"

@dnch 6 лет назад

happy little arrays:D

@gonzalezm244 6 лет назад

If bob Ross were a hyper active coder

@nahueljo 7 лет назад

I'll never get tired of your videos, Dan

@DowzerWTP72 7 лет назад

This was awesome! Sometimes I like to wake up in the morning and watch one of these to get my brain working before I start my day, and this certainly deserves a re-watch!!

@javogel 7 лет назад

Thank you so much Daniel! you are doing a great service to many of us aspiring artists + engineers.

@nacs 3 года назад

I love when I search for a problem I'm having and The Coding Train has a video up on it because I know it will have everything I want to know!

@benbirch3234 7 лет назад

Hello, it has taken your videos to make me love coding enough to learn it. Thank you! It has been something I have always wanted to do but you got me to do it.

@anjalisethi1929 3 года назад

Thank you so much for this tutorial. Helped me to make a Happy Birthday message for my mom during this quarantine. Even my 7 year old sister is doing a lot of projects while watching your videos. We both absolutely love your channel and videos. Keep making such awesome stuff.

@ShoSho-cq7ct 3 года назад

he's such a great mentor and programmer. It blew my mind.

@KhaledAlmunla 7 лет назад

These Challenges are really good I love them

@Miklethun 7 лет назад

I know next to nothing about coding, but I can't stop watching your videos, they are fascinating. Thanks for posting them!

@TheCodingTrain 7 лет назад

You can get started learning here if you want! ru-vid.complaylists?shelf_id=2&sort=dd&view=50

@paulfarcas4522 7 лет назад

DUUUUUDE, guess what, I had no previous experience with java before, only C++ base level, and after watching this video I was able to take this program a step further and make the circles smaller when they collide, then growing again and so on. I am so proud of myself

@TheCodingTrain 7 лет назад

Oh, I love hearing this!

@poopfart65 4 года назад

Nice job man! I know that feeling, it’s amazing.

@timmyanimations8321 4 года назад

doesn't it feel great when you get something done in code without really knowing what you're doing? I used to do this all the time with the inspect tool on chrome, just deleting ads I didn't like as if I'm the police :)

@zrodger2296 4 года назад

Back in the day (Atari 800 or IBM PC) if we wanted to work with the shapes of characters you could find the piece of memory where they were defined and grab the actual 8 bytes of the bitmap info for a character. Those were the days! Dan has brought me back to coding after a long time!

@michalbotor 6 лет назад

dan! you're the best! i've just finished my first draft of the illustrator/processing artwork i'm currently working on that is using the technique, that you describe here, and it already blows my mind! thanks!

@michalbotor 6 лет назад

oh, damn! where is this double like button, when you need one!?

@MrVaunorage 7 лет назад

Dthis guy is amazing, i love how he solves problems !!

@BenjaminGoldberg1 6 лет назад

Shuffle the ArrayList spots during initialization, then, when choosing a spot later, simply .pop() off the last element. When spots becomes empty, you are done.

@djtygre 5 лет назад

I did this one today. Mind blowing. Need to get back on the subscription service.

@kyukitagawa8807 5 лет назад

during checking, if the circle is valid (not intersecting with another circle) I added a +1 or +(strokeWeight) to c.r so its if(d

@hitherthither5712 6 лет назад

I really like your style of approaching the goal!!!

@benanciorodriguez7308 7 лет назад

love you dude, hope your channel grows! ;p

@vinijoncrafts2882 2 года назад

who the hell dislikes this?! You're amazing! You was the one who made me interested in programming and I think you're amazing at teaching people!

@RhoTrepaan 4 года назад

This is such a cool effect!

@MrMinusguy 5 лет назад

This man and his enthusiasm make me want to pick up programming again

@cirithor 7 лет назад

As a person, that could create such a code mabye at an entire weekend with lots of searching in the internet, I need to say: You are AWESOME!

@TheCodingTrain 7 лет назад

Thanks for watching!

@LeviJohansen 7 лет назад

I would check how much available area there is in the canvas, and add more circles as long as there is room for atleast a 2 pixel dot.

@Kombo-Chapfika 7 лет назад

Awesome as always. Thank you sensei!

@Carlos-xz9zq 7 лет назад

love your videos, keep the good work :P

@DiegoSayron 7 лет назад

Dan, você tem a melhor forma de ensinar: Inicia do ponto zero, erra e mostra o porquê e ainda não se prende a explicações cansativas. Para aqueles que estão começando, mostra como um programador pensa. Isso é uma riqueza que você dá de graça. Nós programadores pensamos assim, mas de forma mística, não conseguimos transformar esse pensamento em fala, quando ensinamos a alguém. Alem disso, o inglês é bem "suitable" para estrangeiros, além de divertido! ("Circle, you are my friend!")

@mrz9900 7 лет назад

Lovely coding challenge, thanks Dan!

@TheCodingTrain 7 лет назад

Thank you!

@yanito1979 7 лет назад

Thanks for making learning programming so fun and easy!

@TheCodingTrain 7 лет назад

Thanks for watching!

@michalbotor 6 лет назад

i believe, that the condition 'if (d < c.r)' in the function 'newCircle' should read 'if (d < c.r + r)', where 'r' is the radius of the new circle. Consider this: let nc = Circle(x=0, y=0, r=1), c = Circle(x = 5/2, y = 0, r = 2). they clearly overlap (just draw them), yet 5/2 = d(nc, c) > c.r = 2. on the other hand 5/2 = d(nc, c) < c.r + r = 3. my point is, that new circles already have a positive radius, and we probably shouldn't neglect it.

@MihirrPanchaal 7 лет назад

Love your videos!! I watch one right after my work and then work on my iOS app. Thanks!!

@TheCodingTrain 7 лет назад

That's so nice to hear, thank you!

@AdriGomezD 7 лет назад

You're awesome Daniel ;)

@ashwinjayaprakash7991 4 года назад

DAN YOU ARE THE MAN !

@princeofodd 7 лет назад

This one was very awesome! Thank you for the video!!

@TheCodingTrain 7 лет назад

So glad to hear!

@doomood 7 лет назад

Thank you for expanding my brain!

@ice-rv7tz 6 лет назад

bro i just got an ad from you on this vid, from you but i actually liked it, because you are the best

@rupertrussell1 7 лет назад

Wow this was fantastic thanks!

@grumpyparsnip 4 месяца назад

I love this channel.

@kosmic000 7 лет назад

ur de best daniel!!

@jikiwiki 7 лет назад

Really like you videos! Keep it up!

@mattotoole4327 6 лет назад

Excellent job!

@zaqk2 Год назад

You are my all time reference book 😇

@fernandojerez3444 7 лет назад

Awesome!

@sam111880 4 года назад

I feel like alot of these packing problems are highly computation dependent. Thus at some level we should beable to verify it for are selves as i don't doubt the correctness of the main proof. But you want to verify to some extent on your own. Great video.

@TAyLOcOMG 4 года назад

Hey Daniel, good video, and very interesting content! I think that the “attemps” variable(19:25) it would work better if there’s an else statement around, and the count is reset every time we create a new circle, otherwise is adding an attemp when it was really a success, and for some circles, probably the lasts ones, is not gonna have enough range to try it properly... Thanks:).

@techy4198 7 лет назад

You uploaded this on the same day I was taught the overlapping circles rule thing in college :D

@TheCodingTrain 7 лет назад

hah!

@RatoCavernaBR 6 лет назад

This code will work so great for my perlin noise city.

@tetamusha 5 лет назад

14:30 When you check if c overlaps with other, you could stop both c and other from growing, instead of just c.

@aurorapaisley7453 4 года назад

Why

@Elkestra 4 года назад

@@aurorapaisley7453 If the current 'growing' circle has just touched another circle, then that 2nd circle won't be able to grow either.

@roronoazoro5521 4 года назад

Makes sense

@tech1779 2 года назад

Amazing

@pedrovelazquez138 4 года назад

This guy is a genius!!!!

@lenardvandermaas6893 7 лет назад

so cool!

@sam111880 4 года назад

Great demo , This is definitely a good starting point for modeling the circle packing density problem. And possible away to generalize it to higher dimensions to gain insight into stuff. A rough approximation to Hales proof. By no means is it through enough and exhaustive in all cases but definitely the way to go. As you can at least see patterns in higher dims or with different shapes i am getting ready to code something like this. Currently we only have E8 and the leech lattice aka 8 and 24 D.

@Thehero394 7 лет назад

U are a genius man awsome videos i Love your channel

@nameisshame 7 лет назад

huge fan

@GhalibAnsari19945 7 лет назад

awesome

@akshaypratap2010 5 лет назад

Great video sir ji

@BudderB0y2222 5 лет назад

I know nothing about programming but it was so cool seeing how it was applied and makes me wanna learn. Only problem is I get bored after a few days

@stefancitiriga8394 7 лет назад

I had to declare var attempts=0 as global, so i dont give it the value 0 every frame. That's why it never returned "FINISHED". P.S. I love your videos. This is the most pleasant way of learning something.

@biswajitsingh8790 7 лет назад

man this guy is so freaking good he would make engineers working at google facebook feel inferior.

@core36 2 года назад

the part where you check the circles against each other (about 15:20), you could have stopped the other circle too. if a circle hits another circle it should stop but that implies that the other circle has hit a circle, the current one you are working on. the best situation would be you have way less checks, because you only check if growing=true, at worst you stop an already stopped circle.

@roshanpawara8717 6 лет назад

Hello sir, i bumped into your channel when i was looking for some help with my project in C which was actually a maze solver using stack. Your recursive maze generator actually helped me a lot. The point is i have spent a lot of time in C and now i think its time that i move towards java. The way you explain stuff is really awesome, very few people have this ability. I just wanted to know that do you make tutorials for java? If yes, i would be more than happy. Trust me sir it would really mean the world to me. I am a 2nd year Computer Engineering student and i have been fond of coding since i was in 4th grade. I had a lot of hopes from an engineering college, but when i got to college i learned that they don't teach you much, one needs to push himself and become better and better. Its been two years in engineering and i had lost hope. But sir you have inspired me to not lose hope and continue following my passion which i started in 4th Grade......I would really appreciate if could make some videos for Programming in Java for beginners....Sorry this comment got to lengthy....and have a nice day sir....you really are doing a great job!!

@TheCodingTrain 6 лет назад

All of my "Processing" tutorials are Java, see: processing.org. (The p5 ones are JavaScript).

@roshanpawara8717 6 лет назад

Thank You so much sir. The stuff there is quite awesome. Already started with the tutorials. Loving it..!!

@tyreiqdow6100 7 лет назад

thanks

@JayTailor45 5 лет назад

You are the best

@TheMarialadelbario 7 лет назад

use this thing to inspire kids in coding challenge 😁😊

@florianrohrauer8471 5 лет назад

There is also a "this." in java :) so you dont have to make underlines at the contructor

@yashkothari7540 7 лет назад

WOW !

@gabriellemcintyre1885 3 года назад

How have I only just stumbled upon you now? You're adorable

@DrWalnuss 7 лет назад

thank you for using processing :) I prefer that over P5

@zane4667 5 лет назад

but why, its kind of the same?

@tx6723 5 лет назад

@@zane4667 both have their advantages one to java is that it has threads

@Ewriick 7 лет назад

As always a nice video! However, I would like to see more about coding principles you should use, especially in OOP. E.g, in this video you create a Circle class, but I think you could use it a lot more. Also, brief explanations of some things to avoid, e.g. why you should be aware of what you can/can do while looping through a list, depending on how you loop and what kind of array/list you use. Generally, I think you are a great teacher :) I get a little bit cringy of too many for-loops every once in a while, though ;)

@TheCodingTrain 7 лет назад

This is a great point! I do have some OOP videos here: ru-vid.com/group/PLRqwX-V7Uu6bb7z2IJaTlzwzIg_5yvL4i and ru-vid.com/group/PLRqwX-V7Uu6Z9hI4mSgx2FlE5w8zvjmEy

@andreascabreira 2 года назад

that circle is my friend

@dickheadrecs 5 лет назад

5:31 that sound is always gonna remind me of NPEs from now on 🤣

@jephph5776 7 лет назад

Well that's nice...

@pward17 7 лет назад

Loving these videos. No mouse?

@ShubhamSharma-sj6cu 7 лет назад

Hi Dan, when we are going to see the video that deals with typing something and displaying it using these circles you talked about in this video? And can we use processing sketches like we use P5 sketches as canvases to be displayed on websites

@franciscolopezvega458 7 лет назад

You forgot to put the chrono at the corner counting the time you spent on the callenge. Great job man!

@TheCodingTrain 7 лет назад

I stopped using the timer a while ago, but if people want it back in I'm happy to reconsider!

@akshatverma5084 4 года назад

Processing : how many ifs do you want in this code? Dan:yes

@ThePizzabrothersGaming 6 лет назад

Why not change the circle method grow to be if (!edges()) r++; ? EDIT: seeing it progress further, it's maybe better to pass a parameter so you can save lines of code for the comparisons e.g. grow will be if (param) r++; and your call is grow(d < c.r + other.r) ?

@uncommonsense360 Год назад

You forgot to make the circles stop growing when they hit black pixels from the reference image at the end.

@clemensruis 5 лет назад

I really like your videos. I have a few suggestions people mind find valuable, though: .) Much more readable/less nesting: instead of: for(Circle other : circles) { if(c != other) { /* code */ } } use: for(Circle other : circles) { if(c == other) { continue; } /* code */ } This is much more readable - especially in more complex functions, like when there are several conditions which have to be checked. The same works for functions which check parameters and don't execute based on some condition. If the required condition isn't met, just return rather than having an if-block inside the whole function. .) Arguably cleaner: Instead of: while (count < total) { /* code */ attempts++; if (attempts > 1000) { break; } } use: while (count < total && attempts++ < 1000) { /* code */ } .) If a circle (c) touches another circle (other) you can set growing to false on both c and other. .) If a spot isn't valid, remove it from the list (this way you can actually fill the whole area until there are no more spots left) .) You don't need to call 'grow()' on cycles which aren't growing anymore. (move it into the 'if(c.growing) {' block. .) When checking if a spot is valid, you might want to factor in the line thickness as well as the radius of the new circle.

@TheCodingTrain 5 лет назад

Thanks for this feedback!

@gabrielcyrillo3983 7 лет назад

Yesterday I did this code challenge + kitten addendum in VanillaJS - aka plain old Javascript. It was pretty fun and easy peasy lemon squeezy, yet some stupid problems with the ImageData object and loading gave me a headache (chrome recognizes loading a image from local files as cross-origin data. To fix this problem, you need to run a localhost). My canvas automatically fits the original size of the picture and it's surprisingly fast. Maybe I'll put it on github later. Cool code for a boring afternoon ❤

@TheCodingTrain 7 лет назад

Interesting to hear, thanks for sharing!

@gabrielcyrillo3983 7 лет назад

Thank you!

@charbelsarkis3567 7 лет назад

i saw an app online that makes the letters repulse when you bring the mouse next to them

@rison.prasadkarayil787 3 года назад

hey daniel, could you post other circle packing tutorial? this one is more like circle filling algorithm than packing. for example, if we have 100 circles of 3 different radius our algorithm should try to pack it. thank you

@WildAnimalChannel 6 лет назад

I keep thinking that's my door bell!

@cristianesimoes3432 Год назад

😍

@tyrellgoeslive 7 лет назад

Dan when you named your x and y's in the Circle constructor how come you don't use the "this.x = x and this.y = y I'm curious, and still trying to find my way so I like seeing why others make the decisions they do... Love your videos as always thanks for making them.

@Stefan_1998 7 лет назад

For anyone interested in a c# version of this: github.com/StefanPahlplatz/CirclePacking

@TheCodingTrain 7 лет назад

Nice work!

@anonimolka 7 лет назад

Hi Daniel, are you broadcasting your "lectures" on Twich or youtube? How did you got the idea for this let's call it show? I like how you're explaining all the logic behind :) that reminds me about my favorite math teacher from highschool from whom I've learned tons and tons of good things applicable both in math and IT :) and I've built on that knowledge my coding skills :) hi professor Pająk from LO im. S. Konarskiego in Oświęcim! :)

@TheCodingTrain 7 лет назад

I broadcast them here on RU-vid. I tried Twitch for a while but it didn't catch on. Sign up for announcement at codingrainbow.com or stay tuned to my twitter @shiffman.

@jakebs3945 6 лет назад

how would you stop the circles growing beyond the outline of the text?

@i.i 7 лет назад

where is the p5 video?

@1732ashish 5 лет назад

as he mentioned at 27:45 is there a coding challenge for a dynamic text circle packing ?

@eris4734 7 лет назад

Do a hyperbolic plane coding challenge!

@TheCodingTrain 7 лет назад

Great idea!

@jokkols 7 лет назад

+Daniel Shiffman Why don't you add your if-condition for breaking, to the condition of the while loop to clean up the code a bit (btw i'm not trying to be nazi about it, I've just seen you use breaks a bunch and i'm a big sucker for boolean zen): while(count < total && attempts < 1000){ ... }

@TheCodingTrain 7 лет назад

Thanks for the tip!

@benjoe1993 Год назад

You have a video on every single problem I come across during my gamedev journey? :D

@tibimose823 7 лет назад

Amazing video, as always, but I think I got a bit too used to those PhD precise algorithms for doing things. Would there be any sure-fire way to create new circles in every frame, without generating a random number and crossing our fingers? The only way I see it now is to keep track of all the available pixels in a list and shrink that list every time a new one is added or one grows, until it's empty or below some threshold. Other ideas?

@TheCodingTrain 7 лет назад

If you google circle packing you'll find a lot of discussion and research around more efficient ways of doing this. I just went for simplicity over optimization.

@tibimose823 7 лет назад

Daniel Shiffman will do, thank you Sir!

@sergiugroza2415 7 лет назад

Imma subscribe the hell out of your channel, mister.

@TheCodingTrain 7 лет назад

So glad to hear!

@Calz20Videos 7 лет назад

How does this only have 51 views, second

@mystith 7 лет назад

It's unlisted.

@ruairi_ 7 лет назад

loads of my smaller circles end up overlapping each other or the edges of the bigger ones :(

@albertocardona5894 4 года назад

Does the image need to be a .png file? or can JPEGS also work. Also, does it depend on how large the photo being used is? Mine won't even display in the background when I command it to. Please help!

@helloitsme7553 5 лет назад

You could have started with all circles r=0 so that you don't have to check if they're inside another circle

@TakeiRyo 7 лет назад

I want to learn java to do programming......do you have playlist of java?(I'm in robotics team and I want to be doing programming) And are processing and java same thing? Or is it a bit different?

@Wshadow56 7 лет назад

Ryo Takei processing is an environment on top of Java, meaning it ressembles Java, but it also simplifies its syntax a tad. You can check out his playlists, he's got one where you can learn the basics of processing and then you can check out his other playlists to become a pro

@TakeiRyo 7 лет назад

Whiteshadow56 sorry, what playlist are you talking about? I'm sorry I don't want to misunderstand so......

@Stefan_1998 7 лет назад

If you're serious about programming then learn java instead of processing. When you learn java, processing will become easy to learn.

@TakeiRyo 7 лет назад

Stefan oh i see....thank you guys for answering.

@Wshadow56 7 лет назад

Ryo Takei click on his account name under the video, the click on playlists on his channel page and you should find a list of different playlists. Hope this helps you