How Computers Draw Weird Shapes (Marching Squares)

[@tiagotiagot]

A "cheaty" way to draw metaballs is to start with a black-and-white picture with solid circles (or any shapes, since they could be constructed by combining circles), apply gaussian blur, then reduce it back from grayscale to purely black-and-white with a threshold function.

[@gershommaes902]

That actually sounds like it resolves to essentially the same approach seen here! Additive gaussian blurs will behave like sums of inverse-radius functions. (No marching squares tho; just per-pixel shading)

[@Kaytsey]

Yup, that's pretty much how I know it too.

[@RottenFishbone]

Accidentally did exactly that when trying to make light blending. First thing I thought when he said "how would you go about this?"

[@Crazymoniker]

I used a similar method to have "equal distance travel" around obstacles, to create realistic borders for a DnD campaign I ran.

[@MrNicePotato]

Well this video tries to get the the bare bones of computer graphics and "applying gaussian blur" involves just as much math and deliberation as the video.

[@Mutual_Information]

It’s wild to me how simple seeming tasks require such clever algorithms. Makes you appreciate a lot of the craziness computers do behind the scenes.

[@mrvzhao]

Bravo! Now, after hearing 'metaball' so many times in 27 minutes, I'm off to get myself some meatballs...

[@Reducible]

Every time I read the word metaballs in the script, I got hungry. I feel you :)

[@igxniisan6996]

You just stole my copyrighted thought.. And now I've to think of a different comment 😑....

[@Blox117]

shameful that you aren't off to get batman

[@humankerbal3623]

Off to ikea

[@redfoxlightning]

@@igxniisan6996 I know THAT feeling xD

[@_Baku]

Maybe it's my physics background, but when you asked how we would approach it, my mind immediately went to contour lines on a potential field. Of course, I had no idea how to use that to actually render the metaballs, but I'll take what I can get.

[@moustholmes]

Same, I immediately thought they look like a contour of inverse square law. Funny that you really get at feel for how different functions looks and behaves in different situations.

[@Reducible]

Haha yeah, secretly, my favorite part of making this video was explaining that really cool connection with potential lines in an electric field. For me, it was just an amazing connection. I love hearing how people from different backgrounds think about these problems. Thanks for sharing!

[@alpers.2123]

As a wizard, I agree. Just use a force field.

[@guilhermetorresj]

As an electrical engineer, I had the exact same though as you did. Marching squares makes it a lot more efficient, and that was the part I couldn't come up with by myself.

[@SreenikethanI]

SAME!!!

[@Adamreir]

There’s an inflatuon of Manim films being created right now, but yours really stand out! I mean, this is 3b1b level. Amazing!

[@mayabartolabac]

he should have submitted something for SoME1 but i guess he's more in the CS side of things

[@_okedata]

@@mayabartolabac CS is allowed in SoME1, i think its more because SoME1 was to encourage people who are thinking about starting a channel to start, whilst he already has videos

[@mayabartolabac]

@@_okedata oooohhh so that's why i don't see any familiar names on the compet

[@fredericmazoit1441]

Unknowingly, you brought me 30 years ago. Back then, I was obsessed with Mandelbrot sets. I had programmed a rendering algorithm for it but it took ages to complete, and I was desperately trying to find a faster way. In the end, I succeeded but, reinventing a variant of marching squares. 1. First compute all the points on a, say 16*16 grid. This is roughly 16*16=256 times faster than computing all the whole image. 2. For any center of a 16*16 square, if all corners have the same value, then set the center value to be the same. Otherwise, compute it. You end up with a "diamond" grid. 3. For each diamond, do the same. You and up with an 8*8 grid. Go back to step 1 until you have an 1*1 grid. With this, I could draw a Mandelbrot set much, much faster than before. Once I had done this, I wanted to compute in real time animations on the Mandelbrot set. To save even more time, I used the old picture to guess the points on the first 16*16 grid. If all the neighbors of a point on the old 16*16 gris had the same value, then I guessed that the corresponding point on the new grid also had the same value. Both technics can be used to speed up marching squares for graphics animations but the drawback is the it becomes far less obvious how to obtain a parallel version.

[@Reducible]

Wow, an interesting application of it I hadn't realized! Thanks for sharing that story!

