Coding Challenge #28: Metaballs

[@kuskus_th13]

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

[@americanengineering2063]

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

[@NStripleseven]

American Engineering Meth balls?

[@dumbidiot1119]

@@americanengineering2063 breaking bad reference??

[@Smomid]

this guy blows my mind with his genius

[@gloverelaxis]

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.

[@azyfloof]

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]

hah, thanks for the nice feedback!

[@janknoblich4129]

Mettballs actually means meatball in german :D 0:02

[@nightshademagia]

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

[@calebsherman886]

Bazinga

[@timmyanimations8321]

wow.

[@Shockszzbyyous]

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

[@pete5668]

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

[@Bloom_HD]

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]

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]

meat planets

[@thatsmaik]

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

[@johnvonhorn2942]

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

[@bencebalaton]

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 🫡

[@nctrn07]

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

[@borekworek69]

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

[@tehsimo]

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

[@alijayameilio]

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

[@earthbjornnahkaimurrao9542]

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

[@akashchoudhary8162]

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.

[@joesharp3580]

I love these coding challenges. Great work Daniel

[@angledcoathanger]

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?

[@soufianesalhi8802]

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]

Thanks for watching!

[@dannorris1406]

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

[@zdddddd]

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]

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

[@albertolemosduran5685]

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

[@romywilliamson4981]

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

[@zinsy23]

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

[@its_ya_guy_the_big_bak_guai]

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

[@gdor11]

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]

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

[@xnick_uy]

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]

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

[@pianochess1882]

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

[@BabaykaMoscow]

One of the best KZbin channels!

[@lazerbeam9737]

Loving your videos! Glad i came across your channel.

[@TheCodingTrain]

i'm so glad to hear!

[@MartinMllerSkarbiniksPedersen]

thanks for this video. I like your energi

[@TheCodingTrain]

Thanks for watching!

[@haruiz]

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

[@petalaak]

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]

I second this

[@ShotgunLlama]

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

[@SpringySpring04]

The otherworldly Italian creatures you ordered have been summoned

[@softwave1662]

I so love these videos.

[@TheCodingTrain]

thank you!

[@manuellehmann267]

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!

[@marker52]

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

[@TheCodingTrain]

😂

[@jrdnshw]

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]

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]

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.

[@mrzerr2296]

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]

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.

[@corrense]

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

[@TheCodingTrain]

Thanks so much!

[@ferb1131]

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

[@kim15742]

GLSL videos would be awesome!

[@TheCodingTrain]

Someday I hope!

[@SmokestormX]

Totally thought you were coding Meatballs.

[@TheCodingTrain]

+Smokestorm almost!

[@earthbjornnahkaimurrao9542]

import GrandmasRecipes.js

[@SpringySpring04]

@@earthbjornnahkaimurrao9542 lmfao

[@sarweshshah]

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?

[@nagesh007]

Awesome

[@thusharafernando4402]

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

[@kuskus_th13]

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

[@FlextremeMusic]

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]

+Flextreme Production beep Did you heared something???

[@darkfrei2]

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

[@Tentin.Quarantino]

*that* is one *spicy* metaball!

[@rotten-Z]

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

[@he2he]

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

[@rotten-Z]

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

[@he2he]

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

[@rotten-Z]

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

[@whomstareyou8013]

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

[@xclordon_4696]

Arthur Jakubiec Java* not javascript

[@whomstareyou8013]

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

[@SpringySpring04]

Sand under the tail

[@RexTorres]

Metaballs? Meatballs? Mothballs? Methballs?

[@hamzabiyuzan6969]

this is amaaaazing I really like ur videos thanks a lot

[@TheCodingTrain]

thanks for watching!

[@paulwright8695]

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

[@eyalmeltser4296]

Really Cool!

[@TheCodingTrain]

thanks!

[@blackfamily2341]

That's a spicy metabaaallll

[@jekaterinajaroslavceva3722]

Best chanel ever

[@camsy83]

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

[@luka65]

How about combining this with a Particle Flowfield ?

[@TheCodingTrain]

Great idea!

[@orangutan9492]

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

[@catapillie]

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 👏

[@DaddyDevit]

That's a one a spicy metaball

[@blackbird1234100]

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]

+Daniel Shiffman OK I will

[@mephistosprincipium]

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

[@mickyr171]

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]

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]

_why would you use python mode!!_

[@mickyr171]

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

[@SpringySpring04]

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

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

[@fernandojerez3444]

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]

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

[@Stufe2]

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

[@mileswaugh]

you should make it so the meatballs bounce off each other

[@abdlwahdsa]

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]

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]

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

[@khckwok]

hopefully that would be coming anytime soon!

[@proloycodes]

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

[@lethn2929]

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?

[@user-mw1qb5kd9l]

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

[@darkquaesar2460]

Thats pretty meta.

[@xanderlewis]

You're my favourite. :)

[@LorenzoLeonardini]

where can I suggest a coding challenge?

[@TheCodingTrain]

github.com/CodingRainbow/Rainbow-Topics/issues

[@LorenzoLeonardini]

Daniel Shiffman thanks

[@renjithkumar6951]

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.

[@innokentiyromanchenko1450]

amazing speaking rainbow

[@RSPikachuAlpha]

I luv meatballs

[@zechn1819]

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?

[@luissolis7973]

Did you finally release a p5 version of this?

[@robertobreve8623]

I think I love you

[@ryderpham5464]

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

[@TheCodingTrain]

+trien pham oh. Good point!

[@ryderpham5464]

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

[@mikeynjs94]

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

[@ryderpham5464]

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

[@nhobb]

it's octopodes not octopi

[@Tirwrai]

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

[@rockyrivermushrooms529]

Ravioli Ravioli, quickly code the metaballioli

[@kranser]

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

[@Vedvart1]

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]

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]

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

[@Xnoob545]

I laughed so hard at 11:00

[@atrumluminarium]

Blob object? You mean Blobject? :P

[@iambugking]

Disappointed you didn't say blobject.

[@BDYH-ey8kd]

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

[@TheCodingTrain]

thanks!

[@BDYH-ey8kd]

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]

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]

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 (>^____^

[@jakeniemiec8559]

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

[@3ab8aR]

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]

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

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

[@Awss-qy9dk]

One day, I MET A BALL

[@JordanShackelford]

spaghetti and metaballs

[@zobook]

I understand now why de "Code of conduct" is first and foremost about gender al LGBT stuff. The "queerness" of the channel increased over the years, in a linear function way. Fortunately, the overall quality has increased exponentially so no complains here. 😊

[@zobook]

@PERSEUS 93 I don't think so but that's ok

[@sandortakacs546]

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]

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

[@sandortakacs546]

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

[@scanerang]

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

[@spicybaguette7706]

They should rename colorMode HSB to colorMode LSD

[@stefanpopa6668]

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

[@xclordon_4696]

Andrei Popa no

[@cjvman]

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

[@MatthiasKrijgsman]

13:58 xD

[@mircoheitmann]

Have you never experienced bluhuhhblujhuluhuhu-Colored Things in the Center?

[@lmeonliver1864]

Ryz yes

[@PrimusProductions]

13:51 Fidget Spinners

[@borekworek69]

no.

[@thesdfable]

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

[@thesdfable]

Actually how do I pick specific colors but not anything RGB