Voronoi Explained!

Twitter: @The_ArtOfCode
Facebook: / theartofcode
Patreon: / theartofcode
PayPal Donation: paypal.me/theartofcode
In this video I will explain the very common voronoi pattern. This pattern is very common in nature and is not too complicated to make so it makes a great building block for making cool effects.

[@player6769]

Always makes me laugh how animated and excited you look in the thumbnails vs. how monotone you are in the videos 😂 No offense though, these are some of my favorite tutorials!

[@metekavruk_Alanya]

He looks like still normal when he is working. My head sticks to monitor when i do design or programme something exciting although i have no sight issues.

[@shengfuzhai5239]

the same feeling, i think he is interesting

[@simpson6700]

don't know why youtube recommended me this, i barely do anything with shaders, but it's still super interesting.

[@neolynxer]

Best Voronoi explanation i've seen, thank you!

[@realcygnus]

Still thE best intro/tuts on the subject out there imo. Priceless !

[@alessi4249]

This is great! I've just been watching your videos and getting inspired to make shaders and the first thing I went for was Voronoi patterns without knowing this video existed! I was trying to optimise by using either a quad tree or by splitting into a grid and testing the 8 surrounding squares and this is exactly what I was stuck on, thank you!

[@bonafide9085]

this vid is a gem! thanks for sharing!

[@anmaral-sharif1381]

How did I missed this?? Really appreciate this valuable series. Thanks

[@ristopaasivirta9770]

Really like your hands-on teaching. Less theorizing, more code! Been bingewatching your videos for the past few days.

[@dexio85]

Great channel! Thanks for sharing your knowledge with us. I'm a rendering programmer myself but with no artistic touch whatsoever, so I do mostly DX12/Vulkan backend. Your videos are really helping me to have a better feeling of the artistic part as well. Thanks again!

[@cebustama]

Your videos are incredible, thank you so much for doing what you do!

[@NikolaNevenov86]

Great and educational video! Thanks for not having the snob "figure out yourself" attitude programmers have when they explain things. But you do it in a "hey! let me tell you how to do it.And you should avoid this or do that, because of xyz " manner.

[@brandonlewis2599]

I love all your screw-ups. They are so educational. Thanks for not scripting all this down to perfection. It's so much better this way.

[@nockieboy]

Love the explanation and simple code. You've earned another sub. 👍

[@MrNixaboo]

Thanks! Well done, easy to follow, good work as usual!

[@futureartist6420]

Thank you very much for the great tutorial. I hope you will make more tutorials

[@yavalang]

This is so cool, Voronoi isn't magic anymore, I could see this kind of tutorials for hours, thank you!

[@francoisgrassard]

Thank you Martijn for this great explaination ! Your videos are getting better and better :)

[@TheArtofCodeIsCool]

Aww thanks man!

[@zzstarsound]

You make Voronoi simple and crazy! Thanks for your great work!

[@TheArtofCodeIsCool]

My pleasure!

[@WOOVisualArt]

I'm huge fan of your channel!!! Thanks dude!

[@TheArtofCodeIsCool]

Awesome! :)

[@laurelvasquez6312]

Thanks for this video! I'm new to coding shaders and this was very helpful.

[@pianochannel100]

Thank you very much for demystifying this stuff! It is so hard to find good sources on shader math.

[@TaraRaeDev]

So fudging rad! New to the channel but you've helped me so much! Thank you!

[@kiraPh1234k]

I love your tutorials!!

[@adriancardenosocerezo]

Great!!! Thanks men. This is incredible!!

[@motbus3]

Another excellent video!

[@ConstantDupuis]

Thank's for this

[@hamol3d]

Beautiful!

[@Vlow52]

Actually in nature Votonoi shapes are forming from circles. It’s easy to see how it works on soap bubbles, physics are just finding best shape to keep the surrounded area

[@TheArtofCodeIsCool]

I imagine that it is what happens when a growth process starts from several points at once and stops when it runs out of growth media (when it hits another point growing)

[@OutThisLife]

I like how your videos have a Firefly feel to them

[@wowatomica]

Really good and simple! Was wondering about how you would go about making this seamless until you did the second method. Ty :)

[@TheArtofCodeIsCool]

I'm glad you like it!

[@ykmukund]

Great tutorial!

[@somekindofdevil]

More videos like this pls...

[@mrdixioner]

Big thanks!!!

[@mortenbrodersen8664]

Great video. Thanks!

[@TheArtofCodeIsCool]

You are welcome!

[@jefflhama]

