Coding Challenge #28: Metaballs

Подписаться 1,7 млн

Просмотров 169 тыс.

50% 1

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: ru-vid.comjoin
🛒 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

Опубликовано:

30 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 221

@kuskus_th13 7 лет назад

"Those are some really beautiful meatballs" ~ Daniel Shiffman, 2016

@americanengineering2063 5 лет назад

it's pretty clear that he didnt mean to say meth balls

@NStripleseven 3 года назад

American Engineering Meth balls?

@dumbidiot1119 Год назад

@@americanengineering2063 breaking bad reference??

@Smomid 4 года назад

this guy blows my mind with his genius

@gloverelaxis 5 лет назад

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.

@bencebalaton 5 лет назад

The real question is: are PVectors stored in the MetaBalls? Great tutorial as always!!

@error.418 Год назад

I get the reference, but in this case MetaBalls are stored in the PVectors 🫡

@joesharp3580 6 лет назад

I love these coding challenges. Great work Daniel

@dannorris1406 6 лет назад

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 ;)

@johnvonhorn2942 5 лет назад

Message from Mr Rogers, "you're the nicest guy in the neighborhood". Thanks so much for these great tutorials.

@nctrn07 6 лет назад

i clicked on this because i thought it was meatballs, very disappointed

@angledcoathanger 7 лет назад

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?

@azyfloof 7 лет назад

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!

@TheCodingTrain 7 лет назад

hah, thanks for the nice feedback!

@Shockszzbyyous 7 лет назад

I gave my metaballs gravity, and now it's kinda like a lavalamp, except there is no convection from up to down.

@pete5668 7 лет назад

I think you should make them more like meatballs, with melted cheese stretching between the balls as they move around the screen.

@Bloom_HD 7 лет назад

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.

@Bunny99s 5 лет назад

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

@gdor11 3 года назад

meat planets

@thatsmaik 3 года назад

@@Bunny99s Thats a great excercise, thanks! :D

@janknoblich4129 7 лет назад

Mettballs actually means meatball in german :D 0:02

@nightshademagia 7 лет назад

TheHawrk He ACTUALLY said Meatballs. In a different language, but he STILL SAID IT.

@calebsherman886 6 лет назад

Bazinga

@timmyanimations8321 4 года назад

wow.

@romywilliamson4981 7 лет назад

This is so cool. I'm new to Processing and this was a really fun program to play around with.

@haruiz 5 лет назад

You are amazing !!! :D, I love these videos , this how teachers should teach to program

@earthbjornnahkaimurrao9542 6 лет назад

17:20 - you have a funny way of finding the average.

@akashchoudhary8162 3 года назад

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.

@soufianesalhi8802 8 лет назад

dude you make code such a fun, i wish if my programmation professor was like you ! thanks for the good videos and keep coding !

@TheCodingTrain 8 лет назад

Thanks for watching!

@tehsimo 7 лет назад

Infectious enthusiasm! pumped to go write a heat map visualisation from this

@BabaykaMoscow 7 лет назад

One of the best RU-vid channels!

@lazerbeam9737 8 лет назад

Loving your videos! Glad i came across your channel.

@TheCodingTrain 8 лет назад

i'm so glad to hear!

@albertolemosduran5685 2 года назад

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

@jekaterinajaroslavceva3722 6 лет назад

Best chanel ever

@zdddddd 7 лет назад

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

@RetsaGames 3 года назад

These simple algorithms are so powerful it's insane. Can't wait to make some games with these noises

@softwave1662 8 лет назад

I so love these videos.

@TheCodingTrain 8 лет назад

thank you!

@borekworek69 6 лет назад

What's your favourite color? Me: 13:58

@its_ya_guy_the_big_bak_guai 7 лет назад

Daniel!! When are you going to show us the 3D Metaballs??

@alijayameilio 7 лет назад

better to times the color with 255, because radius / distance will give perfect 1 on the radius of the circle

@hamzabiyuzan6969 7 лет назад

this is amaaaazing I really like ur videos thanks a lot

@TheCodingTrain 7 лет назад

thanks for watching!

@corrense 8 лет назад

Super and greats video that is helping me a lot in understanding the concepts. Cheers,

@TheCodingTrain 8 лет назад

Thanks so much!

@xnick_uy 7 лет назад

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.

@xnick_uy 7 лет назад

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

@MartinMllerSkarbiniksPedersen 8 лет назад

thanks for this video. I like your energi

@TheCodingTrain 8 лет назад

Thanks for watching!

@jrdnshw 8 лет назад

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!

@oonmm 8 лет назад

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.

@jamesmichaelmcdermot 2 года назад

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.

@sarweshshah 3 года назад

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?

@zinsy23 5 лет назад

This video reminds me of the development of television. Started black and white and eventually got color!

@pianochess1882 5 лет назад

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

@FlextremeMusic 7 лет назад

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.

@jakoblenke3012 7 лет назад

+Flextreme Production beep Did you heared something???

@nagesh007 2 года назад

Awesome

@gdor11 3 года назад

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

@gdor11 3 года назад

