Video nenà dostupné.
Omlouváme se.
9.8: Random Circles with No Overlap - p5.js Tutorial
VloĹľit
- čas přidán 14. 03. 2016
- This video demonstrates a "circle packing"-like algorithm. Circles are placed randomly in the canvas, but only if they are not overlapping with any previous circles. This is referred to as "uniform random sampling." The p5.js dist() function is demonstrated.
Source-code: github.com/CodingTrain/Rainbo...
Contact: / shiffman
All JavaScript/p5.js videos: czcams.com/users/shiffman...
Help us caption & translate this video!
amara.org/v/Qbt2/
đź“„ Code of Conduct: github.com/CodingTrain/Code-o...
"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!
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
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 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.
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 is cool - it teaches the basic and necassary stuff in programming, but with an interesting problem.
So glad to hear!
Yet another good tutorial.
P.S... please don't abandon Processing
+Robert Coyle never!
Daniel Shiffman Can you please make more videos on Processing...
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
what a legend this guy even videos from 8 years ago are still helping people
proud 2024 watcher
Same!
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!!
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 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 ^^
I thought I've watched every single video on this channel. And yet I'm still finding some that I've missed.
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!
This was great!!! This helps with a generative art project I'm working on. You're an excellent teacher 🙌🏽
Daniel, nice! I enjoy tutorial videos that show one way to tackle an algorithm đź‘Ť
+endofmysteries thanks! glad to hear it!
You are amazing. Everytime when I watch your videos, I learning a lot. and you really make this fun to learn :) Thank you.
What an incredible tutorial. Thanks a lot, Dan!
5 years later and I seeing a star being born! 🤩
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 love your videos man! I made it thought the holidays watching them! :P
I absolutely love your stuff. Thanks for sharing. I hope you see this.
man I was stuck on this problem and was frustrated. Thank you very much for this video. It saved me
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
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
great show man!
watching from poland
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?
I do watch your videos sir.
I'm a new subscriber btw and I really enjoy your videos!
Keep it up! ;)
+3mroos4 thank you!!
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.
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
I used the idea and made a water droplet filter. Thanks for the inspiration
oh, would love to see!
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 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
How do I draw random circles that when collide with each other and walls of canvas move in opposite directions and burst when clicked by a mouse
Fab - many thanks for sharing!
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
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?
Is it possible to solve this problem in O(n) instead of 0(n^2)?
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
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.
I'm getting more excited when we are approaching CS algorithm lessons, by peeking at 9.9 Minimum Spanning Tree (Prim's Algorithm).
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.
What if we add similar size images in place of circles?
I'm not event sure I understood, but you rock!!
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
you're an awesome teacher
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!
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.
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 :)
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
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
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.
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?
Thank you very much, that inspired me
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.
Thanks, this really helped!
Does anyone know a good video that demonstrates a force directed layout
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!
The logic is greater than the result for us
Keep more coming =)
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
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.
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
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.
I cant access the code links. Does anyone have the refreshed one or the code themselves?
"Is anyone even watching this?"
73,380 views...
good work bro
could you please give the proper link to this source code??
Cool channel man just found it
This Kind of video for P5.js and it works
Bibibiboobooboob! Stunning!
Thankyou for the video. Can you please do a tutorial on packing random shapes (polygons for example) without them overlapping please? Cheers
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?
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.
tks teach so much. love u
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 :)
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.
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!
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.
the name of text editor please.
wow. i love this!
i don't understand it all, but that's ok.
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?
awesome vĂdeos.
How can you replicate this code using only javascript and not p5?
Thanks Alot!
@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.
Why do you use `var` variables rather than block-local `let` variables in your `for` loops?
no es6 for this poor dev yet :'(
What kind of weird ass IDE hangs when the application doesn't terminate?
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!
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.
Thank youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu!!!
:)
To protect your loop, you could have summerize pushed circle areas and compare it to the actual area of the canvas.
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!
"Who's still watching this??" me):
and me :p
Jarmahent me too!
I am also on the "me-train"
and me
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
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
What's the meaning of 'circles.push(circle)'?
It adds the variable circle to the circles array
Can you write this code as unity project
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 :(