[@zyansheep]

Yo I literally came up with this search-then-refine idea while I was watching the video. Kinda reminds me of how collision detection works with kd-trees. This video: kzbin.info/www/bejne/m3anZZWJoL52eJo

Fractint had even more tracks up its sleeves back in the day to render fractals really fast even on underpowered 80386s. You can use the amazing.fact that the Mandelbrot set is connected.

[@TheBookDoctor]

I've certainly heard about marching cubes in the past, and have even seen Sebastian's video before. But framing it as a general purpose solution for finding implicit curves, wow. To me, that's a very "sticky" way of explaining it. Fabulous!

[@suvigyavijay]

Amazing, once you understand marching squares/cubes and how they are "embarrassingly" parallel, you seem to understand that why graphics cards are much more powerful at rendering than a normal processor. This is probably always skipped when people explain the difference between CPUs and GPUs.

[@Reducible]

Yeah I actually originally had an entire section of the script dedicated to the differences of the CPU and GPU and how there are specialized programs called shaders that allow a path of communication with the GPU for highly parallel operations. In practice, almost any high performance implementation of marching squares should use shaders. I wanted to go there, but if I did, it would be an hour long video :) Perhaps some time in the future.

[@joepgeuskens527]

@@Reducible Can't wait for a video on this!

[@sponge1234ify]

@@Reducible +1 support on that video!

[@georgeskhater487]

@@Reducible we want this

[@QuanrumPresence]

@@Reducible Please do :). We will wait

[@TheRealBoof]

11:10 is a really trippy visual illusion that I've never seen before! Some of the blue dots look like black dots with a blue outline, but when you go to look at that dot it changes back into a solid blue dot.

[@nisargbhavsar25]

Happened with me too!

[@geeshta]

If you actually look at one place for long enough, the outline dots will disappear completely and only the grid will be left in your peripheral vision! For your brain it's much easier to just assume it's a simple grid so it "caches" a simple grid instead of actually focusing on what you actually see!

[@DanDeebster]

It's known as the scintillating grid illusion.

[@TheRealBoof]

@@DanDeebster 💯💯💯 Thank you!!!

[@ginsYT]

