Voronoi Explained!
ฝัง
- เผยแพร่เมื่อ 11 ก.ค. 2018
- 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. - วิทยาศาสตร์และเทคโนโลยี
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!
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.
the same feeling, i think he is interesting
don't know why youtube recommended me this, i barely do anything with shaders, but it's still super interesting.
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!
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!
this vid is a gem! thanks for sharing!
Best Voronoi explanation i've seen, thank you!
Still thE best intro/tuts on the subject out there imo. Priceless !
Your videos are incredible, thank you so much for doing what you do!
Really like your hands-on teaching. Less theorizing, more code!
Been bingewatching your videos for the past few days.
How did I missed this??
Really appreciate this valuable series.
Thanks
Thanks! Well done, easy to follow, good work as usual!
Thank you very much for the great tutorial. I hope you will make more tutorials
Love the explanation and simple code. You've earned another sub. 👍
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.
Thank you Martijn for this great explaination !
Your videos are getting better and better :)
Aww thanks man!
You make Voronoi simple and crazy!
Thanks for your great work!
My pleasure!
I'm huge fan of your channel!!! Thanks dude!
Awesome! :)
Thank you very much for demystifying this stuff! It is so hard to find good sources on shader math.
Thanks for this video! I'm new to coding shaders and this was very helpful.
Great!!! Thanks men. This is incredible!!
So fudging rad! New to the channel but you've helped me so much! Thank you!
I love your tutorials!!
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.
More videos like this pls...
This is so cool, Voronoi isn't magic anymore, I could see this kind of tutorials for hours, thank you!
Another excellent video!
I like how your videos have a Firefly feel to them
Great tutorial!
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
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)
Really good and simple! Was wondering about how you would go about making this seamless until you did the second method. Ty :)
I'm glad you like it!
Excellent Content. Subbed.
Nice job
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 !
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.
Glad I could help!
Great video. Thanks!
You are welcome!
Beautiful!
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!
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!
Thank's for this
That is really cool.
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.
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!
Big thanks!!!
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.
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);
@@TheArtofCodeIsCool Thats a great idea ! thanks.
Christopher Walken the Programmer? Well i like thatr
The real Christopher walken has a old youtube video tutorial teaching how to cook a turkey or something. lol. Its like ten years old.
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? :)
Minkowski distance metric explanation would be useful too. I know it can create Actual, Manhattan and Chebyshev distances. But how it works and why?
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
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.
Thanks!
FUCKING AMAZING! And very well explained! Thank you !!!
Good vid
As a node user, to see the coders behind the functions I can so easily use in my projects, thank you!
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
Thx a lot for your tutorial it's very useful. I have one question about vonoroi can we calculate an ID for the cel ?
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.
@@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.
amazing
Neat-O my Man !
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?
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.
@@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 :(
@@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.
Subscribed.
First time i saw Manhattan distance function in WorldMachine,i thought that was a joke.Thanks so much for the pretty new world.
You are welcome!
nice share, thanks
do you plan to look at OSL one day ?
What is osl? Open shading language?
@@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
thank you !!!!!!
Interesting. I wonder what it would look like if you used a low discrepancy sequence for random points. Also known as Sobol sequence.
Hmm.. well now I wonder too. Why don't you try it and share the results?
how do you get the second closest distance for f2 voronoi?
... I watched this from the beginning, and when you clicked "go" at 6 minutes, I was STILL like "HOW TF???"
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?
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.
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.
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!
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?
With some vibrant colors, the manhattan distance reminded me of bismuth crystals
Cool explanation... out of curiosity though, why the if (false), couldn't you just do a block comment?
Sometimes I do if(false) because you can switch that on and off easier. I could have just done a comment.
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.
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?
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?
@@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?
I'll see you next time!
yeah!
4:05 "check out this video" was there supposed to be a link there?
Yes. I see it. Its just a link to another video of mine.
little pop up in the top right corner
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?)
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.
Please do an infinite Voronoi zoom please!
Hmm that could be fun. I'll think about it!
Manhattan distance + Euclidian distance = Minkowski distance ?
Giraffes are Zone tessellated, not Voronoi 😌 Check out “Zone Diagrams: Existence, Uniqueness, and Algorithmic Challenges” on Scholar. Quite amazing really 😁
Would be great to have a github gist!
Found it:
www.shadertoy.com/view/wsGGRW
bamm this guy is baked.
I bet that manhattan distance would look good on a pentagonal grid, kind of like some alien computer PCB design.
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!
Good luck with tiling the plane with pentagons :-)
I have played this on paper.js,it needs many many code,what easier on shader~
8:20 your gpu is so powerful :)
I guess. I really wasn't expecting to see no visible slowdown at 500 points.
6:00 really looks like the bottom of a pool.
Yeah! Thats a potential application for this.
Please what Programming Language is this?
It's glsl (webgl)
Source code, please?
www.imdb.com/title/tt0945513/
5:33 Da-Dit-Da-Dip
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
nice asmr
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.
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)
@@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
'if (false)' is always false, but 'if (false == false)' is always true 😀
true!
50 Points: Fast. 500 Points: Fast. Hm. Does the GPU the job?
HEY.
10:00 it is possible, but unlikely that points outside the 9 by 9 grid to be the closest:
ibb.co/wLwQF2x
you look like Christopher walken
Content is great but code readability is horrendous, can you imagine trying to figure out a bug in a code like this?
i think that's just how shader code is sometimes lol
jduf
i will just leave now, ok?