omg making variants of this i made my own abstract art o_o

@eyalmeltser4296 8 лет назад

Really Cool!

@TheCodingTrain 8 лет назад

thanks!

@catapillie 5 лет назад

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 👏

@Tentin.Quarantino 5 лет назад

*that* is one *spicy* metaball!

@graydhd8688 Год назад

That's a spicy meta ball!

@manuellehmann267 6 лет назад

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!

@ferb1131 2 года назад

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

@petalaak 7 лет назад

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?

@SpringySpring04 2 года назад

I second this

@ShotgunLlama 6 лет назад

Metaballs metaballs, spaghetti underneath. Ravioli ravioli, great barrier reef!

@SpringySpring04 2 года назад

The otherworldly Italian creatures you ordered have been summoned

@xanderlewis 7 лет назад

You're my favourite. :)

@marker52 6 лет назад

Swear I saw a fidget spinner in the thumbnail...

@TheCodingTrain 6 лет назад

😂

@RexTorres 5 лет назад

Metaballs? Meatballs? Mothballs? Methballs?

@blackfamily2341 6 лет назад

That's a spicy metabaaallll

@lethn2929 5 лет назад

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?

@mrzerr2296 7 лет назад

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 ?

@2001herne 4 года назад

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.

@zechn1819 7 лет назад

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?

@fernandojerez3444 7 лет назад

Wow great job with those challenges. But just one question: Why always 51 for backgrounds!!!! i need a reason, curiosity it's killing me : )

@AnvitGarg25 7 лет назад

someone recommended it to him in the first or second vid of the coding challenge

@thusharafernando4402 7 лет назад

i read the title as MEATBALLS, i thought he was going to simulate meatballs.lol

@kuskus_th13 7 лет назад

Thushara Fernando Well he might do it if he gets to computer gastronomy if that exists... Kappa

@blackbird1234100 7 лет назад

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

@blackbird1234100 7 лет назад

+Daniel Shiffman OK I will

@darkfrei2 3 года назад

3:16 - wow! It's my avatar!

@jakeniemiec8559 7 лет назад

random2D does not work for my version of processing. any suggestions on ways I can make it move

@kranser 7 лет назад

background(51); just gives me a grey screen and nothing shows until I comment that line out - what am I doing wrong?

@kim15742 6 лет назад

GLSL videos would be awesome!

@TheCodingTrain 6 лет назад

Someday I hope!

@renjithkumar6951 7 лет назад

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.

@paulwright8695 4 года назад

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

@luissolis7973 6 лет назад

Did you finally release a p5 version of this?

@whomstareyou8013 7 лет назад

After Binge Watching your Channel I am suddenly filled with DETERMINATION to learn JavaScript

@xclordon_4696 7 лет назад

Arthur Jakubiec Java* not javascript

@whomstareyou8013 7 лет назад

java and javascript work in similar ways, for me I find javascript easyer ro learn before going to full on Java

@SpringySpring04 2 года назад

Sand under the tail

@abdlwahdsa 8 лет назад

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)

@kamoroso94 8 лет назад

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.

@TheCodingTrain 8 лет назад

i would like to eventually cover how to do this with shaders and/or geometry/vector shapes.

@khckwok 6 лет назад

hopefully that would be coming anytime soon!

@proloycodes 2 года назад

i think youd want to use imageData instead of ctx.drawRectangle

@Vedvart1 7 лет назад

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?

@wallacesantos0 6 лет назад

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.

@socketbyte5348 5 лет назад

It would be like 4852745284x faster if it was done as a shader (executed by GPU)

@Tirwrai 7 лет назад

Hello Where can I download a video to your program source code, talking about great

@camsy83 2 года назад

If you had called the metaballs 'thisdots', that would truly have been meta

@DaddyDevit 6 лет назад

That's a one a spicy metaball

@SmokestormX 7 лет назад

Totally thought you were coding Meatballs.

@TheCodingTrain 7 лет назад

+Smokestorm almost!

@earthbjornnahkaimurrao9542 6 лет назад

import GrandmasRecipes.js

@SpringySpring04 2 года назад

@@earthbjornnahkaimurrao9542 lmfao

@orangutan9492 2 года назад

'I want to make a blob object' I think you mean blobject

@scanerang 7 лет назад

I tried to do this... had 1 fps on my gaming pc, but I drew each point one at a time tho

@chevere3424 Год назад

Why i can't use b as the index of the blob? why is index[0]? i want to draw them with the mouse...

@3ab8aR 8 лет назад

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

@TheCodingTrain 8 лет назад

interesting idea! suggest here: github.com/CodingRainbow/Rainbow-Topics/issues

@mickyr171 6 лет назад

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

@mickyr171 6 лет назад

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

@SpringySpring04 2 года назад

_why would you use python mode!!_

@mickyr171 2 года назад

@@SpringySpring04 because i was using python for years and it was easier

@SpringySpring04 2 года назад

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

@mickyr171 2 года назад

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

@luka65 7 лет назад

How about combining this with a Particle Flowfield ?

@TheCodingTrain 7 лет назад