Great video! When you said at the start, "How would you even start?", I decided to pause the video and accept the challenge (i guess I'm one of the people who is "anything like you" :D). I theorycrafted a solution and implemented a proof of concept in simple JavaScript with Canvas. Then I watched the video to compare with your results, and it turns out I arrived at the same shape function, just my rasterization was slightly different (pixel based instead of vector based), but I suppose both approaches lend themselves to different applications. The last part really resonated with me, because I'd heard of all these concepts in one way or another in university lectures. While I didn't quite "forget" them and was happy to find them somewhere in the back of my mind to apply to this problem, tackling a "practical" challenge such as this one, outside of the "campus environment", refreshed me on these subjects, enhanced my understanding of them and is really going to cement them in my brain!

[@hjups]

If you have time, you might want to experiment with implementing adaptive refinement. A coarse grid produces jagged resolutions, and a fine grid wastes a lot of computation. Instead, you can successively divide the boundary cells into smaller cells until you reach some pre-set number of levels, and then apply marching squares to the list of edges within the adaptive grid. A similar method is used in many computational fluid dynamics codes. You would also have the option at that point to skip the marching squares stage if you divide down to the point where you grid matches the output resolution (the pixel is either filled or not). If you're wondering about parallelization for such an implementation, typically the domain is divided into chunks based on the number of parallel processors, and if one chunk becomes overloaded with computation while others are idle, then it can shed some of the load to the idle processors (who then take on those sub-chunk regions). Also, you can utilize the previous state (for an animation or simulation) as a starting point for the next time step. There you know that grid cells need to be merged or subdivided further, which would be based on the function evaluations in the next time step. It can quickly become very complicated, but it's always cool to see the grid changing every timestep.

[@HenryLoenwind]

And if you want to optimize even further, you can use your knowledge of the function: For metaballs, there are n known locations (where n is the number of circles) that must be inside the function (the centers of the circles). If you start marching there until you hit an edge and then follow the edge, you reduce the number of squares you need to look at dramatically. Or even better, you start at distance r away from each center and march outward until you find the edge.

[@hjups]

​@@HenryLoenwind That could help to accelerate this specific problem, but not the more general problem of arbitrary functions (which is the more interesting case). Although, there are methods for basically phrasing general functions in the form of overlapping radial functions (essentially a basis transformation - that's essentially the difference between grid based and particle based fluid dynamics simulations, and you could use the center -> edge marching method to convert the particle case to the grid case). Note that the edge distance R is only known in the case where particles / meatballs don't overlap, when they do, the potential field is shifted and that distance is no longer correct. One disadvantage to doing the radial walking approach though, is that you may end up visiting a cell multiple times which wastes computation. Also it's not embarrassingly parallel anymore, nor is it regular in the memory access patern.

[@mettaursp309]

I think the strengths of this type of technique really shine with the 3D sibling: marching cubes. Jagged edges like that become much less apparent on 3D geometry once you start diving into vertex value interpolation, used for smoothing surface normals across a triangle & more, and other more advanced techniques that break up the visual patterns. It's not necessarily the best there either, because there are more refined competing algorithms that do similar things like dual contouring or marching tetrahedra, but it's still a perfectly fine technique that can be used to great effect. It's a popular style of technique because it makes great use of modern hardware, works well in general cases, and often gets close enough to the desired result that no real end user is ever going to notice something is off.

[@jursamaj]

Just a clarification: those oblong shapes are *not* ellipses. Also, this algorithm only works well if all the details of your shape are significantly larger than your starting grid. If not, then the 16 classifications can be *way* off from the shape.

[@cooperfeld]

Thanks for clearing up, I had a similar thing in mind: What if the shape has very fine details, like a couple of jags inside such a grid cell, and what about shapes with many small holes? Either you need a very fine grid resolution (inefficient for realtime applications), or use quad/oct trees at the expense of simplicity. It's fine like it is for simple, smooth shapes. Yet I wished for a more universal concept covering all shapetypes - I suppose that's a lot asked). Very good video illustration on this topic though!

[@TurtleKwitty]

@@cooperfeld If you need that much precision then nothing is stopping you from making the grid 1px in size, and thank the gpu for being good at its job haha

[@McPhage]

You're right, but that same problem occurs with any sampling-based method-details of the contour might get lost between samples. So you need to pick a resolution which corresponds to how much complexity your implicit function has.

[@Reducible]

Yes, you are correct -- I put the "Ellipses" part in quotation purposefully here, but I probably should have been more clear. And also, good point on the details of the shape, this is an important consideration when implementing this in practice.

[@guilhermetorresj]

Yah, the grid resolution is basically some 2D analogy with a low pass filter. Any details whose features are significantly smaller than a cell of the grid will be lost.

[@Ironypencil]

A very interesting application of these iso fields is "signed distance functions" used in raymarching, which allow highly performant rendering of 3d fractals.

[@MichaelPohoreski]

Signed Distance Fields can also be used in font rendering. (Valve literally wrote the white paper on it.) Unreal Engine 5 also uses then for virtual geometry.

[@ProjectPhysX]

I use the 3D variant of this - marching cubes - to render simulated fluids volumetrically, directly on the GPU in parallel. The simulation determines the very limited lattice resolution, so resolution is not a free parameter in my case. See my channel for examples :)

[@98perova]

Great video! I like how you explain the algorithm as the solution to a specific problem, it gives more insight on why the algorithm is how it is, and it's something that other videos on marching square lack.

[@uy-ge3dm]

I've watched only the introduction section and I've almost solved the problem myself, and it looks exactly like the animation! Here is my solution. Inspired by the how the influence of the other circle diminishes drastically as it moves further away as well as how an ellipse has two foci, I realized that the equation 1/sqrt((x-d)^2+y^2) + 1/sqrt((x+d)^2+y^2) = 1 reproduces the exact behavior, where d is half the distance between the centers. Testing this out in desmos gives the correct behavior. Adding more circles works by simply adding more 1/sqrt(distance) terms to the LHS, so the program really just needs to keep track of circle positions and be able to draw the resulting curve. Drawing the resulting curve is obviously the hard part.

[@N____er]

"Important note: do not confuse metaballs with meatballs" this got me bursting in laughter

[@Balawi28]