OMG! Finally I did it, I'm converting this to the godot shaders and of course I forgot to count that my uv has the origin in top left and not in bottom left and a lot of other things, my gosh. Thanks very much, your channel is the most easy to follow and if I was not converting it directly I will get it right in the first try.

[@TheArtofCodeIsCool]

Glad I could help!

[@toddspeck9415]

That is really cool.

[@davidm.johnston8994]

Thanks!

[@baweeditions]

Hey ! Hope you're doing fine, man. I'm just checking voronoi tuto cos I recently made a cool effect based on it, but taking the idea backwards I guess (?) I create a bunch of waves which spread out and stop when they encounter another wave. Really like your approach of shaders and visual computing. Peace from France !

[@K59820433]

Nice job

[@JasonEwton]

Excellent Content. Subbed.

[@ningno00]

thank you !!!!!!

[@32Bivens]

Never thought I'd be able to understand this pattern, but I have finally learned it thanks to you, my friend! Thanks alot! You should look into doing shaders for Unity. Unity is lacking tutorials in the shader department and there is nobody as good as you anyways. You could probably get a lot of views because Unity has a huge user base. Just showing how to transfer shaders from ShaderToy to Unity would be amazing!

[@TheArtofCodeIsCool]

I'm glad it helped! Doing a video on porting shaders from ShaderToy to Unity has been on my to do list for a while. Stay tuned, it will come soon!

[@sakuraly3880]

amazing

[@yourcommander3412]

I sorta got interested in under water caustics recently , saw a bunch of people recommending projectors in unity - but sorta wanted dive into shaders. Watched the unity crash course and stumbled upon this, feel pretty lucky. Voronoi pattern looks perfect for the effect I want to achive. Thanks.

[@TheArtofCodeIsCool]

I hadn't thought of that. Yeah it would be great for caustics. To make it more 'watery' you could also distort your uvs before feeding them into the voronoi routine. Something like: uv.x += .1*sin(10.2314*uv.y); uv.y += .15*sin(11.324*uv.x);

[@yourcommander3412]

@@TheArtofCodeIsCool Thats a great idea ! thanks.

[@Bibliothekaresse]

As a node user, to see the coders behind the functions I can so easily use in my projects, thank you!

[@__nobody__]

Recently discovered what you're doing here - great stuff! In all videos I've seen so far, you visualize stuff as color and have trouble with negative numbers being all black. Have you considered using a sigmoid function? (In case you'd have too look that up, here's some examples:) (v/sqrt(1.0+v*v))/2.0+0.5 (1.0/pi*atan(pi/2.0*v))+0.5 (v/(1.0+abs(v)))/2.0+0.5 exp(v)/(exp(v)+1.0) (…or, if component-wise evaluation is ok there's also…) tanh(v)/2.0+0.5 atan(tanh(v/2.0))+0.5 These functions map all numbers into the unit interval (0 goes to 0.5), with varying "steepness". (I've ordered them roughly by increasing "smoothness", but it's probably best to just pick the fastest and scale the (interesting parts of the) input to be in roughly -2 to +2 or something like that.) The first 4 expressions work fine for any type (float/vecN), so a #define would add just a single line of code.

[@TheArtofCodeIsCool]

Im just pointing it out to people, that black doesn't just mean zero. If I wanted to visualize it a simple abs(uv) would be good. I have never played with sigmoid functions, it seems interesting though. Thanks for pointing them out!

[@realcygnus]

Neat-O my Man !

[@linahernandezortiz3127]

If you guys want to have a rectangle instead of a square: vec2 p = ( -iResolution.xy * sin( n * iTime ) ) / iResolution.y; Thank you for your tutorials BigWIngs

[@rosenbraut]

Christopher Walken the Programmer? Well i like thatr

[@luminousdragon]

The real Christopher walken has a old youtube video tutorial teaching how to cook a turkey or something. lol. Its like ten years old.

[@Monio4]

Thanks a lot. I know this algo quite well but still learned something. One thing that I would love to know is how to find second neighbor (F2). This can be used to produce nice rock-like patterns (F2-F1), but how to compute it on 3x3 grid is a mystery for me. Maybe follow up video some day? :)

[@Monio4]

Minkowski distance metric explanation would be useful too. I know it can create Actual, Manhattan and Chebyshev distances. But how it works and why?

[@TheArtofCodeIsCool]

To do that you'd just need to keep track of three distances d1, d2 and d3. In the inner loop, just do: if(d

[@TheArtofCodeIsCool]

I tried playing with Minkowski distance but wasn't able to easily get a good result so I stuck with the two simple cases and interpolating them.

[@gillian6792]

Thx a lot for your tutorial it's very useful. I have one question about vonoroi can we calculate an ID for the cel ?

[@TheArtofCodeIsCool]

