Coding Challenge #50.1: Animated Circle Packing - Part 1

Поділитися
Вставка
  • Опубліковано 20 вер 2024

КОМЕНТАРІ • 337

  • @WnuckVader
    @WnuckVader 7 років тому +484

    You are like the Bob Ross of programming :)

    • @TheOlian04
      @TheOlian04 7 років тому +23

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

    • @hackit1337
      @hackit1337 7 років тому +1

      thought the same in the middle of the vid :)

    • @azyfloof
      @azyfloof 7 років тому +6

      "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
      @dnch 6 років тому +5

      happy little arrays:D

    • @gonzalezm244
      @gonzalezm244 6 років тому +6

      If bob Ross were a hyper active coder

  • @nahueljo
    @nahueljo 7 років тому +72

    I'll never get tired of your videos, Dan

  • @DiegoSayron
    @DiegoSayron 7 років тому +9

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

  • @BenjaminGoldberg1
    @BenjaminGoldberg1 6 років тому +22

    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.

  • @paulfarcas4522
    @paulfarcas4522 7 років тому +76

    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
      @TheCodingTrain  7 років тому +34

      Oh, I love hearing this!

    • @poopfart65
      @poopfart65 4 роки тому +2

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

    • @timmyanimations8321
      @timmyanimations8321 4 роки тому +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 :)

  • @anjalisethi1929
    @anjalisethi1929 4 роки тому +4

    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.

  • @nacs
    @nacs 3 роки тому +2

    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!

  • @zrodger2296
    @zrodger2296 4 роки тому +2

    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!

  • @ShoSho-cq7ct
    @ShoSho-cq7ct 3 роки тому +2

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

  • @Miklethun
    @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
      @TheCodingTrain  7 років тому

      You can get started learning here if you want! ua-cam.com/users/shiffmanplaylists?shelf_id=2&sort=dd&view=50

  • @kyukitagawa8807
    @kyukitagawa8807 5 років тому +1

    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

  • @benbirch3234
    @benbirch3234 7 років тому +4

    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.

  • @MrVaunorage
    @MrVaunorage 7 років тому +10

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

  • @tetamusha
    @tetamusha 6 років тому +7

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

    • @aurorapaisley7453
      @aurorapaisley7453 4 роки тому

      Why

    • @Elkestra
      @Elkestra 4 роки тому +1

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

    • @roronoazoro5521
      @roronoazoro5521 4 роки тому

      Makes sense

  • @KhaledAlmunla
    @KhaledAlmunla 7 років тому +6

    These Challenges are really good I love them

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

  • @MrMinusguy
    @MrMinusguy 5 років тому +3

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

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

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

  • @djtygre
    @djtygre 5 років тому

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

  • @javogel
    @javogel 7 років тому

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

  • @LeviJohansen
    @LeviJohansen 7 років тому +4

    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.

  • @vinijoncrafts2882
    @vinijoncrafts2882 3 роки тому

    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!

  • @michalbotor
    @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
      @michalbotor 6 років тому

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

  • @hitherthither5712
    @hitherthither5712 6 років тому +2

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

  • @ashwinjayaprakash7991
    @ashwinjayaprakash7991 4 роки тому

    DAN YOU ARE THE MAN !

  • @mrz9900
    @mrz9900 7 років тому +3

    Lovely coding challenge, thanks Dan!

  • @zaqk2
    @zaqk2 2 роки тому

    You are my all time reference book 😇

  • @grumpyparsnip
    @grumpyparsnip 6 місяців тому

    I love this channel.

  • @uncommonsense360
    @uncommonsense360 Рік тому +1

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

  • @sam111880
    @sam111880 5 років тому

    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.

  • @AdriGomezD
    @AdriGomezD 7 років тому +1

    You're awesome Daniel ;)

  • @MihirrPanchaal
    @MihirrPanchaal 7 років тому

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

  • @benanciorodriguez7308
    @benanciorodriguez7308 7 років тому

    love you dude, hope your channel grows! ;p

  • @yanito1979
    @yanito1979 7 років тому

    Thanks for making learning programming so fun and easy!

  • @ice-rv7tz
    @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

  • @RhoTrepaan
    @RhoTrepaan 4 роки тому

    This is such a cool effect!

  • @TAyLOcOMG
    @TAyLOcOMG 4 роки тому +1

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

  • @Carlos-xz9zq
    @Carlos-xz9zq 7 років тому +2

    love your videos, keep the good work :P

  • @roshanpawara8717
    @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
      @TheCodingTrain  6 років тому

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

    • @roshanpawara8717
      @roshanpawara8717 6 років тому

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

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

  • @florianrohrauer8471
    @florianrohrauer8471 5 років тому +2

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

  • @Kombo-Chapfika
    @Kombo-Chapfika 7 років тому

    Awesome as always. Thank you sensei!

  • @princeofodd
    @princeofodd 7 років тому

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

  • @doomood
    @doomood 7 років тому +1

    Thank you for expanding my brain!

  • @pedrovelazquez138
    @pedrovelazquez138 5 років тому

    This guy is a genius!!!!

  • @andreascabreira
    @andreascabreira 2 роки тому +1

    that circle is my friend

  • @BudderB0y2222
    @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

  • @rupertrussell1
    @rupertrussell1 7 років тому +1

    Wow this was fantastic thanks!

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

  • @RatoCavernaBR
    @RatoCavernaBR 6 років тому +1

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

  • @sam111880
    @sam111880 5 років тому

    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.

  • @techy4198
    @techy4198 7 років тому

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

  • @DrWalnuss
    @DrWalnuss 7 років тому +2

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

    • @zane4667
      @zane4667 5 років тому +1

      but why, its kind of the same?

    • @tx6723
      @tx6723 5 років тому +1

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

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

  • @kosmic000
    @kosmic000 7 років тому

    ur de best daniel!!

  • @biswajitsingh8790
    @biswajitsingh8790 7 років тому

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

  • @mattotoole4327
    @mattotoole4327 6 років тому

    Excellent job!

  • @benjoe1993
    @benjoe1993 Рік тому

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

  • @александррыкачев-с3х

    ArrayList circles;
    int attempts=0;
    void setup() {
    size(640, 360);
    circles=new ArrayList();
    }
    void draw()
    {
    background(0);
    int total=10;
    int count=0;

    while (count100){
    noLoop();
    println("Finish");
    break;
    }

    }

  • @Thehero394
    @Thehero394 7 років тому

    U are a genius man awsome videos i Love your channel

  • @Ewriick
    @Ewriick 7 років тому +1

    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
      @TheCodingTrain  7 років тому +2

      This is a great point! I do have some OOP videos here: ua-cam.com/play/PLRqwX-V7Uu6bb7z2IJaTlzwzIg_5yvL4i.html and ua-cam.com/play/PLRqwX-V7Uu6Z9hI4mSgx2FlE5w8zvjmEy.html

  • @gabriellemcintyre1885
    @gabriellemcintyre1885 4 роки тому

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

  • @franciscolopezvega458
    @franciscolopezvega458 7 років тому

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

    • @TheCodingTrain
      @TheCodingTrain  7 років тому

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

  • @jikiwiki
    @jikiwiki 7 років тому

    Really like you videos! Keep it up!

  • @nameisshame
    @nameisshame 7 років тому +1

    huge fan

  • @TheMarialadelbario
    @TheMarialadelbario 7 років тому

    use this thing to inspire kids in coding challenge 😁😊

  • @tech1779
    @tech1779 2 роки тому

    Amazing

  • @akshaypratap2010
    @akshaypratap2010 5 років тому

    Great video sir ji

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

  • @fernandojerez3444
    @fernandojerez3444 7 років тому

    Awesome!

  • @charbelsarkis3567
    @charbelsarkis3567 7 років тому +2

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

  • @eris4734
    @eris4734 7 років тому +5

    Do a hyperbolic plane coding challenge!

  • @gabrielcyrillo3983
    @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 ❤

  • @anonimolka
    @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
      @TheCodingTrain  7 років тому

      I broadcast them here on UA-cam. 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.

  • @tyreiqdow6100
    @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

  • @lenardvandermaas6893
    @lenardvandermaas6893 7 років тому

    so cool!

  • @jokkols
    @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){ ... }

  • @akshatverma5084
    @akshatverma5084 4 роки тому

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

  • @tahaanass3097
    @tahaanass3097 6 місяців тому

    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 !

  • @zapcompany5007
    @zapcompany5007 7 років тому

    load it in processing ;)
    int y;
    PImage image;
    int offset=5;
    void setup(){
    image = loadImage("the name of your image");
    size(the size of your image);
    }
    void draw(){
    image.loadPixels();
    color c = image.get(x,y);
    if(brightness(c)

  • @dickheadrecs
    @dickheadrecs 5 років тому +1

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

  • @rison.prasadkarayil787
    @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

  • @tibimose823
    @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
      @TheCodingTrain  7 років тому +1

      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
      @tibimose823 7 років тому

      Daniel Shiffman will do, thank you Sir!

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

  • @Calz20Videos
    @Calz20Videos 7 років тому +13

    How does this only have 51 views, second

    • @mystith
      @mystith 7 років тому

      It's unlisted.

  • @i.i
    @i.i 7 років тому

    where is the p5 video?

  • @Stefan_1998
    @Stefan_1998 7 років тому +3

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

  • @pward17
    @pward17 7 років тому

    Loving these videos. No mouse?

  • @tyreiqdow6100
    @tyreiqdow6100 7 років тому

    thanks

  • @JayTailor45
    @JayTailor45 5 років тому

    You are the best

  • @helloitsme7553
    @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

  • @ShubhamSharma-sj6cu
    @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

  • @tomasderner7511
    @tomasderner7511 7 років тому

    You don't really need to write the generic type again after new, e.g. ArrayList circles; circles = new ArrayList(); It somewhat decreases the unfortunate verbosity of Java.

  • @naraksama3903
    @naraksama3903 2 роки тому

    Idk why, but in p5 i have to check d * 2 for intersection, otherwise I'm left with a weird margin between each circle. Even though I calculate the distance with Math.hypot().

  • @TakeiRyo
    @TakeiRyo 7 років тому +6

    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
      @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
      @TakeiRyo 7 років тому

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

    • @Stefan_1998
      @Stefan_1998 7 років тому +2

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

    • @TakeiRyo
      @TakeiRyo 7 років тому

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

    • @Wshadow56
      @Wshadow56 7 років тому +1

      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

  • @GhalibAnsari19945
    @GhalibAnsari19945 7 років тому

    awesome

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

  • @ruairi_
    @ruairi_ 7 років тому +1

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

  • @subhashsarangi
    @subhashsarangi 4 роки тому

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