You are a wonderful narrator, I really enjoyed every section of the video, how you begin with a well-defined goal, and how you reach the final goal in a beautiful eased flow.

[@alegian7934]

3 concepts i understand very well individually, beautifully merged into one problem. Awesome vid!

[@nstryder-music]

after seeing countless videos on marching squares/cubes and not understanding the "why" behind it, this video finally made me get it! Thank you!

[@ballman2010]

I watched the full video and then came back a few days later because I kept thinking about it, and I had to show my appreciation for such a clear explanation. VERY well done, I have zero doubt that I could implement this algorithm based solely on this video. I've read a lot of published articles that I wouldn't say this about. Well done.

[@okiguessineedahandle]

One ~kinda~ extension / similar concept of this I personally like is the use of signed-distance functions in ray marched rendering, allowing you to render perfectly mathematical objects with high precision by just sequentially polling a math function to ask "how far away am I from the surface of the closest function" then pushing your ray tracing ray forward by that amount in space (therefor never passing any object which the ray may intersect with) with this you can then render 3d fractals with incredible detail fairly easily. if you want to render multiple fractles its also easy as you just take the minimum of their signed distance funciton.

[@nanamacapagal8342]

The way you rediscovered this topic of metaballs is actually pretty relatable. I've learned much more in pretty much any topic (mostly computer science) by simply playing around, looking into things, solving problems, and creating projects, than by taking a course.

[@mahousenshi00]

When you are on the point that you can teach it, like you did here, you "groked" the concept. You may forget details but the concept will live forever on your toolbox.

[@gasparliboreiro4572]

9:27 this method is really good for finding the border of a shape, but in concave shapes only! if you have a convex shape you will only find 1 border that cuts the line between the two points

[@yah3136]

There is tow kinds of auditors, the ones who tries to show he understand the subject, and the ones where the auditor make you understand the subject : you are clearly one of the second category, congratulations. And referencing Sebastian Lague who is such a source of inspiration for just the cherry on the cake, you got a new subscriber :-)

[@juanma4978]

I literally rediscovered by my own what you explain in the sections "contours around two points" and "sampling the space" some days ago when designing a method for aproximating the shape of a given curve with no known expression. I couldn't believe it when you explained what I had just written on my notebook, math is amazing, two persons will always reach the same conclusion even without knowing of each other. Really loved your vid, amazing work, keep it up!

[@BrianAmedee]

This is such an impressively simple explanation for a complicated topic! Nicely done!

[@peterronhovde]

I liked how you broke the technical problems down into bite-sized bits while keeping the element of discovery. Good job.

[@jackwang8105]

This video deserves more views!!! Thanks for your work!

[@m44-k2q]

One of the clearest explanation i saw , Hats off man.

[@adrianrevill7686]

Excellent video, I have tried several times to understand marching cubes, now re-watching Sebastian's video makes complete sense.

[@sadpancake6563]

You don't need marching squares for metaballs, you can create the same effect using only shaders, maybe ddxy for antialiasing. But yes, marching squares, cubes are amazing.

[@sebbes333]

eg. 25:17 You can probably improve the drawing speed by marking the neighboring cubes (or squares) around every place where you HAVE drawn a line (like an array with coordinates), then the marked cubes gets checked first for any lines (and surrounding cubes are marked again if a line is drawn), you can speed it up even further by analyzing the direction of the line & only add the spaces in the CORRECT direction to the marked list (can add the other surrounding cubes to a list of lower priority). Then you can have like just one computer core running the normal marching square algorithm, just in case there is another object that isn't connected, so you "brute force" its detection.

[@danielfernandes1010]

The reveal of the metaball function was beautiful! Thank you for your amazing videos!

[@oriyonay8825]