Yes, I kind of go over it in the video. if you want a proper id for the grid approach I guess in the loop, keep track of the closest offset and add it to the grid id.

[@gillian6792]

@@TheArtofCodeIsCool Thx I just don't keep the closest it work without id just the closest off but not if cel are moving. I have ideas now. So thx for video and help.

[@profhua3341]

First time i saw Manhattan distance function in WorldMachine,i thought that was a joke.Thanks so much for the pretty new world.

[@TheArtofCodeIsCool]

You are welcome!

[@bigfanjs]

FUCKING AMAZING! And very well explained! Thank you !!!

[@izuix5629]

how do you get the second closest distance for f2 voronoi?

[@samn5248]

Thanks for the great video! Quick question: In the tiled version, is it possible for points to move around the entire canvas, or does it only work if each point's coordinate is confined to its individual tile?

[@TheArtofCodeIsCool]

For the tiled version, the points have to be constrained to their tile. But I was surprised by the performance of the non tiled version, so if you want points to move more, perhaps you could just go with the first version.

[@samn5248]

@@TheArtofCodeIsCool Hi, thanks so much for your reply! Do you reckon there are no other methods to make the shader a bit faster without restricting positions? Just seems silly to have to check on every point :(

[@TheArtofCodeIsCool]

@@samn5248 You'd have to find a way to keep track of where every particle is roughly located to not have to check all points. There are algorithms like that, like quadtrees or binary space partitions.

[@user-pk6pi9sb2q]

Good vid

[@galaxyfarmer4742]

Is it possible for a pixel which its closest point is not the one that is in the nearby grids? For example , the pixel locates at the intersection of the grids and other points is at the corner of the opposite side, and meanwhile there is another point out of the nine grids and the distance is the length of grid's edge?

[@TheArtofCodeIsCool]

Yes, it is actually possible but it's just quite unlikely. If you wanted to account for this possibility you'd have to iterate through the 5x5 neighborhood instead of the 3x3 neighborhood.

[@kogorek1]

Subscribed.

[@elijahlucian]

... I watched this from the beginning, and when you clicked "go" at 6 minutes, I was STILL like "HOW TF???"

[@svens3722]

9:52 is this kinda Quadtree like what u explain ? Hey Youre the best, i was little bit scared of mathemathics in shaders but you took it quite a lot. Your Videos are Amazing. I hope youre doing good.

[@TheArtofCodeIsCool]

A quadtree is a hierarchical structure; subsequent divisions by four. That is not what I am doing in the video. I'm glad you like my videos and get something out of it. Thanks for watching!

[@StevenVanHorn]

With some vibrant colors, the manhattan distance reminded me of bismuth crystals

[@rodrigoguzmanescriba2155]

Hi, could someone answer me that, if the shader is processed by each pixel , why there are only 50 points at the screen? If each pixel execute the for loop, they shoud be 50 points for each pixel. Thank you.

[@dothefilmTV]

nice share, thanks do you plan to look at OSL one day ?

[@TheArtofCodeIsCool]

What is osl? Open shading language?

[@dothefilmTV]

@@TheArtofCodeIsCool hi, yes sorry it was obvious to me so i didn't precised it... yes it's open shading language github.com/imageworks/OpenShadingLanguage

[@chadykarlitch3975]

I'll see you next time!

[@TheArtofCodeIsCool]

yeah!

[@linuxgaminginfullhd60fps10]

Interesting. I wonder what it would look like if you used a low discrepancy sequence for random points. Also known as Sobol sequence.

[@TheArtofCodeIsCool]

Hmm.. well now I wonder too. Why don't you try it and share the results?

[@fauzilmufassa4691]

I copied your code exactly the same at 4:30 but when it ran it only produces 2 white dots, and one of them is moving. Can you help me to understand which part of your codes that decide the amount of the white dots?

[@TheArtofCodeIsCool]

Because of the way the has function works, the first point will not move, because N22(0) is always 0. You could fix that by adding 1 to i. I'm not sure why you would see only 2 dots, are you sure you typed everything exactly the same?

[@fauzilmufassa4691]

@@TheArtofCodeIsCool i am sure i copied it exactly the same. Can I send you the screenshot of my codes and the image via Email? I am sorry if it's not convenience. Also, do you think this method could predict the evolution step of grain growth in material science?

[@wassfila]

For all designers fan of voronoi, websvg.github.io/voronoi/ is an open source web based interactive voronoi editor. It can even mimic giraffe effect with turbulent noise. Using pixel rendering like in this video gives indeed more elaborate results, but using voronoi for design requires svg export which itself requires calculating cells equations in order to be able to export them in svg, and that's the challenging part handled in real time by this web tool.

[@TheAndrejP]

Cool explanation... out of curiosity though, why the if (false), couldn't you just do a block comment?

[@TheArtofCodeIsCool]

Sometimes I do if(false) because you can switch that on and off easier. I could have just done a comment.

[@remram44]

4:05 "check out this video" was there supposed to be a link there?

[@TheArtofCodeIsCool]

Yes. I see it. Its just a link to another video of mine.

[@cornoc]

little pop up in the top right corner

[@cairnedouglas6010]

P(-0.01, 0.01) A(-0.99, -0.99) B(-0.99, 0.99) C(0.99, 0.99) D(0.99, -0.99) E(1.01, 0.01) Now E is the closest point to P. But E's grid is not a neighbour to P's grid. Maybe extend iter range, or generate each point into a smaller range than [0, 1) can sovle it?

[@inevitablecraftslab]

bamm this guy is baked.

[@changemaker9751]

Manhattan distance + Euclidian distance = Minkowski distance ?

[@andreastropschug5325]

You have undefined behaviour in your smoothstep function call. (I know it is not in practice but for beginners, maybe just use the correct and intuitive one?)

[@s90210h]

Please do an infinite Voronoi zoom please!

[@TheArtofCodeIsCool]

Hmm that could be fun. I'll think about it!

[@JesseJuup]

I bet that manhattan distance would look good on a pentagonal grid, kind of like some alien computer PCB design.

[@TheArtofCodeIsCool]

Flying over a cool looking PCB with chips and stuff on it has been on my list of ideas for a long time. Manhattan distance would indeed give some usable shapes for this!

[@oresteszoupanos]

Good luck with tiling the plane with pentagons :-)