Great idea!

@stefanpopa6668 7 лет назад

Hi all! Does anyone know how I could load this animation created in Processing as an animated Desktop background?

@xclordon_4696 7 лет назад

Andrei Popa no

@cjvman 7 лет назад

Andrei Popa, Windows used to allow HTML files to be background pictures, so you could remake it in JavaScript maybe?

@rotten-Z 4 года назад

Center of rectangle is ((maxx+minx)/2,(maxy+miny)/2)

@he2he 3 года назад

(maxx + minx)/2 = minx + (maxx - minx) / 2

@rotten-Z 3 года назад

@@he2he (max+min)/2 - two operations, your variant - 3

@he2he 3 года назад

@@rotten-Z I just wanted to point out that the video wasn't wrong.

@rotten-Z 3 года назад

@@he2he I didn’t say he was wrong. I just hinted that his formulas are not entirely optimal

@Stufe2 2 года назад

Very cool tutorial! We made a drinking game. Everytime you grab your nose, we have to dring. now iam drunck

@sandortakacs546 8 лет назад

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?

@TheCodingTrain 8 лет назад

+Sándor Takács cap the sum value at 255 using an if statement or constrain() if you are using p5.

@sandortakacs546 8 лет назад

Thanks, it worked. I don't use p5.js, but I wrote my constrain function.

@curt8806 6 лет назад

How come when I download this it's super slow?

@mileswaugh 7 лет назад

you should make it so the meatballs bounce off each other

@mephistosprincipium 6 лет назад

Today Mr. Spaghetti shows us how he codes his meatballs. ups, sorry wrong channel

@Xnoob545 5 лет назад

I laughed so hard at 11:00

@darkquaesar2460 5 лет назад

Thats pretty meta.

@thesdfable 3 года назад

hello! how do I change the color of the distance. I mean how do I make the blobs darker?

@thesdfable 3 года назад

Actually how do I pick specific colors but not anything RGB

@RSPikachuAlpha 8 лет назад

I luv meatballs

@innokentiyromanchenko1450 2 года назад

amazing speaking rainbow

@rockyrivermushrooms529 7 лет назад

Ravioli Ravioli, quickly code the metaballioli

@robertobreve8623 5 лет назад

I think I love you

@LorenzoLeonardini 8 лет назад

where can I suggest a coding challenge?

@TheCodingTrain 8 лет назад

github.com/CodingRainbow/Rainbow-Topics/issues

@LorenzoLeonardini 8 лет назад

Daniel Shiffman thanks

@sevfx 8 лет назад

Why is it, that you are not dividing by zero when displaying a pixel, which happens to be in the center of a blob?

@sadhlife 7 лет назад

He is, it just returns 'Infinity' as the value, which is just the same as 255 as that is the maximum limit of color.

@Awss-qy9dk 5 лет назад

One day, I MET A BALL

@JordanShackelford 7 лет назад

spaghetti and metaballs

@user-mw1qb5kd9l 3 года назад

Afraid of saying meatballs, but methballs is fine for him...

@atrumluminarium 6 лет назад

Blob object? You mean Blobject? :P

@cristimacovei8417 4 года назад

minx + (maxx - minx) * .5 ? why didn't you use (minx + maxx) * .5

@ryderpham5464 7 лет назад

I'm going to be a grammar nazi and say that it's RADII, not radiuses at 7:07.

@TheCodingTrain 7 лет назад

+trien pham oh. Good point!

@ryderpham5464 7 лет назад

Or do you mean, good "both the x and the y coordinates combined"

@mikeynjs94 7 лет назад

Either are correct. Radii is the traditional, Latin plural, radiuses is the lax, English plural.

@ryderpham5464 7 лет назад

English is weird, so i say radii. i also say octopi, not octopuses

@nhobb 7 лет назад

it's octopodes not octopi

@isaacjones5937 7 лет назад

Disappointed you didn't say blobject.

@BDYH-ey8kd 8 лет назад

made it seem so effortless, with that amounth of skill i probally takes no more effort at all ..

@TheCodingTrain 8 лет назад

thanks!

@BDYH-ey8kd 8 лет назад

Daniel Shiffman Dan, khan academy is looking for a new video star.. it should be u! ('khan academy talent search' open till Agust 1.)

@TheCodingTrain 8 лет назад

Yeah, I was thinking about that. But can't settle on a topic to do. Any ideas? Also, I'm happy just doing stuff for my own channel.

@BDYH-ey8kd 8 лет назад

Havn't, seen all your stuff, but personally i would like to see u do more with the circles, maybe swarm decentralized, (ad hoc) random generated communication-messages for simulating drones/networks? with limited bandwidth and other constraints. Maybe include also latency, propation (as expanding circles?), for stabalizing force/distance-field with wind-influence.. changing colours when active in communication/routing, random failure-rates? stuff like that with meaning full messages. like a series based on that where u then can go in futher in pro/cons of different messaging types/protocols related to ad-hoc, simulate the system and even more complex factors like multiple random messages in the network.. just my 2 cents (>^____^