i love this video! an idea i had while watching it would be to keep a queue of all squares that the contour passes through the contour. then we could iteratively divide each square in the queue into four smaller squares and perform the same root-finding algorithm on them to further refine the quality of our contour, and push those four squares back onto the queue. we discard squares from the queue once they reach a certain size (i.e., once they're small enough). i wonder if anyone's done that!

[@Number_Cruncher]

Your videos are just amazing and so inspirational. I felt a bit ashamed though, having majored in physics and not having had the slightest clue initially that electric charges where acting behind the scenes. Just, incredible. Thank you very much.

[@skeletonboxers7336]

computer graphics was one of the classes that just never lined up during my time in university. so ive been spending my time since graduation learning concepts of things i missed out on (and job hunting as well lol) and this has to be one of my favorite concepts to be self teaching. i heard the class was hell, and i guess im glad in a way to be learning it through more digestible and paced content from creators like you.

[@MagicGonads]

One thing missing is properly deciding how to do the thickness of the line segments within the squares. You naively just used a rectangle but what you actually want is a trapezium, so the edges do not have little triangular gaps between squares (and so they don't overlap, though that's less important if the shape is entirely opaque)

[@PGETSA17]

I really really love this video, and now I understand a lot of new things. When you introduced the problem, I had the same 3 questions that you proposed! Thank you, great video.

[@pineapplesandwich3906]

While watching the video I had to check if the channel was 3blue1brown, absolutely amazing.

[@PiercingSight]

When I made a stupid small lava lamp app a long long time ago, my first approach was literally just to make blurry white circles on a black background, add them together, and then clamp the pixel values above and below a specific value between black and white. Just use that as a mask for some texture, add shading and other effects, and boom. That's it. It just instinctively made sense. In this case, your metaballs use an inverse square "blur" instead of a linear "blur" or a Gaussian "blur" (which I used). There are many interesting functions that could be used to make different kinds of "metaballs", but the inverse square seems to be the most common function used, probably because it goes to infinite distance, resulting in smoother metaballs.

[@Bruh-sp2bj]

hope you do more videos, you may be one of the best computer science channels that Ive seen so far.

[@garr061]

Wildly satisfying. Thank you for the explanation!

[@ChrisOffner]

Absolutely beautiful explanation and presentation! Thank you so much. ❤️

[@canteatpi]

like the bit about parallel computing, also great video

[@adrianv.v.4445]

I'm discovering so many incredible math channels, keep up the content! ^^

[@ikocheratcr]

Very nice explanation of marching squares and metaballs.

[@kevincsellak296]

My first thought was “so I need a function that gives lower values than any of its arguments, and which, if all but one of its arguments are large, gives approximately the remaining small one,” and my mind immediately went to the “if I can paint a house in x time and you can do it in y, how long does it take combined.” From there it was just a matter of generalizing the problem, because I didn’t know whether the terms were raised to a power before summation, whether there was a skew or weight function, that kind of stuff. I spent an hour or so defining what kind of metric space would be necessary. I suspected that there’d be a quadratic somewhere in your version at first, but that turns out not to be the case. Eventually, I settled on just leaving out the power variable, seen as a weight function could invorporate powers anyway. I didn’t make the connection to field lines and potentials until you mentioned it. Neat!

[@AlfredDiffer]

Nicely done. That 'play with it' step at the end for actually learning it is exactly what many of us want our students doing with homework problems, but scores for homework tend to make students optimize a little different. That stops in grad school eventually and we 'play' with our research topics. My experience is we don't really know a thing until we play with that thing. We might pass exams and get good scores, but that's not really a measure of what we've learned.

[@yelmoralardclaw]

I'm on 1:07, so a bit of head-on idea: 1. Make canvas; 2. Make N circle objects move independently; 3. On each render step, trace the NxN network of connections between any two circles 4. For each two circles that come in 'contact', calculate four points where the circles merge - expression can be made out of an equation system for circle and say, hyperbole (for which the line that connects centres of circles would be both a symmetry axis and an asymptote), in such case it would be two equation systems; 5. Aaand gradually render outline, have never practiced this part. Upd: yep, the whole video about p.5. Good one!

[@narwhalkid]

bro having all the metaballs combine at once is like the dvd logo hitting a corner

[@br45entei]

16:16 me, not quite understanding what I'm watching, but having a little maths knowledge: "couldn't you just lerp? idk" 17:02 me, still trying to understand everything he just said 17:05 me: "Wait, linear interpolation?! That's lerp! Heck yea, I predicted it!" lmao

[@SreenikethanI]

ayy thats nice

[@berkansivrikaya9055]

Great video. I randomly started then couldn't leave it. The ideas 💥 me away. 👍

[@KenHilton]

I had seen marching cubes on Sebastian Lague's channel already, so when I saw you start talking about marching squares I thought to myself "I wonder if he'll bring up Sebastian's video once he gets to cubes?" and I cackled out loud when you did.

[@CrushedAsian255]

Thanks so much for making this video! This encouraged me to try making my own metaball renderer using marching squares, which I completed. It works well but did take like ~3 days to write. (mostly bug fixing the marching squares)

[@YEASTY_COMMIE]

First intuition without watching the video You create a scalar field in the entire scene. Each circle creates a distortion in the field with an equation like that r*exp(s*d) where r is the radius, s is some kind of constant smooth factor, and d is the distance to the center of the circle This creates some kind of "energy" emanating from the center of the circle, fading as you get further away from it. You sum the energy of the circles over the entire field, and when it hits a specific value (more like a small range in practice), you color your pixel So the final equation would look something like a = ln(0.5) r1*exp(s*a*d1) + r2*exp(s*a*d2) + ... + rn*exp(s*a*dn) == 0.5 computed for every point, with dn being the distance from that point to the center of circle n I guess this should produce similar results ? ///after watching/// holy shit I wasn't far off lol, just replace the exp by a division and change some constants and here you go

[@Taterzz]

you know after seeing the contour cases i couldn't help but think that that's exactly the style of tiling that pixel art uses. with those basic shapes, they can essentially create any style of terrain and make it look organic.

[@Thor_the_Doge]

Holy crap, didn't know I was into computer graphics but I find this mindblowingly fascinating

[@HerbertLandei]

One important point: Marching squares / cubes is not limited to formulas, but also to measured values. Once upon a time a wrote a 3D metaball demo (using the marching tetrahedra version), and was contacted by a student who wanted to use the code to visualize computer tomography scans. From the slices of some example scans we interpolated a 3d "function" and once the right countour value was used, the algorithm showed the brain or other organs in 3d (using a game engine, JME to be precise).

[@stjernis]

Nice exposition, but I was left wondering about the special cases where you may miss a local maxima or minima within a square. For the metaball problem that should be relatively easy to avoid reliably since all local maxima are given (= the coordinates of the balls), but if you're working with an arbitrary function it's a risk, regardless how fine a grid you use (and for fractals it's a certainty). I can imagine these things are a bit messy to go into, but I think it's worth mentioning.

[@AWESOMEEVERYDAY101]

As soon as the physics connection was made it was like a wave of everything hitting me at once of what I had learnt in physics class and realised i've also fallen into the study-test-forget loop.

[@dominiquefortin5345]

A possible accelerated technique would be to use a priority queue and partitioning of the render space. The partitioning is done by taking the render space (square for 2d; cube for 3d) and cutting in 1/2 each dimension (getting 4 sub-squares or 8 sub-cubes for each cut). You assigne a level to each partition. The whole render space is level 0 then on the first cut is level 1 and so on). The priority order would be from highest priority (a corner has a inside dot, level is low); (a corner has a inside dot, level is higher); (a corner has no inside dot, level is higher); (a corner has no inside dot, level is low). You can stop when you have reached a certain level or reached a time limit or a combination of the two. Since a point is shared by multiple level you don't have to recalculate the function for does points. This is also "embarrassingly" parallel.

[@roach1628]

I am in second year of an engineering degree. I hate all my courses and I could not care less about any of them. While I do my course work or bash my head against my desk I just wish I had time to work on the things I want to work on. Never have I heard something I resonate with so strongly. "And I think for me, framing it in a way where my goal was actually to build something using it and then learning the details as I went through the journey was a lot more meaningful than listening to it from a standard lecture."

[@caseytailfly]

Great video, I don’t do much graphics programming nowadays but this makes me want to! 👏

[@agargamer6759]

What a beautiful idea and explanation!

[@hozelda]

The "potential" function in the animations seems to be more like R^2/r^2 (like a force) instead of R/r. Can you confirm? As two bubbles are approaching each other they seem to grow very little until they are very close. Additionally, the max growth of radius for two overlapping bubbles vs one seems to be closer to times sqrt(2) rather than times 2. Example: A. for the 1/r case (as stated in the video): R=5 leads to a bubble with radius 5 since R/r boundary of 1 occurs when r=5 also. With 2 bubbles overlapping, 5/10 + 5/10 = 1 so the new circle from two overlapping centers has radius 10. B. For the 1/r^2 case (as suggested by the animations): R=5 leads to a bubble with radius 5 just like above since 5^2/5^2 = 1. But for two bubbles overlapping, we have 5^2/7^2 +5^2/7^2 is about 1, meaning the new boundary of the larger bubble with 2 centers is around 7 units (7/5 = sqrt(2)).

[@nickwallette6201]

I can tell I've found my people when the narration begins with "if you're like me, you immediately wonder how you even begin to approach solving a problem like this one" _while_ I'm casually thinking in my head something like: OK, so there are obviously points in the middle of the circles that are basically a vector, and when there's a collision with another circle, the two combine their area until those vectors force them apart . . . "

[@darshigoswami5124]

Would love if you make a video detailing the process of procedural generation... your videos are an absolute masterpiece .

[@user-hk3ej4hk7m]

Another approach that I'm very partial to is using interval arithmetic. It's standard for intervals to use the extended real set, so you can literally plug (-oo, oo) into a variable and know if the equation could even be satisfied. If you're drawing onto a screen, you can plug in an interval equivalent to the viewport, and then do binary search to find the contour, since you can just discard regions where the condition is not met at all, it's not necessary to test all pixels on the screen.

[@kankawabata3398]

Every one of your videos would have been a top contender for 3b1b challenge! Thank you for educating us!

[@chotai]

I guess, both are using manim if you're talking about the concepts and teaching personalities, yeah surely they're

[@SaiponathGames]

I taught my classmates how Gravitational Field works by showing this video! It was very helpful thanks ya! :)

