Perlin Noise Explained Tutorial 2
HTML-код
- Опубликовано: 13 янв 2017
- Noise Tutorials: Tutorial 2 - Perlin Noise Explained
Previous tutorial: Tutorial 1 - Random Noise Animation by using Java • Random Noise Animation...
Next tutorial: Tutorial 3 - How To Use Perlin Noise Algorithm? • Perlin Noise Algorithm...
Improved Perlin noise article: mrl.nyu.edu/~perlin/paper445.pdf
Improved Perlin noise algorithm: mrl.nyu.edu/~perlin/noise/
Our website: fataho.com
You can contact us via email: info@fataho.com
![[Explained] Perlin Noise and Unity](http://i.ytimg.com/vi/BO7x58NwGaU/mqdefault.jpg)
![[Explained] Perlin Noise and Unity](/img/tr.png)
This is literally the only good explanation of Perlin Noise I could find on the web. Most people who try to teach this stuff either leave out big gaping gaps of essential information (probably because they falsely assume that the viewer already knows it) or they use technical jargon only relevant to one particular coding language (usually Python, Java, or C++) or they claim to explain it and proceed to show they don't actually understand it themselves.
This is a great video. Without it, I'm not sure what I would do! Thanks for posting!
This tutorial is a god send for me. I was trying to understand Perlin noise and thanks to you, now I do. Thank You. Thank You.
+1
It's really interesting to compare this to the coding train's series of videos on Perlin noise. While coding train has production value coming out the ears, and is obviously a skilled, interactive teacher, this video is so much better for actually learning how to implement Perlin noise. Straight to the point, and easily understandable. Great job.
Thank you for the kind words that really means a lot to me.
Wow… the only tutorial I have found that seems like it was made for actual humans, who don’t already know how perlin noise works; thank you sir
Should the x and y on the third distance vector at 15:50 is 0.75 for x and -0.75 for y not the opposite?
7 years later, thank you, I live randomness and perlin noise is one of the things I wanted to learn
I'm so glad I found this video, I never fully understood Perlin noise, and I just used as a "black box" like you said, without really knowing enough to make my own custom noise function if I wanted to.
This was the best explanation of Perlin Noise I've ever seen. Thank you so much! I only needed to watch the video once and I completely understood
I have been looking for this video for dozens of minutes, great content!
Holy crap, this is by far the best explanation I've seen you should contribute to Stack Overflow Documentation on Perlin Noise.
Thank you
Watching this on 2x speed 2 minutes before my graphics final exam.... thank you!
May I ask what was your exam like? Did it really ask about the algorithm of Perlin Noise.
By far the best video I've seen about both how to use perlin noise and how it works
I have tried to understand Perlin Noise for a long time, this has helped me alot. Thanks
I am glad it helped.
so much better than the wikipedia page
Clearest explanation for me so far. Thank you so much. Also, great dev log!
I got my Perlin noise algorithm up and running today thanks to this video. thank you so much!!!!!
This is amazing and exactly what I needed, thank you!
what did you use to make the grid visuals? I want to try and explain the vector math of perlin noise for my Math IA, and i'd appreciate being able to make the visuals myself too...
This is a truly fascinsting topic. This was the only video I found that explained from the ground up! Very understandable and moves at a perfect pace; not too slow that it drags but also but not too fast
Thank you. This topic is indeed very interesting and more importantly it is very useful - there are so many things that can be done with noise algorithms.
Awesome lecture, thank you
Nice tutorial, that was great and very detailed explanation.
Great video man, the most clear explanation I have found!
Thank you.
I really like what you are doing here, especially the Arnold dialect. Hope You'll Be Back with some new tutorials soon.
i used opensimplex's perlin noise for my project but i wanted to understand how it works, thanks for the great video
Thank you. You made this so simple!
Great explanation, thank you!
really good tutorial. thank you so much for the effort!
russian math made this guy's accent seem totally normal to me at first.
Very nice explanation, thank you!
Amazing video. Thank you!
Real life saver for me, thank you very very much!
Very good job. Exceptionaly simple and exhaustive explanation.
Very nice tutorial, thank you! Keep up the good work!
Thank you. I will try to do that.
thank you for a greatly in depth explanation, really helpful!
I am very glad it helped you.
Is the "improved" part the random vectors being controlled ?
this is brilliant. please make more tutorials these help so much
I am very glad you like it. I will definitely do more tutorials.
Thankyou so much for such brilliant explanation! It cleared so many doubts. Could you make one on opensimplex noise too & possibly differentiating the complexity aspect and visual aspect of both classic n open simplex noise would be great too! Thanks:)
Ty for the explanation man :)
This was Great!
Is the fade function some sort of Taylor Series approximation?
Вэри гуд пронанциэйшн, просто конфэта
Ай донт андэрстэнд ведзер ю сейд ит айроникалли ор ю вер комплиментинг. Бат ю готта чек оут Борис бикоз хиз проносиэйшн из ивен ворс
Thank you for that great explanation. It helped me a lot. If I may at 16:02, for D3 the D vector values are in reverse order. the dot product value does not change by the the fact that th G vector is (1,1) .. ;)
Very fine. Thank you!
Wow, that is had to took ages to make :D + for effort for sure :) thanks
good tutorial, informative, thank you again:-)
I don't understand where the gradient vectors come from. Do you take two random numbers from a set of random numbers for each gradient vector? How would you be able to generate a large terrain and then walk the terrain away from origin and come back and it will still be the same? It seems like you must use a random generator to get values, but I don't get how how to use these random values in a way so that the terrain doesn't change if you leave a section and come back.
it use permutation table
first you need to make an array (call it permutation array) of sequential numbers starting from 0. so in example in array of length 10 it would be like this {0, 1, 2, 3, 4, 5 ,6 ,7, 8, 9} and then shuffle them all randomly {2, 5, 1, 3, 9, 4, 6, 8, 7} then when you need a gradient for a corner use the corner position. in 2d the most comment way to do is:
gradTable[ permTable[ permTable[ x % permLength] + y & permLength ] % gradTableLength ]
where "gradTable" is the array that hold the gradients and "gradTableLength" is its length
and "permTable" is permutation array and "permLength" is its length
also this notation "%" means modulus operation to make sure number are in range.
sorry if the explanation isnt clear but i hope its good
you can see another example of using permutation table in another way (same idea)
mrl.cs.nyu.edu/~perlin/noise/
EDITE: sorry the modulus operation is % not &
Awesome! Thanks.
Thank you for this fantastic tutorial, it really explained everything I needed to know. Did you considered also explaining Simplex Noise? I would very much appreciate it.
For anyone interested, here is the best explanation I found so far: weber.itn.liu.se/~stegu/simplexnoise/simplexnoise.pdf
Great explanation! Thanks a lot! :)
I am glad you liked it!
btw what is the license for your Perlin noise code on Github? I am currently implementing it by myself using your video, but just in case...:) [I plan to use Perlin noise in my MS thesis]
I do not know much about licenses, however you can use my code for what ever reason you like. If your work is related to Perlin Noise, you should cite Ken's Perlin article in your thesis.
Sure, I will [I am implementing map generator], but anyway will cite your resources too :) Thanks!
Хорошо пояснил, спасибо!
Wonderful
Thanks for the nice video :)
What I don't completely understand is why we use an random number table instad of random generated numbers ( like in Java Math.random() )? As far as I understood the contains the table random placed values between 0 and 255. has it something to do with the grey values?
it's mostly to do with absolute randomness. built-in functions like Math.random() aren't strong random number generators leading in a bad perlin noise. a random number table guarantees a good amount of randomness. i'm not aware of a way to quantify it but yea.
very very good :)
thanks alot
Awesome!!!
Good job, thx
Is that a typo at 14:55 for the gradient vector? It says G(-1,1) but the orange arrow is clearly going down the y-axis. Shouldn't it be G(-1,-1) instead or is there something I'm missing?
EDIT: Actually, even the distance vector says D(0.75,0.25) but the green arrow is tilted "down". Shouldn't it be D(0.75,*-0.25*) instead?
Thank you for the good question. It is hard for me to remember, but I think it does not matter. If you choose G(-1, -1), when D will be (0.75, -0.25) and not (0.75, 0.25). In this case G(-1, -1) and D(0.75, -0.25) dot product you will be the same as G(-1, 1) and D(0.75, 0.25), which is -0.5.
Thanks for the reply and that DOES make sense.
However, I can't seem to wrap my head around which needs to be negative and which should not, specially at 15:48. My problem is that I can't find an example where the gradient is G(positive,positive) with a distance of D(positive,positive) this causes a problem with a >1 Dot Product that, even when interpolated, causes >1 output.
Thanks again for replying!
Write me (info@fataho.com) your calculations, where you get output >1. I will look through it.
Hi again... sorry for being such a bother... I've figured out that yes, you are correct. Any DotProduct that exceeds (-1,1) is eliminated after the interpolation. Thanks for that!
Now, I'm dealing with a different problem with the Gradient Vectors. I was trying to manually do the formula at (15:50) and I got the same results. However, I wanted to try using a different set of orange arrows as vectors, I tried it will all the Gradients pointing at (1,1) instead.
I got the following Dot Products for Pixel (0.75,0.25)
D1 = G(1,1) D(0.75,0.25)
D1 = (1*0.75) + (1*0.25)
D1 = 1
D2 = G(1,1) D(-0.25,0.25)
D2 = (1*-0.25) + (1*0.25)
D2 = 0
D3 = G(1,1) D(-0.75,0.75)
D3 = (1*-0.75) + (1*0.75)
D3 = 0
D4 = G(1,1) D(-0.25,-0.75)
D4 = (1*-0.25) + (1*-0.75)
D4 = -1
Now following the Interpolation formula at (16:10)
AB = D1 + 0.75 * (D2 - D1)
AB = 1 + 0.75 * (0 - 1)
AB = 1 + 0.75 * (-1)
AB = 1 + (-0.75)
AB = .25
CD = D3 + 0.75 * (D4 - D3)
CD = 0 + 0.75 * (-1 - 0)
CD = 0 + 0.75 * (-1)
CD = 0 + (-0.75)
CD = -0.75
Value = AB + 0.25 * (CD - AB)
Value = 0.25 + 0.25 * (-0.75 - 0.25)
Value = 0.25 + 0.25 * (-1)
Value = 0 (?)
I don't think I should be getting zero here, and if I try it at any other coordinate. I feel like I'm missing something so obvious and I feel stupid for bothering you again just for it, so even if you don't reply I completely understand and would want to thank you for all the help you've given so far, but if you DO reply, that would be very much appreciated.
I made a spreadsheet to demonstrate my problem:
docs.google.com/spreadsheets/d/16aDEr6T9Jv82YNCMaCgrImKTAcj1AxdO7mg5YqsLuUI/edit?usp=sharing
what is the g-> supposed to mean?
It was a really good tutorial, but I still don't understand what is the purpouse of the linear interpolation in the process. You do that linear interpolation with every single pixel on the grid, on depending on the value you give it a color?
For each pixel, you have 4 dot products with each coming from one of the corners of the square the pixel is in.
What the interpolation does is that it combines these 4 products you have into one result, where the one coming from the nearest corner of the square should matter most.
Great video. I have a few questions: Am I right in saying the dot product values range from -2 to 2?
Is FracX basically the x-component of the distance vector (same goed for FracY)?
Once you calculated the linear interpolation value, you then put that value in the Fade Function, right?
I know this video has been uploaded for quite a long time, so I hope you’ll still have time and you’ll still be able to see this and respond :)
Hi, thanks for the great questions.
1. I think yes. But I paste here some info from stackoverflow.com: "When you calculate dot product, you may get values outside -1 +1 range, however during interpolation step, final value falls in -1 +1 range. This is because distance vectors of dots products that are interpolated point into opposite directions of interpolated axis. During the last interpolation output will not exceed -1 +1 range." At least this is how I remember, but if you want to be sure 100%, do the math and also tell me :D
2. Yes.
3. Yes.
I also recommend to watch my 4th tutorial: ruclips.net/video/iW4nFygKAjw/видео.html, because the programming part is very counter-intuitive compared with theory.
Fataho thanks for your quick response! I have watched some parts of your fourth tutorial but the implementation where I need it for is a lot different. So I prefer to use this tutorial to understand how it works and then work out the ‘code’ by myself. Now my response on your answers:
1) Yeah that’s exactly what I had guessed that would happen. I haven’t actually done the maths to prove if it’s indeed exactly like this, but I’m pretty confident it is.
2) After the time I made my first comment I had rewatched this video a few times and I think what I said at my second question isnt correct. Because there are 4 distance vectors (1 for each corner in 2D) so fracx and fracy would be the x and y component of the distance vector from to origin to the local pixel position. (I think this is the correct way of phrasing it, right?)
3) Just to get this clear to me, exactly which values do I need to pass through the fade function? Cause initially I thought the end product of all the linear interpolation steps (called Value in the video) needed to go through the fade function. Then I realised that doesnt range from 0 to 1 so I thought I had to put fracx and fracy through the fade function. But now i’m actually not quite sure. In short; could you explain which values need to go through the fade function?
Thanks for your time and help :)
2. Yes.
3. You have to add fracX and fraY values into the fade function. These values are adjusted a little bit by the fade function, so when you use them later in linear interpolation you will not get these rectangle artifacts. All squares become connected smoothly.
If I remember correctly, the fade function is not necessary, if you use slower cosine interpolation. However I think fade function + linear interpolation is faster compared to cosine interpolation alone.
Эх Ёзас, рассказал бы ты тоже самое по-русски, цены б тебе не было бы!
so you say minecraft terrain is a series of dot products? simple enough!
Why does it have an attribute called frequency? Frequencies should be measured in Hz right? How come?
Replace time with space and you get "spatial frequency".
Well, the frequency that I use the toilet is not measured in Hz...
@@vial7912 it could be with a sample size large enough. An average of twice per day is equal to 1/43200 Hz
is the improved Perlin noise free to use , can I use it in a commercial program legally . If not what is the alternative . Thank you.
It is very good question and I do not have 100% answer to it. According to Wikipedia:
"Perlin did not apply for any patents on the algorithm, but in 2001 he was granted a patent for the use of 3D+ implementations of simplex noise for texture synthesis." however wiki does not tell anything about improved Perlin noise.
I have found something here, but I am not exactly sure if this is the right patent:
www.google.com/patents/US6867776
If you still will have problems in finding required information, you can contact author himself, check his webpage:
www.kenperlin.com/
If you will find the answer, you are welcome to share it here. I am sorry that I could not help you more.
Thanks for the reply . Can you suggest some other function that produces similar kind of result but is free to use . At this point I am using Perlin noise to produce smooth motion in a 2D and 3D plane instead of using random function which does not produces smooth motion .
As far as I know, you cannot patent algorithm, you can patent only implementation of it for something, for instance, for texture generation, therefore it is most likely that you can use all of them for smooth animations.
I am almost (99,9%) sure that Perlin Noise original algorithm is free to use and for smooth animations it should work just fine. Also you can try Value noise (again, I am almost sure that it is free to use):
web.archive.org/web/20080724063449/freespace.virgin.net/hugo.elias/models/m_perlin.htm
Even more algorithms (c++ source code included) can be found here (Check Perlin noise algorithm):
code.google.com/archive/p/fractalterraingeneration/
For 100% certainty you will have to do some research by your self.
can you give any link to the Perlin Noise original algorithm code . that would be helpful .
code.google.com/archive/p/fractalterraingeneration/wikis/Perlin_Noise.wiki
And here you will find a source code:
code.google.com/archive/p/fractalterraingeneration/downloads
Great tutorial, it helped me understand a lot of things, thank you for that.
But now there something i don't get: When you do the bilinear interpolation.
Correct me if i'm wrong but, what i understand is, you do Twice the linear interpolation of the corners and the point. But if you do that you get 2 values. How do i put them together? Is it a simple multiplication, or am i missing a formula?
I think you also need interpolate these 2 values, which you get. See 16:33 there is a 2 blue interpolations and one green interpolation.
@@MajinHico Oh yeah, i get it now. I thought you only had to interpolate once on the X axis, but in fact, you have to do it twice. And then, as you said, re interpolate these 2 values to get the final one. Thank you !
What is FracX and fracY? (Awesome tutorial)
the fraction X and Y coordinates of where the pixel is in the square. at 16:08, it is labeled on the edges of the square. at 13:07 he explains it with the visual.
Great tutorial although sometimes you could work on your wording but otherwise great!
Thank you, I am working on it.
what does fracX and fracY mean ? (16:10)
They are the decimal parts of your input x and y. For noise(1.45, 7.25), fracX = 0.45 and fracY = 0.25
The idea behind FracX and FracY is the same.
So, if you look at the formula below FracX:
If FracX = 1, then the output of the entire formula is equal to DotD
if FracX = 0, then the output is equal to DotC
if FracX = 0.5, then the output is the average, or a perfect blend, between DotC and DotD
That being said,
If the x-coordinate of DotC = 1 and the x-coordinate of DotD = 2
then if the x-coordinate of FracX = 1.70, we can subtract the x-coord of DotC from the x-coord of FracX
making FracX = 0.70, making the output of the formula more heavily weighted towards DotD.
I know this is old video. But i watch other videos they saying noise function out put is between 0 and 1 but here its is -1 and 1 can't understand
It's not a problem in most cases. Usually only one implementation is used in a project and the output is commonly mapped to a different range, specific for use.
The output of the dot product is -1 to 1 which is a used in Perlin Noise, but generally the output is shifted to 0 to 1 in order to be used as pixel values.
To remap the range from (-1 to 1) to (0 to 1) use return 0.5*(noise + 1) instead of return noise at the end of your function.
I believe the original implementation was a range from -1 to 1. Many new ones may shift that to 0 to 1 to make it slightly easier to use though
Нихуя у тебя акцент, брат. Спасибо за объяснение
is error at 10:10? should scale 8x8 be top = square and 8x2 bottom = rectangle? i like the tutorial to understand
If I understand your question correctly, I can say that there is no error, because 8x2 results in top image and 8x8 in bottom. Everything depends on the image height and width. If you want 8x8 to be non-stretched you should use same length for the with and the height of the image. For instance, 1024 x 1024 image will be non-stretched if we use 8x8. If the image size is 1024 x 128, you will have to fit 8 rectangles to 128, which would lead to stretched image. For better understanding, you should try to do Perlin Noise programming by your self and try various options. See Tutorial 4 for programming part. I hope this helps. Do not hesitate to ask if you have more questions.
I don't understand the outputs. You use a function which require a number in the range of [0,1], but the output of perlinnoise you made is [-1, 1]. How come?
Hey. Thank you for your interest in Perlin Noise. Could you be more specific about which function you are talking? You can add negative values in PerlinNoise function, see this part of the tutorial 3:47
The fadefunction
I see now. Thank you for a good question. You add fraction values of one rectangle (0 to 1) in the fade function, this values are later modified by dot and linear interpolation functions, which leads to -1 +1 final output. See my 4th tutorial, where I show step by step how to write 2D Perlin noise code in Java. In this tutorial I tired to explain the principle how the algorithm works, however the implementation in programming language is not that straight forward.
I will check it out. Have been trying to figure out perlin noise for the past two weeks, so hopefully it helps :)
Emil Hansen, Perlin noise can be hard to understand and most of the ppl fail to do so. Based on your good question I can see that you are in the right direction. Implementation part may be hard too, especially dot product part, but keep going, you are not that far. Do not hesitate to ask if you have more questions.
*_OUR_* perlin noise
ahahhaha i see what you did there...
Hi, I'm having some doubts related to the fade function. Fisrt of all, we must substitute the pixel value in the function to obtain a new value in order to get the fade effect? And if it is like this, how do we apply it to negative values? The fade function doesn't wprk with them. Thank you.
I think the fade function is used to calculate the new interpolation "position" between the points for the linear interpolation, which will always be between 0 and 1 (0 = beginning, 1 = end). The actual values what we want to interpolate is completely irrelevant for the fade function, in this case.
While it will still be a linear interpolation, we won't sample it with linear "speed", but slowly accellerate towards the center and then decellerate for a smooth and slow finish.
The fade function is very hard to understand how to implement :/ btw, great tutorial!
Hello. I have created tutorials how to implement Perlin noise with Java programming language.
ruclips.net/video/5NSaDKqL22I/видео.html
ruclips.net/video/iW4nFygKAjw/видео.html
In the last one (at time 13 : 40) I talk a bit more about fade function. I you still will not understand it, you can write me an email info@fataho.com and tell me a bit more about your problem and I will try to help you.
1:26 oks like the old netherrack texture from minecraft
Thumbs up for Microsoft Paint. RIP
thumbnail looks like a dancing square
Well, Perlin noise is a dancing squares (cubes)
You sound like you almost care.
Русский шоле?
дада, похоже)
Understood... Nothing.
Perlin Noise can be hard to understand. If my tutorial was not clear for you, maybe you should try this one: flafla2.github.io/2014/08/09/perlinnoise.html
I hope it helps.
Praise Mother Russia, Commrade!
@EpsilonDeltaCriterion Ok
@EpsilonDeltaCriterion whut? who is Allah?
Sounds like crap
Lol ok i1234567i i2345678i