Video nenà dostupné.
OmlouvĂĄme se.
Coding Challenge #28: Metaballs
VloĆŸit
- Äas pĆidĂĄn 5. 08. 2024
- Let's code some Metaballs (aka Isosurfaces) in Processing and how to control them using the Blob Detection methodology from my computer vision tutorial! Code: thecodingtrain.com/challenges...
đčïž p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
đ„ Previous video: âą Coding Challenge #27: ...
đ„ Next video: âą Coding Challenge #29: ...
đ„ All videos: âą Coding Challenges
References:
đ° Exploring Meta-balls and Isosurfaces in 2D: www.gamedev.net/articles/prog...
Videos:
đŽ Livestream Archive: âą Live Stream #50: Loadi...
Related Coding Challenges:
đ #C4 - Coding in the Cabana Worley Noise: âą Coding Worley Noise
đ #C5 - Coding in the Cabana Marching Squares: âą Coding Marching Squares
Timestamps:
00:00 Introduction
00:46 What is an Isosurface?
01:33 Code! Working with Pixels
02:35 Make a simple Isosurface
02:58 How to make Metaballs?
04:36 Code! Create a Blob class
07:43 Make the Blob move around
09:03 Create an Array of Blobs
10:37 Color pixels using all the Blobs
12:19 Add more Blobs
13:07 Make the Blobs Rainbow colored
14:14 Example of Blob Tracking
15:12 Combine Blob Tracking with Metaballs
19:32 Making some adjustments
21:07 Other ways to Move these Metaballs
21:51 Fixing a Bug
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: czcams.com/users/thecodingtrainjoin
đ 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...
#computervision #blobdetection #loadpixels #pixelanalysis #objecttracking #metaballs #isosurfaces #processing
"Those are some really beautiful meatballs" ~ Daniel Shiffman, 2016
it's pretty clear that he didnt mean to say meth balls
American Engineering Meth balls?
@@americanengineering2063 breaking bad reference??
i clicked on this because i thought it was meatballs, very disappointed
this guy blows my mind with his genius
Thank you so much for your years of hard work, boundless enthusiasm, and clarity of thought and language. These videos are an absolute treasure; they are so much fun to watch and they're such an inspiration to get excited about math and coding.
Message from Mr Rogers, "you're the nicest guy in the neighborhood". Thanks so much for these great tutorials.
I love these coding challenges. Great work Daniel
These videos are so incredible! It's great having visual feedback for so many of the challenges. Would you ever consider doing something audio or synthesis based? Maybe even using Pure Data?
This is so cool. I'm new to Processing and this was a really fun program to play around with.
Another great tutorial Daniel. I love the coding side of the videos but I also feel that this is a fantastic way to teach some of the tougher concepts in mathematics. I know the maths in this was fairly straightforward but in other videos, you've covered some quite complex topics. In this visual, high energy format though, it's so easy to follow.
Always lots of fun and great noises by the way...notably at 3:30 which is now my computer's error sound ;)
Oh man, I love all the Coding Train videos I've watched lately, but this one speaks to me :D
I remember coding metaball "screensavers" many years ago in QBASIC, and I remember the incredibly old and slow laptop I first tried in on. It had a 16 grey level LCD screen, and rendered a frame every few minutes or so :P Several months later and I had a faster colour laptop that could run it properly. Still slow, but fast enough to appreciate it.
This video brings it all back!
hah, thanks for the nice feedback!
I gave my metaballs gravity, and now it's kinda like a lavalamp, except there is no convection from up to down.
I think you should make them more like meatballs, with melted cheese stretching between the balls as they move around the screen.
Shockszzbyyous maybe do something like
for(var a = 0 ; a = 20 ; a++) {
metaball.y = height*(cos(Pi/a)/1.2);
if (a == 19) {
a = 0;
}
}
Something like that might make the metaball float up and down repeatedly.
Well you can add actual convection. If a metaball is close to the bottom, increase it's energy / heat over time. The higher the temperature, the more upwards force you apply. If the metaball is closer to the top you let it loose energy / heat. So "cold" objects drop slowly to the bottom, hot objects will rise to the top. Blobs might have a slight repulsive force when they are really close to get a bit more side way motion
meat planets
@@Bunny99s Thats a great excercise, thanks! :D
The real question is: are PVectors stored in the MetaBalls?
Great tutorial as always!!
I get the reference, but in this case MetaBalls are stored in the PVectors đ«Ą
Infectious enthusiasm! pumped to go write a heat map visualisation from this
You are amazing !!! :D, I love these videos , this how teachers should teach to program
17:20 - you have a funny way of finding the average.
Actually doing it that way ensures that you don't overflow the data type. If you do it like (a + b)/2 then there's a possibility that (a+b) might overflow the data type. But doing it the way he does it will never overflow, as he is adding half of the difference.
One of the best CZcams channels!
Mettballs actually means meatball in german :D
0:02
TheHawrk He ACTUALLY said Meatballs. In a different language, but he STILL SAID IT.
Bazinga
wow.
I watched only 1 video of this guy and when I saw this video I already knew he will say meatball as soon as video starts. and thats it he said :D
Loving your videos! Glad i came across your channel.
i'm so glad to hear!
dude you make code such a fun, i wish if my programmation professor was like you ! thanks for the good videos and keep coding !
Thanks for watching!
What's your favourite color?
Me: 13:58
Daniel!! When are you going to show us the 3D Metaballs??
Best chanel ever
Amazing video Daniel! You could also normalize the sum of the balls contribution by dividing by the total number of them, instead correcting the constant manually
I so love these videos.
thank you!
Hi +Daniel , thanks for the tutorial! :)
I was wondering if the distance between the blob and the pixel iterator is 0 at some point and it leads to a division by 0 error.
It does not happen here or in my code but is this something we need to take care of in the code?
better to times the color with 255, because radius / distance will give perfect 1 on the radius of the circle
These simple algorithms are so powerful it's insane. Can't wait to make some games with these noises
this is amaaaazing I really like ur videos thanks a lot
thanks for watching!
Super and greats video that is helping me a lot in understanding the concepts.
Cheers,
Thanks so much!
thanks for this video. I like your energi
Thanks for watching!
I know this is a long shot since this is a very old tutorial but is it possible to apply this effect to a 3D sphere primitive or an empty gameobject and have the metaballs follow these gameobjects?
That's a spicy meta ball!
Awesome
In The sum variable you should divide by blobs.length. That way you donât need to adjust the scaling factor when you change the number of blobs
random2D does not work for my version of processing. any suggestions on ways I can make it move
Pretty funny video.
One thing I would like to try sometime is to merge the metaballs with the original frames from the camera instead of just replacing the pixels. Probably the pixel[index] should be set to some average value in HSV space.
The one question I still have is how p5 handles all those divisions by zero that you pick up (whenever the distance is zero, that is).
Really Cool!
thanks!
Thanks for your video. When I tried to run this on Android Device, it became too slow(1 frame / 2 sec). but it runs very well on PC or laptop.. Do you know why?
*that* is one *spicy* metaball!
This video reminds me of the development of television. Started black and white and eventually got color!
Is that normal that the same code in p5.js is really less performing (I suppose yes) ? How is it possible to make the p5 version as performing as the processing version ?
It's completely normal. It simply isn't possible. The p5.js is written in javascript, which is run as interpreted code in the browser. The processing code is abstracted java code, and as such is compiled into java bytecode. To put it simply, the processing code is run closer to bare metal, with less overhead, so it's overall more performant. If Processing.org released a c++ version of their library it would most likely be even more performant. Another factor is that in the processing version you can change to the P2D or P3D renderer, which offloads some stuff onto the GPU. I'm not sure if you can do that with the p5js version.
"This video is about coding metaballs! But first let me explain how pixels work in case anybody starting watching a coding challenge video without understanding what pixels are."
background(51); just gives me a grey screen and nothing shows until I comment that line out - what am I doing wrong?
i tried to multiply the color with the dot product of the velocity of the blob and the difference beetwen (x, y) and the blob's position and the results were REALY COOL
omg making variants of this i made my own abstract art o_o
Nice video, very helpful. I made metaballs visualization in JavaScript and while it does look nice, it runs very slow if you increase drawing area and number of blobs. I think that it slows down because it has to loop through every pixel and perform calculations per every pixel. Do you have any tips on how to optimize this so that it runs smooth on full screen with relatively high number of metaballs?
I second this
Awesome videos and I love your enthusiasm! I was wondering how the sum works for the melting effect and why you don't divide by zero when the distance becomes zero when the pixel is at the origin of the blob. Hope to hear from you or anyone in the comments.
+Flextreme Production
beep
Did you heared something???
Did you finally release a p5 version of this?
Hello Where can I download a video to your program source code, talking about great
I love all of these tutorials and videos, I am learning so much - they are the best!!! I am trying to understand and wrap my head around how the sum of the blob radius / distance creates the gooey blob effect between each metaball. I took a look but didn't find anything specific on it, but was wondering if there is anywhere you can direct me that can explain the math behind it in further detail? Thanks!
Look at around 11:10, he talks about it just before he adds more then one ball to the scene. Sorry that i can't give you a more specific time, i'm in a hurry.
It's a combination of: 1 / distance has a "curved" effect, and our eyes tend to perceive borders between colours even though in reality they're in a spectrum.
What if you divided the sum of the distances by the length of the blob list ?
It might look interestingt, doesn't it? I wanna try it by myself đ
Thanks for the amazing vid đ
Why i can't use b as the index of the blob? why is index[0]? i want to draw them with the mouse...
That's a spicy metabaaallll
Metaballs metaballs, spaghetti underneath. Ravioli ravioli, great barrier reef!
The otherworldly Italian creatures you ordered have been summoned
Beware... Bad english incoming... :-D
_Finally_ I understood, how this works. In the end it's not that complicated, than I thought. I'm working right now on a C++ version of it, using SFML. And... Yay, it works!
Could you imagine, to do a 3D Version of it as a coding challenge? I'm pretty sure, it shouldn't be hard to port it to some kind of voxels. But how triangulate the meshes? :-/. Maybe there's a complete different way....
What I was going to say...
I appreciate the way, how you share your knowledge with us and how you explain really everything in your slightly clumsy style (in a good way) .Had to laugh several times and learned so much from your videos. So... Thank you!
Metaballs? Meatballs? Mothballs? Methballs?
You're my favourite. :)
now you have to code real meatballs. on another note, is there a place like the IRC or discord where you can help me? I have some questions about a program in p5js
+Daniel Shiffman OK I will
In p5js, this is VERY laggy, possibly because one must loop over each pixel rather than a pixel group... anybody have any solutions or help?
I don't know if is possible to solve this problem because of the nature of JavaScript. I hope I'm not talking any sh**, but is a higher lvl language than Java, and so, Java is faster.
It would be like 4852745284x faster if it was done as a shader (executed by GPU)
Hi all! Does anyone know how I could load this animation created in Processing as an animated Desktop background?
Andrei Popa no
Andrei Popa, Windows used to allow HTML files to be background pictures, so you could remake it in JavaScript maybe?
3:16 - wow! It's my avatar!
Swear I saw a fidget spinner in the thumbnail...
đ
hello! how do I change the color of the distance. I mean how do I make the blobs darker?
Actually how do I pick specific colors but not anything RGB
How come when I download this it's super slow?
i read the title as MEATBALLS, i thought he was going to simulate meatballs.lol
Thushara Fernando Well he might do it if he gets to computer gastronomy if that exists... Kappa
In HTML pure javascript canvas I get colors in the middle of my blobs, like you did when you made sum % 255. How can I remove those colors from the blobs?
+SĂĄndor TakĂĄcs cap the sum value at 255 using an if statement or constrain() if you are using p5.
Thanks, it worked. I don't use p5.js, but I wrote my constrain function.
Hey Daniel, love your channel.
I wonder if there's a way to do this without having to deal with pixels.
I'm doing this with HTML5 canvas and it's terribly slow (even after getting rid of sqrt's)
Yeah animating the canvas in JavaScript while changing the pixel data is always really slow. I'd be interested in seeing if there is a speedier solution though.
i would like to eventually cover how to do this with shaders and/or geometry/vector shapes.
hopefully that would be coming anytime soon!
i think youd want to use imageData instead of ctx.drawRectangle
Wow great job with those challenges. But just one question: Why always 51 for backgrounds!!!! i need a reason, curiosity it's killing me : )
someone recommended it to him in the first or second vid of the coding challenge
I love these videos, but I'm finding it increasingly frustrating how you can Never draw the bottom line of a rectangle without sloping upwards!!!!!
GLSL videos would be awesome!
Someday I hope!
If you had called the metaballs 'thisdots', that would truly have been meta
Sir,
Can you please make a tutorial on 2d water surface simulation based on Hugo Elias algorithm in a layman language. Thanks for your quality lessons.
I tried to do this...
had 1 fps on my gaming pc, but I drew each point one at a time tho
'I want to make a blob object'
I think you mean blobject
That's a one a spicy metaball
How about combining this with a Particle Flowfield ?
Great idea!
Very cool tutorial! We made a drinking game. Everytime you grab your nose, we have to dring. now iam drunck
Totally thought you were coding Meatballs.
+Smokestorm almost!
import GrandmasRecipes.js
@@earthbjornnahkaimurrao9542 lmfao
After Binge Watching your Channel I am suddenly filled with DETERMINATION to learn JavaScript
Arthur Jakubiec Java* not javascript
java and javascript work in similar ways, for me I find javascript easyer ro learn before going to full on Java
Sand under the tail
could you please make some polygon collision detection videos like the one in unity3d and how you make the polygon around the image (detect image edges) :D
thanks in advance even if you won't do them :V
interesting idea! suggest here: github.com/CodingRainbow/Rainbow-Topics/issues
where can I suggest a coding challenge?
github.com/CodingRainbow/Rainbow-Topics/issues
Daniel Shiffman thanks
I laughed so hard at 11:00
I luv meatballs
amazing speaking rainbow
Why is it, that you are not dividing by zero when displaying a pixel, which happens to be in the center of a blob?
He is, it just returns 'Infinity' as the value, which is just the same as 255 as that is the maximum limit of color.
Today Mr. Spaghetti shows us how he codes his meatballs.
ups, sorry wrong channel
Thats pretty meta.
Is this ES6 or Java?
It's Java (using processing.org), but I plan to publish a JS port of this code.
I think I love you
you should make it so the meatballs bounce off each other
This made me just convert from python mode to java mode lol, python modes for loops are super super slow and while its a little trickier to relearn java after using python mode for so long its totally worth the effort for the speed of the for loops in java mode :D
relearning java class objects will be tricky lol, python is so much easier to understand but once again, it will be worth it simply because of the speed of java
_why would you use python mode!!_
@@SpringySpring04 because i was using python for years and it was easier
@@mickyr171 I don't understand python even though it's so similar to Ruby which I understand a lot, and I also don't like python's syntax tbh
@@SpringySpring04 it was great but for loops are slow in it lol, processing is fantastic but also use c# in unity because it's even faster, recently created a vector flow field that can render 100K particles in processing at 60 fps using a different method to display, best I could do with using point() was about 12k at 60fps
minx + (maxx - minx) * .5 ?
why didn't you use (minx + maxx) * .5
Ravioli Ravioli, quickly code the metaballioli
One day, I MET A BALL
Center of rectangle is ((maxx+minx)/2,(maxy+miny)/2)
(maxx + minx)/2 = minx + (maxx - minx) / 2
@@he2he (max+min)/2 - two operations, your variant - 3
@@rotten-Z I just wanted to point out that the video wasn't wrong.
@@he2he I didnât say he was wrong. I just hinted that his formulas are not entirely optimal
Afraid of saying meatballs, but methballs is fine for him...
spaghetti and metaballs
Blob object? You mean Blobject? :P
Processing? I want to use in Javascript. How can I do?
Metal Balls