[@araghon007]

I've been on a journey on using signed distance functions and marching cubes. I'm trying to make a 3D modelling program that lets you make polygonal meshes from SDFs, but along the way I also had to learn quite a bit about OpenGL and making GUI and handling cameras, coordinate systems and all soft of stuff that I just don't quite know how to learn. Also, I started off by sampling random points within the function's bounds and filtering by distance, then I moved onto raymarching all points towards the surface until I realized that I could just use marching cubes to get a much better result. Then I also started learning about all sorts of other techniques, best of which I found was dual contouring, which I still have yet to figure out how to even begin implementing it. Not to mention parallelization, GPU compute, memory limitations and octrees.

[@joemck85]

My initial thought on how to tackle it was to go over the image and for each pixel, calculate the sum of the distances to each circle center point. Then when the sum is within a threshold of (presumably) 1, color the point. Optionally pick a color depending which point it's closest to. I think a threshold can work here - your desired image has outlines thicker than 1 pixel so just raise the threshold until the desired thickness is achieved, and optionally render at 2 or 4x resolution and downscale to antialias it since my method produces jaggy edges. It should be easy enough to calculate the appropriate threshold to create a given thickness outline. Where things get nasty is when you want exactly 1 pixel thick outlines without gaps.

[@aragonnetje]