[@conduit242]

Giraffes are Zone tessellated, not Voronoi 😌 Check out “Zone Diagrams: Existence, Uniqueness, and Algorithmic Challenges” on Scholar. Quite amazing really 😁

[@wills_turtles]

Would be great to have a github gist!

[@wills_turtles]

Found it: www.shadertoy.com/view/wsGGRW

[@rt1097]

I have played this on paper.js,it needs many many code,what easier on shader~

[@flourishomotola5306]

Please what Programming Language is this?

[@TheArtofCodeIsCool]

It's glsl (webgl)

[@felicitymartineznakato6751]

Source code, please?

[@5minutemovies977]

www.imdb.com/title/tt0945513/

[@antoinefortin1386]

5:33 Da-Dit-Da-Dip

[@ArtificialDjDAGX]

6:00 really looks like the bottom of a pool.

[@TheArtofCodeIsCool]

Yeah! Thats a potential application for this.

[@cairnedouglas6010]

8:20 your gpu is so powerful :)

[@TheArtofCodeIsCool]

I guess. I really wasn't expecting to see no visible slowdown at 500 points.

[@TheRealSamPreece]

[@fadhil4008]

Me who just wanted an explanation of Voronoi texture in Blender and ended up being in a video of a guy coding something that I barely ever understand what that is

[@WeirdSide]

nice asmr

[@jamesgrimwood1285]

'if (false)' is always false, but 'if (false == false)' is always true 😀

[@TheArtofCodeIsCool]

true!

[@markusfjellheim1367]

10:00 it is possible, but unlikely that points outside the 9 by 9 grid to be the closest: ibb.co/wLwQF2x

[@spaceshipable]

I really like these tutorials, only wish that you didn't use single letter variables. The code becomes super difficult to read after a while.

[@TheArtofCodeIsCool]

Longer names have some advantages, but also some disadvantages. For one, they take a lot longer to write, making the video longer. They also make stuff harder to read when its used multiple times inside of a formula. The other thing is that many one or two letter vars are almost a convention and they are used in many shaders (p=position, d=distance, ro=ray origine, etc)

[@spaceshipable]

​@@TheArtofCodeIsCool The main disadvantage I encounter is that I have to keep referring back to what each variable means, which in turn makes the video longer. Whenever I am reading code, I'd rather read a long descriptive variable name than a cryptic one. I write mostly c++ and I think our liner doesn't even allow less than 3 character variable names

[@TMPreRaff]

HEY.

[@vicwaberub5297]

50 Points: Fast. 500 Points: Fast. Hm. Does the GPU the job?

[@EnergeticWaves]

you look like Christopher walken

[@jan-hq1yw]

jduf

[@imrezsigmond5811]

Content is great but code readability is horrendous, can you imagine trying to figure out a bug in a code like this?

[@Kavukamari]

i think that's just how shader code is sometimes lol

[@TrasteIAm]

i will just leave now, ok?