"Who's watching this still?!" Me! Don't stop! :D Seriously, don't ever change, you are incredibly fun to watch, and you really make this fun to learn :)
Daniel, these videos are absolutely amazing and sadly underated. You deserve WAY more views. I enjoy every one you upload, and thoroughly thank you! Keep it up! :)
8 лет назад+39
This is cool - it teaches the basic and necassary stuff in programming, but with an interesting problem.
This one was very interesting tutorial. By the way, comparing this, with your recent videos, the quality of everything (lighting, video, audio, the way you explain things) got improved to a very high degree. An already great channel getting better everyday. It is inspiring to see how much you've come and realize how to improve along the way. As a recovering perfectionist, it explains me how it should be done. Thank you.
Dear Daniel. I"m learning processing through your video's and I gotta thank you big time. I will have a test in three weeks about arays, return, if / else, loops etc. with these video's im bound to pass the test. thankyou so much
I played around with this idea in C# a bit. I started with a canvas size of 1280 x 720, a radius of 32 and a maximum of 500 attempts to draw a circle not overlapping another one. After I'd tried that 500 times, I started over, doubling the number of attempts and halving the radius, so radius 16, 1000 attempts. I continue this until I have a radius of 2 and I'm attempting to place 8000 circles. In the end I managed to get around 2500 circles to draw of varying radii, none of which overlap any other circles. Takes about 1.3 seconds to calculate and draw. The way I implemented it is not very optimized though. It only uses around 6mb of RAM, but nearly 50% of my CPU. For the last attempt of the radius 2 circles, it's done a total of 15449 distance calculations (I don't bother checking the first one of radius 32).
Wouldn't it be better to start with a certain radius. Place as many circles as possible, and when you cant place any anymore decrease the radius by 1, and repeat the process, until the radius is 0, then stop the loop. That would give you as much circles with the biggest size as possibly fit on the screen,right?
YourNightmar3 this is still a brute force approach. After how many iterations are you determining you can't fit anymore circles on the screen? It may just be that there is a spot to fill with that radius length, but the computer hasn't found it yet. Although an interesting proposal, I think random radius lengths from the get-go would still be faster
Just set r to the specific circle size you want, instead of random. He does that all the way through the video with r: 32 until 18:03 where he changes the radius from specific size to random size.
This video made me think. I'd forget the array, unless you want the circles to interact later in the program. Otherwise, I immediately thought of a different way to do it by picking a point of test coordinates and checking if it touches a circle's color. If it doesn't touch a circle's color, check the perimeter of a circle with radius n at the test coordinates (where n = 1 to the maximum circle size). A routine could select points around an imaginary circle and test each point for a circle's color (kind of like looking around a point in a spiral to see if there is any circles nearby). If it doesn't touch a circle, the imaginary circle grows until it reaches the maximum size or hits a circle's color, at which point, a circle with radius n-1 would be drawn and the program repeats. This continues until the circles get smaller and smaller, filling in all the space. If you want to array the successful circles, this method would still allow for that. If I could program in p5.js, I'd give it a try, but I'm really, really old school. I still program in BASIC. I'm trying to learn from your videos, but I appreciate the logic structure more than the actual code.
Did you ever do that force-directed graph video? I needed to do something along those lines for a project at work. I'm brand new to JS and have never touched P5 but I've been watching your videos for years just for the algorithmic interest (I've been programmin in C/C++/C# for decades). Any way, when I had to tackle this I thought I'd come back and see if you have anything I could draw from but I couldn't find a video on self organising graphs (maybe I'd have more success now that I know the correct term - "force-directed graphs"). Anyway, here's what I was able to slap together. I'm super impressed with how easy it was to write my first P5.js code. This is literally the first sketch that I've written in P5. But thanks to all your videos it made getting into it a walk in the park. You may even recognise some terminology that was taken straight from your tutorials, like "Bubbles". Sorry, I coudn't find an intuitive place to bring in Unicorns or Kittens ;-) editor.p5js.org/deefstes/sketches/MYMhdhD5C
Here's one simple next optimization step: instead of checking if the circles overlap, make that loop calculate distance to the closest circle, let's call it "minDist". Let's also replace the magic numbers 6 and 36 with the variables "minRadius" and "maxRadius". Then add: if (minDist > minRadius) { circle.r = random(minRadius, min(minDistance - gap, maxRadius)); } // where "gap" is a variable for the number of pixels you want between circles Using this approach, the small gaps in the image will get filled much quicker (also, compared to before the distribution of circle sizes will be skewed to smaller circles, but that's not really important). edit: clarity
An alternative without random run time would be when using squares. You would split the canvas into an grid in an array and then just shuffle the array once. And then you would just go through the array.
Hey Daniel, just a suggestion. I came to this video of yours after watching a couple of your latest videos and I could see this one has a far better sense of explanation. You even assumed that viewer might not know what a radius. I think if you can inculcate and carry on same style in your future videos it will be very helpful, especially to someone who is just starting to learn how to think a puzzle in a programmer's perspective
Because that second loop is outside the first loop, decreasing i does nothing. If you nest all of those loops inside of each other (probably a bad idea unless you use functions to make the code easier on the eyes), then yes, appending that to the end of your loop would work.
I'm trying to modify this code so that it produces circles only if they are bordering another circle, but I can't seem to get it right. It either produces circles overlapping or exclusively not overlapping.
You should do a video about Reciprocal Velocity Obstacles, that would be awesome. I tried to read one of the papers on the subject but I have a hard time turning it into code.
Could you have the circles set to decrease size when they run out of available space? Like when they run out of space to fit the largest circles, the size decreases to accommodate the next smallest ones, etc... with the radius continually shrinking until you reach the smallest radius that you want
Hi Daniel, I already used this method to generate non-overlapping circles for my project. Thanks for this awesome video though. It would be really helpful for others. I have a question. Its not efficient way of doing it. What is the optimized approach to solve this problem? Thanks.
this was useful for a whole other problem I'm working on, random placement of random triangular terrain tiles and subdivision into polygons made of triangles. I can splat some triangles into a rectangular map and build triangles between the side and two corners of one triangle and a corner of a nearby triangle. I need to make sure my initial triangles don't overlap and any new triangles I build off the sides of a terrain tile connect to a corner of a nearby triangle rather than overlap... I really hope that makes sense.
Any idea on how to calculate the distance between the two circles using the Pythagorean theorem? I'm using plain JS which doesn't have the distance function.
Was a fine video. Well, could you have done this similar type of algorithm for random shapes (random polygons) instead of circles? In that case, what would be the limiting criteria for not overlapping of shapes?
Thank you for your content just got your book the nature of code and I'm reading through it and I love it I'm a high school student with a passion for coding and I find your book and all your videos very very help full keep up the great work
+Daniel Shiffman I just want to ask you one last thing is it possible to maybe get an email address to contact you by to ask questions and I would love to learn more about ITP NYU first hand I know your a busy person but if you can help me out I would greatly appreciate it, like I said above I am a junior at high school so I am looking for great colleges to continue learning code game design and interactive media thank you again
One query here ... Circles are going out of window and getting cut off randomly on the edges. Can all the random circles be set in the available area only and does not cut off
At first glance this video seems pointless and silly. But for someone like me this is incredible. Thank you for all your amazing content. Please keep it coming! Also, I need a whiteboard! Hah
This could be made a lot more optimal if the radius was determined from the dist() function (i.e. r = Math.min(r, min_r), where min_r is the smallest radius the circle can have for the chosen x and y values). It would actually make it possible to draw a theoretical width * height circles with nearly no collisions at all.
Hey, this is a great video, thank you for posting it. You said that this algorithm was not the most efficient, right? What more efficient methods exist, say for even more circles?
The relevant line is: for (var i = 0; i < circles.length; i++) { Note that in the first iteration, circles.length is 0, and i starts at 0. Zero is not less than zero, so the code is not executed at all.
i have made a code i put "draw" in "function draw()" and mouse poss makse a cirel that fits in if ouside all circels center is the mouseXandY but i want it to fit grow move xy untill it get suck between 3 "other" i made so it calculete the outer border if inside where can i post this code i feel it seaser to show thatn to explain
Haven't watched yet but I would probably create an array of 500 randomly placed circles then run through the array with hit detection between each circle and delete a circle if they overlap. Or maybe create a smaller 50 circle array and keep randomizing a circles size and position if it overlaps something else until it doesn't.
Are you able to write this type of code but with the same concept as the maze generator? That is, a single object moving around the screen looking for places to add the circles? (I know nothing about programming) Perhaps a new challenge?
Just wondering if i wanted to optimize the positioning such that as much randomly sized circle could fit the canvas. Let's say there's a minimum area allowed for each circle. Great vid as always tho :)
instead of switching to a while loop I would have just done i-- when ever I found an overlapping cirlce, exactly the same but I'm lazy and that's less hassle. I have a question: when you are trying to draw the first circle, what are you comparing it with? it can't be against itself because then there would never be any circles since the distance would be too small every time, but it also can't be with any members of the array since the array is still completely blank and undefined at that time. It puzzles me how that works without any need for an exception.
Bismark it doesn't even try to check if first circle is overlapping. J loop didn't run on the first circle, because circles.length is equal to 0 at the moment.
Hehe, saw that "j" mistake and was patiently trying to predict the error type ^^ Cool video Daniel as always. For some reason I find the boolean checks to be really sexy when I see them in someone code but I can't seem to use them so easily on my own. Anyway thanks again for this video :)
Your videos are really fun and interesting. I would like to learn and do some JavaScript as a hobby. So far tutorials I've tried are try and dull. Is starting out supposed to be like that or is there a fun way to learn? Thanks
for (var j = 0; j < circles.length; j++) { var other = circles[j]; var d = dist(circle.x, circle.y, other.x, other.y); if (d < other.r){ // if center is in the other // maby make "circle" move in de direction of the (circle.x, circle.y, other.x, other.y) to make it fitt more overlapping = true; }else{ while (d < circle.r + other.r) { circle.r--; } } }
Hi, I change the code to extend automatically the canvas width if protection is reached. Then you can show all the bubbles. I have also added the condition at the end of this message to ensure all the circles will be shown completely. function setup() { var circles = [], circle = {}, overlapping = false, NumCircles = 30, protection = 100000, counter = 0, canvasWidth = window.innerWidth, canvasHeight = window.innerHeight; widthDefined = window.innerWidth; heightDefined = window.innerHeight;
// populate circles array // brute force method continues until # of circles target is reached // or until the protection value is reached while (circles.length < NumCircles && counter < protection) {
// check that it is not overlapping with any existing circle // another brute force approach for (var i = 0; i < circles.length; i++) { var existing = circles[i]; var d = dist(circle.x, circle.y, existing.x, existing.y) if (d < circle.r + existing.r) { // They are overlapping overlapping = true; // do not add to array break; } }
// add valid circles to array if (!overlapping) { circles.push(circle); }
counter++; } createCanvas(widthDefined, heightDefined); // circles array is complete // draw canvas once background("#233") fill("#2AC1A6"); noStroke(); for (var i = 0; i < circles.length; i++) { ellipse(circles[i].x, circles[i].y, circles[i].r*2, circles[i].r*2); } } And if you want to ensure all the full circles are visible change this line: if (!overlapping && circle.x-circle.r>0 && circle.y-circle.r>0 && circle.x+circle.r
Hi Daniel, This is awesome, I am using this in my iOS app. I wanted to modify this a bit. How would you go about placing Circles (with predefined fixed radius) in a view such that they are closely packed with each other?
Great Work, Thanks. Quick Question: How can you constrain the circles to be fully inside the border (e.g. circles will be fully inside the rectangle). Also, do you have something similar for MATLAB ?
Hi Daniel... I seem to have a issue with downloading p5.js on my computer... it seems to be conflicting with the processing 3.1.do you have a solution???? thanks again.....
Hi David, this video is from quite a long time ago when there was a p5.js desktop editor. We decided to focus on a web editor and this was deprecated. You can find a bit more here: github.com/processing/p5.js-editor
It's very inefficient. For n circles the complexity of your algorithm will be n^2. Soo bad. Dividing area into a grid of width 'maxradius' and storing only info about circles that overlapse each field of this grid would give you compexity of n.
The idea is simple: create an array[width/maxradius][height/maxradius]. For each circle store its position in those cells of array that this circle is overlapping (you can store it as a linked list). When searching for collisions you have to check no more than 9 cells (9 lists). For example: maxradius=10, Width=1000, Height=1000. You will get an array[100][100]. For circle at (252,503), radius=7 you store it's position in cells: [24][49], [25][49], [24][50], [25][50] since it it stretched from (245,496)* to (259,510)* *actually a little bit less, but it doesn't matter.
"Who's watching this still?!"
Me! Don't stop! :D
Seriously, don't ever change, you are incredibly fun to watch, and you really make this fun to learn :)
Thanks for the nice feedback!
what a legend this guy even videos from 8 years ago are still helping people
proud 2024 watcher
Same!
You are amazing at teaching, seriously one of the best on this platform.
He has a lecture, so he is probably not only a good teach on this platform but also in the classroom.
Also he is really good to motivate, I always left his videos wanting to code something myself
6 years later comment still is valid. I’ve found this channel like last week and I’ve been binge watching it like it’s Breaking Bad
Yet another good tutorial.
P.S... please don't abandon Processing
+Robert Coyle never!
Daniel Shiffman Can you please make more videos on Processing...
Daniel, these videos are absolutely amazing and sadly underated. You deserve WAY more views.
I enjoy every one you upload, and thoroughly thank you! Keep it up! :)
This is cool - it teaches the basic and necassary stuff in programming, but with an interesting problem.
So glad to hear!
I thought I've watched every single video on this channel. And yet I'm still finding some that I've missed.
I used this tutorial in a game where I needed to randomly place planets without them overlapping :D
***** I dont worry about optimizing it, becouse it only happens once when you load the game
I learned to think like that the hard way. I've wasted so much time trying to optimize code that isn't a bottleneck.
That is indeed a very important aspect of programming ^^
5 years later and I seeing a star being born! 🤩
even though most time i have no idea what you are doing, i still like to watch your vids, you are sooo relaxing and make it look so easy. just great
I'm glad I found your channel, as an amateur noob coder, this helps me see more ways to solve things, and evolve a much more flexible logic. Thanks!
This one was very interesting tutorial.
By the way, comparing this, with your recent videos, the quality of everything (lighting, video, audio, the way you explain things) got improved to a very high degree. An already great channel getting better everyday.
It is inspiring to see how much you've come and realize how to improve along the way. As a recovering perfectionist, it explains me how it should be done. Thank you.
Dear Daniel. I"m learning processing through your video's and I gotta thank you big time. I will have a test in three weeks about arays, return, if / else, loops etc. with these video's im bound to pass the test. thankyou so much
+Philip Helbach so glad to hear!
Remember doing a similar tutorial back in the 1980s on my 8bit BBC Micro, took a lot longer to run.
I was on an Apple II+ back then!
@@TheCodingTrain did take longer to run back then :)
I played around with this idea in C# a bit. I started with a canvas size of 1280 x 720, a radius of 32 and a maximum of 500 attempts to draw a circle not overlapping another one. After I'd tried that 500 times, I started over, doubling the number of attempts and halving the radius, so radius 16, 1000 attempts. I continue this until I have a radius of 2 and I'm attempting to place 8000 circles. In the end I managed to get around 2500 circles to draw of varying radii, none of which overlap any other circles. Takes about 1.3 seconds to calculate and draw. The way I implemented it is not very optimized though. It only uses around 6mb of RAM, but nearly 50% of my CPU. For the last attempt of the radius 2 circles, it's done a total of 15449 distance calculations (I don't bother checking the first one of radius 32).
I just coded this with you step by step and learned a ton about brackets and how to read java script. You are awesome. Thanks.
I thought it was funny how you didn't show yourself correcting the accidental "i" in --> for( var j = 0; j < circles.length; *i*++) ;)
I can't thank you enough, Daniel! I was looking for a solution for this exact problem for over a week and found this today, I love you!!
Wouldn't it be better to start with a certain radius. Place as many circles as possible, and when you cant place any anymore decrease the radius by 1, and repeat the process, until the radius is 0, then stop the loop. That would give you as much circles with the biggest size as possibly fit on the screen,right?
YourNightmar3 this is still a brute force approach. After how many iterations are you determining you can't fit anymore circles on the screen? It may just be that there is a spot to fill with that radius length, but the computer hasn't found it yet. Although an interesting proposal, I think random radius lengths from the get-go would still be faster
Daniel Alarcon it'll be faster but it definitely will not fill every spot on the screen.
Ah, well if that's your goal then you have a brilliant proposal. It would be cool if you updated Daniel Schiffman's code with your idea!
Yep, that would slightly optimize the program.
Daniel Alarcon Haha i can't code javascript :D
what if i wanted specifically sized circles to randomly be arranged and not touch?
Just set r to the specific circle size you want, instead of random. He does that all the way through the video with r: 32 until 18:03 where he changes the radius from specific size to random size.
This video made me think. I'd forget the array, unless you want the circles to interact later in the program. Otherwise, I immediately thought of a different way to do it by picking a point of test coordinates and checking if it touches a circle's color. If it doesn't touch a circle's color, check the perimeter of a circle with radius n at the test coordinates (where n = 1 to the maximum circle size). A routine could select points around an imaginary circle and test each point for a circle's color (kind of like looking around a point in a spiral to see if there is any circles nearby). If it doesn't touch a circle, the imaginary circle grows until it reaches the maximum size or hits a circle's color, at which point, a circle with radius n-1 would be drawn and the program repeats. This continues until the circles get smaller and smaller, filling in all the space. If you want to array the successful circles, this method would still allow for that. If I could program in p5.js, I'd give it a try, but I'm really, really old school. I still program in BASIC. I'm trying to learn from your videos, but I appreciate the logic structure more than the actual code.
"Is anyone even watching this?"
73,380 views...
I used the idea and made a water droplet filter. Thanks for the inspiration
oh, would love to see!
I'm getting more excited when we are approaching CS algorithm lessons, by peeking at 9.9 Minimum Spanning Tree (Prim's Algorithm).
The logic is greater than the result for us
man I was stuck on this problem and was frustrated. Thank you very much for this video. It saved me
Did you ever do that force-directed graph video? I needed to do something along those lines for a project at work. I'm brand new to JS and have never touched P5 but I've been watching your videos for years just for the algorithmic interest (I've been programmin in C/C++/C# for decades). Any way, when I had to tackle this I thought I'd come back and see if you have anything I could draw from but I couldn't find a video on self organising graphs (maybe I'd have more success now that I know the correct term - "force-directed graphs").
Anyway, here's what I was able to slap together. I'm super impressed with how easy it was to write my first P5.js code. This is literally the first sketch that I've written in P5. But thanks to all your videos it made getting into it a walk in the park. You may even recognise some terminology that was taken straight from your tutorials, like "Bubbles". Sorry, I coudn't find an intuitive place to bring in Unicorns or Kittens ;-)
editor.p5js.org/deefstes/sketches/MYMhdhD5C
Here's one simple next optimization step: instead of checking if the circles overlap, make that loop calculate distance to the closest circle, let's call it "minDist". Let's also replace the magic numbers 6 and 36 with the variables "minRadius" and "maxRadius". Then add:
if (minDist > minRadius) { circle.r = random(minRadius, min(minDistance - gap, maxRadius)); } // where "gap" is a variable for the number of pixels you want between circles
Using this approach, the small gaps in the image will get filled much quicker (also, compared to before the distribution of circle sizes will be skewed to smaller circles, but that's not really important).
edit: clarity
+Job van der Zwan thanks for this great suggestion!
An alternative without random run time would be when using squares.
You would split the canvas into an grid in an array and then just shuffle the array once.
And then you would just go through the array.
Hey Daniel, just a suggestion. I came to this video of yours after watching a couple of your latest videos and I could see this one has a far better sense of explanation. You even assumed that viewer might not know what a radius. I think if you can inculcate and carry on same style in your future videos it will be very helpful, especially to someone who is just starting to learn how to think a puzzle in a programmer's perspective
To protect your loop, you could have summerize pushed circle areas and compare it to the actual area of the canvas.
could you please give the proper link to this source code??
@the coding train Can you do one with rectangles? Whole different ball park!
I came here to try and find this formula.
Could you instead write:
if (overlapping == true ){
i--;
}
so it would try again until you actually get your amount of circles?
Because that second loop is outside the first loop, decreasing i does nothing. If you nest all of those loops inside of each other (probably a bad idea unless you use functions to make the code easier on the eyes), then yes, appending that to the end of your loop would work.
"overlapping == true" doesn't really make any sense. You might as well just write "overlapping".
it makes sense, but, yeah, just `if(overlapping)` works too and it a little better
yes, I did the same and it works ;)
The entire time I was like you need to i--. Then he did the while loop and I was like....Well then, that's the same result.
I just started your video with a speed of 1.25 because I needed it before and was very surprised why you are so in hurry. :D
I'm trying to modify this code so that it produces circles only if they are bordering another circle, but I can't seem to get it right. It either produces circles overlapping or exclusively not overlapping.
You should do a video about Reciprocal Velocity Obstacles, that would be awesome. I tried to read one of the papers on the subject but I have a hard time turning it into code.
Could you have the circles set to decrease size when they run out of available space? Like when they run out of space to fit the largest circles, the size decreases to accommodate the next smallest ones, etc... with the radius continually shrinking until you reach the smallest radius that you want
Hi Daniel, I already used this method to generate non-overlapping circles for my project. Thanks for this awesome video though. It would be really helpful for others. I have a question. Its not efficient way of doing it. What is the optimized approach to solve this problem? Thanks.
Look for more fancier solutions here: en.wikipedia.org/wiki/Circle_packing I will do some videos on this sometime.
this was useful for a whole other problem I'm working on, random placement of random triangular terrain tiles and subdivision into polygons made of triangles. I can splat some triangles into a rectangular map and build triangles between the side and two corners of one triangle and a corner of a nearby triangle. I need to make sure my initial triangles don't overlap and any new triangles I build off the sides of a terrain tile connect to a corner of a nearby triangle rather than overlap...
I really hope that makes sense.
Daniel, nice! I enjoy tutorial videos that show one way to tackle an algorithm 👍
+endofmysteries thanks! glad to hear it!
Any idea on how to calculate the distance between the two circles using the Pythagorean theorem? I'm using plain JS which doesn't have the distance function.
"Who's still watching this??" me):
and me :p
Jarmahent me too!
I am also on the "me-train"
and me
Was a fine video. Well, could you have done this similar type of algorithm for random shapes (random polygons) instead of circles? In that case, what would be the limiting criteria for not overlapping of shapes?
Thank you for your content just got your book the nature of code and I'm reading through it and I love it I'm a high school student with a passion for coding and I find your book and all your videos very very help full keep up the great work
+Nathan Campbell so nice to get your lovely message, thank you!!
+Daniel Shiffman I just want to ask you one last thing is it possible to maybe get an email address to contact you by to ask questions and I would love to learn more about ITP NYU first hand I know your a busy person but if you can help me out I would greatly appreciate it, like I said above I am a junior at high school so I am looking for great colleges to continue learning code game design and interactive media thank you again
+Nathan Campbell there's an e-mail contact here shiffman.net/about.html for more about itp: tisch.nyu.edu/itp/admissions/open-houses
Daniel Shiffman Awesome thank you so much.
Nathan Campbell yeah THE nature of code helps me building My game! Cheers
would love to Learn more efficient ways of doing this. hope you do a follow up with one way
+eye beholderz yes I would like to!
What an incredible tutorial. Thanks a lot, Dan!
One query here ... Circles are going out of window and getting cut off randomly on the edges. Can all the random circles be set in the available area only and does not cut off
don't forget to put on your protection 17:00
sex ed at its finest
At first glance this video seems pointless and silly. But for someone like me this is incredible. Thank you for all your amazing content. Please keep it coming! Also, I need a whiteboard! Hah
thanks for the nice words!
What if we add similar size images in place of circles?
I cant access the code links. Does anyone have the refreshed one or the code themselves?
What kind of weird ass IDE hangs when the application doesn't terminate?
This could be made a lot more optimal if the radius was determined from the dist() function (i.e. r = Math.min(r, min_r), where min_r is the smallest radius the circle can have for the chosen x and y values). It would actually make it possible to draw a theoretical width * height circles with nearly no collisions at all.
great tips, thank you!
Does anyone know a good video that demonstrates a force directed layout
Hey, this is a great video, thank you for posting it. You said that this algorithm was not the most efficient, right? What more efficient methods exist, say for even more circles?
wow. i love this!
i don't understand it all, but that's ok.
Why the "distance" loop does not fail when checking for first time as there is no circle in circles?
The relevant line is:
for (var i = 0; i < circles.length; i++) {
Note that in the first iteration, circles.length is 0, and i starts at 0. Zero is not less than zero, so the code is not executed at all.
i have made a code i put "draw" in "function draw()" and mouse poss makse a cirel that fits in if ouside all circels center is the mouseXandY
but i want it to fit grow move xy untill it get suck between 3 "other" i made so it calculete the outer border if inside where can i post this code
i feel it seaser to show thatn to explain
I absolutely love your stuff. Thanks for sharing. I hope you see this.
Haven't watched yet but I would probably create an array of 500 randomly placed circles then run through the array with hit detection between each circle and delete a circle if they overlap. Or maybe create a smaller 50 circle array and keep randomizing a circles size and position if it overlaps something else until it doesn't.
Are you able to write this type of code but with the same concept as the maze generator? That is, a single object moving around the screen looking for places to add the circles? (I know nothing about programming) Perhaps a new challenge?
how to create this on processing in as easy and basic manner . the one on you put for processing in GitHub is very complex for me to understand.
I love your videos man! I made it thought the holidays watching them! :P
You are amazing. Everytime when I watch your videos, I learning a lot. and you really make this fun to learn :) Thank you.
Is it possible to solve this problem in O(n) instead of 0(n^2)?
This is off topic and kind of random, but I really like the color choices for your UI. Is it custom or can I download it somewhere?
Why do you use `var` variables rather than block-local `let` variables in your `for` loops?
no es6 for this poor dev yet :'(
I'm not event sure I understood, but you rock!!
Just wondering if i wanted to optimize the positioning such that as much randomly sized circle could fit the canvas.
Let's say there's a minimum area allowed for each circle.
Great vid as always tho :)
how can i do to have a random variable which can only take the value of 1; 2 or 3 ?
I think in JS is: Math.floor(Math.random() * 3) + 1 will give you integer number(1, 2 or 3). Please let me know.
yep it's works !! thank you so much
instead of switching to a while loop I would have just done i-- when ever I found an overlapping cirlce, exactly the same but I'm lazy and that's less hassle. I have a question: when you are trying to draw the first circle, what are you comparing it with? it can't be against itself because then there would never be any circles since the distance would be too small every time, but it also can't be with any members of the array since the array is still completely blank and undefined at that time. It puzzles me how that works without any need for an exception.
Bismark it doesn't even try to check if first circle is overlapping. J loop didn't run on the first circle, because circles.length is equal to 0 at the moment.
ohh, got it, thanks!
great show man!
watching from poland
Hehe, saw that "j" mistake and was patiently trying to predict the error type ^^ Cool video Daniel as always. For some reason I find the boolean checks to be really sexy when I see them in someone code but I can't seem to use them so easily on my own. Anyway thanks again for this video :)
+Furrane hah, the original live stream has an extra 20 minutes of me trying to find the error!
I am blind or is this video's source code missing on github?
you are not blind! I need to re-organize anad make things easier to find github.com/CodingTrain/website/tree/master/Tutorials/P5JS/p5.js/09
Your videos are really fun and interesting.
I would like to learn and do some JavaScript as a hobby.
So far tutorials I've tried are try and dull.
Is starting out supposed to be like that or is there a fun way to learn?
Thanks
for (var j = 0; j < circles.length; j++) {
var other = circles[j];
var d = dist(circle.x, circle.y, other.x, other.y);
if (d < other.r){ // if center is in the other // maby make "circle" move in de direction of the (circle.x, circle.y, other.x, other.y) to make it fitt more
overlapping = true;
}else{
while (d < circle.r + other.r) {
circle.r--;
}
}
}
This was great!!! This helps with a generative art project I'm working on. You're an excellent teacher 🙌🏽
Hi, I change the code to extend automatically the canvas width if protection is reached. Then you can show all the bubbles. I have also added the condition at the end of this message to ensure all the circles will be shown completely.
function setup() {
var circles = [],
circle = {},
overlapping = false,
NumCircles = 30,
protection = 100000,
counter = 0,
canvasWidth = window.innerWidth,
canvasHeight = window.innerHeight;
widthDefined = window.innerWidth;
heightDefined = window.innerHeight;
// populate circles array
// brute force method continues until # of circles target is reached
// or until the protection value is reached
while (circles.length < NumCircles &&
counter < protection) {
if(counter==protection-1)
{
counter = 0;
widthDefined = widthDefined + 100;
}
circle = {
x: random(widthDefined),
y: random(heightDefined),
r: random(50, 100)
};
overlapping = false;
// check that it is not overlapping with any existing circle
// another brute force approach
for (var i = 0; i < circles.length; i++) {
var existing = circles[i];
var d = dist(circle.x, circle.y, existing.x, existing.y)
if (d < circle.r + existing.r) {
// They are overlapping
overlapping = true;
// do not add to array
break;
}
}
// add valid circles to array
if (!overlapping) {
circles.push(circle);
}
counter++;
}
createCanvas(widthDefined, heightDefined);
// circles array is complete
// draw canvas once
background("#233")
fill("#2AC1A6");
noStroke();
for (var i = 0; i < circles.length; i++) {
ellipse(circles[i].x, circles[i].y,
circles[i].r*2, circles[i].r*2);
}
}
And if you want to ensure all the full circles are visible change this line:
if (!overlapping && circle.x-circle.r>0 && circle.y-circle.r>0 && circle.x+circle.r
Hi Daniel, This is awesome, I am using this in my iOS app. I wanted to modify this a bit. How would you go about placing Circles (with predefined fixed radius) in a view such that they are closely packed with each other?
I did try using a Gaussian distribution so placing the circles around the center has a higher probability, but not getting the expected result.
Great Work, Thanks.
Quick Question: How can you constrain the circles to be fully inside the border (e.g. circles will be fully inside the rectangle). Also, do you have something similar for MATLAB ?
a) x + r >= 0 && y + r >= 0 && x+r
I dont even know the problem
i tried running the same program
and maybe I am missing something.
but it is just a blank screen :(
Hi Daniel... I seem to have a issue with downloading p5.js on my computer... it seems to be conflicting with the processing 3.1.do you have a solution???? thanks again.....
Weird, did you try asking at forum.processing.org?
the name of text editor please.
How can you replicate this code using only javascript and not p5?
I do watch your videos sir.
I'm a new subscriber btw and I really enjoy your videos!
Keep it up! ;)
+3mroos4 thank you!!
+Daniel Shiffman Were you transmit live videos?, I'll like to see your lives..
Sir Would Java be of no use because of PYTHON web dev , data science, ML, AI and KOTLIN, DART flutter in ANDROID side
If not so please explain.
Thankyou for the video. Can you please do a tutorial on packing random shapes (polygons for example) without them overlapping please? Cheers
Can you write this code as unity project
What does no stroke do?
by default p5 seems to put a border around its shapes like rectangles, lines and circles/elipses. The border is called stroke.
What's the meaning of 'circles.push(circle)'?
It adds the variable circle to the circles array
Fab - many thanks for sharing!
what program are you using, it looks like the p5 web editor but it isn't the same?
Hi David, this video is from quite a long time ago when there was a p5.js desktop editor. We decided to focus on a web editor and this was deprecated. You can find a bit more here: github.com/processing/p5.js-editor
This Kind of video for P5.js and it works
It's very inefficient. For n circles the complexity of your algorithm will be n^2. Soo bad. Dividing area into a grid of width 'maxradius' and storing only info about circles that overlapse each field of this grid would give you compexity of n.
The idea is simple: create an array[width/maxradius][height/maxradius]. For each circle store its position in those cells of array that this circle is overlapping (you can store it as a linked list). When searching for collisions you have to check no more than 9 cells (9 lists). For example: maxradius=10, Width=1000, Height=1000. You will get an array[100][100]. For circle at (252,503), radius=7 you store it's position in cells: [24][49], [25][49], [24][50], [25][50] since it it stretched from (245,496)* to (259,510)*
*actually a little bit less, but it doesn't matter.
you're an awesome teacher
or if circles are overlapping you can just write "i--;" !
write it where?
In the first if of the second for loop if i remember correctly , it was 2 years ago ^^
@@alvan5416 oh didnt realise lol ty for the reply
Why not changing circle radius? You already iterate through all the circles, so if you find overlapping, just change the radius so it won't :)
Bibibiboobooboob! Stunning!