I am so happy my initial idea of a function for metaballs was correct!

[@whimsy5623]

Aw man I'm a sucker for half hour videos with funky titles like that

[@jacobyoung6876]

Such an excellent explanation!

[@wendolinmendoza517]

Awesome video. Definitely going to try it out in Processing

[@mightloki8181]

this is wonderful, however I was thinking of another approach (I still don't know if it's applicable in all scenarios) what if we tried to find only one point (x,y) with a value of 1 then calculate the gradiant vector at that point, knowing that a slight mouvement in the direction of the orthogonal vector to the gradient result in no change of value, we can slightly move the point (x,y) orthogonally to the gradient vector that way we can pretty much assume that the value of the function f(x,y) at the new location is technically the same. the only problem this could face is that after several iterations the error value can grow until it's not tolerated anymore. but in some cases it would be perfectly fine. I would be very grateful to hear your thoughts about this :)

[@feha92]

Interesting video, that really helped explain to me how to do something I wondered about before but never figured out a nice equation for (granted, my initial problem was a bit different: I wanted convex meshes of arbitrary shape to merge like this to other convex meshes, *except they should abide to preservation of volume*. And that they should _actually_ merge them once they touch, at least once they merged enough for the resulting shape to be convex). The idea of simply adding two field-functions together is a rather neat way of doing that (even if I have no clue how to generate an equation for arbitrary convex 3d shapes - and I am rather certain volume won't be preserved - but it should be possible to preserve "mass" which is "good enough") which I never really considered (had somehow tunnelvisioned myself into trying to describe the shapes with parametric functions which only worked somewhat because my meshes were still only spheres) And something that stuck out to me in that video as soon as you mentioned adding them together, was that you never addressed a rather obvious performance concern/optimization. If you are to add the equations for 2 metaballs, you are inevitably going to take an infinite amount of time (the grid is infinite). And even if you limit the grid, traversing it in its entirety for every frame to calculate each cells value would be ill-advised. So should probably have been some mention that the best way to go about it is probably to compute each sphere individually, adding the value of its equation to the cells near it (using a threshold for when to consider its contribution "negligible", so you can limit the amount of cells considered (or you would, again, end up traversing out to infinity). If you have the memory to spare, you can even optimize further by caching the (local) positions considered relevant, and their respective value.

[@manueljbecklas1238]

I think it's important to mention that for concluding the point (x,y) such that f(x,y) = 1 must be on a line between two points with f(x,y) < 1 and f(x,y) > 1 one must assume f is continuous. And a function to be approximately linear between too point close in space, f should be differentiable

[@iaobardar3452]

That was a great description! I’ve heard of marching squares before, but seeing this video has helped me see it a different way. Could you make a video about dual contouring? It’s another similar method that has cleaner results but is more complicated.

[@monsieuralexandergulbu3678]

Finally new video!

[@winstonvpeloso]

wow, many thanks from a physics person who always wondered why triangles show up so much in 3D graphics

[@HansLemurson]

The animation of the meta-balls reminds me of playing with blurry shadows on the ground, cast by the sun. Bringing my finger shadows together seems to make them "stretch" and try to merge in a strange way.

[@gradyking4739]

Completely unrelated to the video (which by the way is incredibly insightful), but I enjoyed the scintillating grid optical illusion that happens around 11:00, where black dots appear superimposed on the dots that one’s eyes is not focused on. Anyways, really cool video!

[@vardhanr8177]

Another way to generate something that is close to metaballs is… the locus of a point whose product of the distances from two given points is a constant. So if the given points are (x_1, y_1) and (x_2, y_2) and the constant product is "a", then the inplicit equation would be √((x - x_1) ^ 2 + (y - y_1) ^ 2) * √((x - x_2) ^ 2 + (y - y_2) ^ 2) = a. Also, this locus is a toric section.

[@dalmationblack]

I think you mentioned a few different words for implicit curves but I don't think you said either "level sets" or "level curves", which is how I first came across them when taking multivariable. Of course, I had also had them introduced to me as "equipotential" in physics classes, so it's just interesting to see how the same concept gets different names across so many fields!

[@Tom.Bombadil]

Manim is everywhere now and I’m loving it!

[@MrLuigiBean1]

THIS VIDEO WAS *SO COOL.* Thank you!

[@MegaArti2000]

3blue1brown is like The Beatles from KZbin, you can see its influence everywhere :)

[@RandomGuy-we2mn]

Nice video! Sebastian Lag would be proud of you :D

[@donaldhobson8873]

Major speedup available. Start with a point on the surface, and do a breadth first search over cubes that have something happening in them. Most of the space is empty. This technique works so long as we can find a single point on each topologically connected component. Which we can do by starting at the centre of each metaball and moving up until we find a point outside.

[@riten]

SDF can be used to render without needing marching squares. It can become apparent how it works by imagining a circle, if the distance is smaller than some threshold paint those pixels, this will automatically give you meatballs if you take the closest point to all circles. Furthermore adding "shadows" / outlines with SDF is trivial and fast to compute.

[@vasilnikolov8576]

This channel is an amazing find!

[@A_Box]

I have no idea how or when I subscribed but holy heck, this is amazing.

[@hvaghani]

I am glad I subscribed this channel.

[@omicron1100]

Oh man you have no idea how long it took for me to re-find this video

[@Diego01201]

This video must have given a hell of a work. Great job.

[@monsieuralexandergulbu3678]

Amazing, as always