Coding Challenge #50.1: Animated Circle Packing

No video

Coding Challenge #50.1: Animated Circle Packing - Part 1

Рет қаралды 250,542

Күн бұрын

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: 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...
#loadpixels #circlepacking #processingpixels #processing

Пікірлер: 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

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

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

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

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

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

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

@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! kzfaq.infoplaylists?shelf_id=2&sort=dd&view=50

@ShoSho-cq7ct 3 жыл бұрын

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

@javogel 7 жыл бұрын

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

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

@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

@KhaledAlmunla 7 жыл бұрын

These Challenges are really good I love them

@MrMinusguy 5 жыл бұрын

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

@MrVaunorage 7 жыл бұрын

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

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

@djtygre 5 жыл бұрын

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

@hitherthither5712 6 жыл бұрын

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

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

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

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

@benanciorodriguez7308 7 жыл бұрын

love you dude, hope your channel grows! ;p

@Kombo-Chapfika 7 жыл бұрын

Awesome as always. Thank you sensei!

@mrz9900 7 жыл бұрын

Lovely coding challenge, thanks Dan!

@TheCodingTrain 7 жыл бұрын

Thank you!

@Carlos-xz9zq 7 жыл бұрын

love your videos, keep the good work :P

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

@RhoTrepaan 4 жыл бұрын

This is such a cool effect!

@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

@AdriGomezD 7 жыл бұрын

You're awesome Daniel ;)

@zaqk2 Жыл бұрын

You are my all time reference book 😇

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

@ashwinjayaprakash7991 4 жыл бұрын

DAN YOU ARE THE MAN !

@grumpyparsnip 5 ай бұрын

I love this channel.

@princeofodd 7 жыл бұрын

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

@TheCodingTrain 7 жыл бұрын

So glad to hear!

@jikiwiki 7 жыл бұрын

Really like you videos! Keep it up!

@rupertrussell1 7 жыл бұрын

Wow this was fantastic thanks!

@yanito1979 7 жыл бұрын

Thanks for making learning programming so fun and easy!

@TheCodingTrain 7 жыл бұрын

Thanks for watching!

@doomood 7 жыл бұрын

Thank you for expanding my brain!

@mattotoole4327 6 жыл бұрын

Excellent job!

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

@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:).

@akshaypratap2010 5 жыл бұрын

Great video sir ji

@kosmic000 7 жыл бұрын

ur de best daniel!!

@RatoCavernaBR 6 жыл бұрын

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

@tetamusha 6 жыл бұрын

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

@Thehero394 7 жыл бұрын

U are a genius man awsome videos i Love your channel

@techy4198 7 жыл бұрын

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

@TheCodingTrain 7 жыл бұрын

hah!

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

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

@tech1779 2 жыл бұрын

Amazing

@nameisshame 7 жыл бұрын

huge fan

@pedrovelazquez138 4 жыл бұрын

This guy is a genius!!!!

@lenardvandermaas6893 7 жыл бұрын

so cool!

@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

@florianrohrauer8471 5 жыл бұрын

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

@biswajitsingh8790 7 жыл бұрын

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

@gabriellemcintyre1885 3 жыл бұрын

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

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

@tyreiqdow6100 7 жыл бұрын

thanks

@i.i 7 жыл бұрын

where is the p5 video?

@TheMarialadelbario 7 жыл бұрын

use this thing to inspire kids in coding challenge 😁😊

@JayTailor45 5 жыл бұрын

You are the best

@andreascabreira 2 жыл бұрын

that circle is my friend

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

@charbelsarkis3567 7 жыл бұрын

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

@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: kzfaq.info/sun/PLRqwX-V7Uu6bb7z2IJaTlzwzIg_5yvL4i and kzfaq.info/sun/PLRqwX-V7Uu6Z9hI4mSgx2FlE5w8zvjmEy

@akshatverma5084 4 жыл бұрын

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

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

@dickheadrecs 5 жыл бұрын

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

@GhalibAnsari19945 7 жыл бұрын

awesome

@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

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

@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

@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

@uncommonsense360 Жыл бұрын

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

@pward17 7 жыл бұрын

Loving these videos. No mouse?

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

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

@ruairi_ 7 жыл бұрын

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

@benjoe1993 Жыл бұрын

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

@subhashsarangi 4 жыл бұрын

Sir, could you please make a video on how to use p5 library in python

@jakebs3945 6 жыл бұрын

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

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

@WildAnimalChannel 6 жыл бұрын

I keep thinking that's my door bell!

@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) ?

@yashkothari7540 7 жыл бұрын

WOW !

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

@Calz20Videos 7 жыл бұрын

How does this only have 51 views, second

@mystith 7 жыл бұрын

It's unlisted.

@jephph5776 7 жыл бұрын

Well that's nice...

@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 KZfaq. 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.

@tahaanass3097 5 ай бұрын

i tried it my own with js canvas , it was hard , i couldn't figure out how to check if the circles are overlapping with each other , but i did half the work 😅 , also , i didn't understand at all how you dealed with the image i mean what is behind the scenes !

@JannisAdmek 5 жыл бұрын

I am used to the convetion at 2:20 to be the other way around, so something_ being the class field.

@bemisguy777 7 жыл бұрын

8:15 I'm getting an error "unexpected token boolean" and i'm not sure why

@prabhanshuwakodikar2082 5 жыл бұрын

Sir can you make a video on Generative art?

@tyreiqdow6100 7 жыл бұрын

instead of making the circle stop at one point you should have the same circle bounce off the screen the make it get smaller as it bounces off the edge of the canvas

@TheCodingTrain 7 жыл бұрын

cool idea!

@ritikasharma-tf6kd 4 жыл бұрын

hey what is the name of algo you are using for circle packing

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