I figured on my own how to make 4 Perlin Noise generators in PYS60 (Python for Nokia) many years ago. The first one is from having a floating-point variable representing the bell curving offset by at least by 5 pixels to see it beautifully. The 2nd and 3rd is quite the same as the 1st... but made into 2D and 3D. The 4th... is from layering sine waves of various sizes which I can have absolute control of... and also can seamlessly wrap around, able to even make animated 3D blobs.
Thanks for your response! Here are my (rather lengthy) questions. I’m not a programmer and all the questions below are purely for mathematical understanding purposes. I also skipped all the coding parts because I don’t understand them. ----------- Q1. 3:21 People call this random vector (arrow) as “Gradient” Vector, do you have any idea on why it’s called that? Is it because it’s involved in the Dot Product to create values that form a gradual transition (aka a “gradient”) inside a cell (aka grid tile)? ----------- Q2. 3:28 You said that the Dot Product values inside a cell has the Range of [0,1], but there’s always a chance for Dot Product to output negative values, isn’t it? ----------- Q3. (Please read the whole Q3 before answering) 3:30 About the “4 cells forming *ONE* gradient”, doesn’t *EACH* (sorry, I'm not screaming, I'm emphasizing) cell have its own “gradient”? Like it’s illustrated in this video's timestamp here: ua-cam.com/video/ZsEnnB2wrbI/v-deo.html As explained in many other videos, the visual “gradient” we see is formed by placing hundreds of pixels (that are evaluated by performing Dot Product between one Gradient Vector and hundred of distance vectors) together. Each cell (aka grid tile) possesses 4 Gradient Vectors at its 4 corners, if we are using only 1 out of 4 to create a “gradient”, that means each cell has a completely separate “gradient” (4 Gradient Vectors means 4 different “gradient”) from the neighboring cells, that means there will be a sudden jump in value at the border in between 2 cells, leading to the visual that you see in the link I sent above. To visually smooth out those “sudden jumps”, we use Linear / SmoothStep / SmootherStep Interpolators. Does *your* Perlin Noise use the same algorithm that I addressed above? If it does, then there’s no way that the gradients of 4 adjacent cells would connect that smoothly as you illustrated. Also, if the transitions of values between cells were that smooth, then there would be no reason for any interpolator to be involved because there’s no sudden transitions at the borders. OR, were you showing what it would look like if *ONE* Gradient Vector was used to perform Dot Product with *ALL* distance vectors across *ALL* cells instead of just the distance vectors inside of *ONE* cell? ----------- Q4. I’ve watched and read almost 20 videos / articles and you are the only person to say that Perlin Noise function interpolates the Dot Product values using Cosine Interpolator, whereas all other resources said the interpolators were either SmoothStep or SmootherStep Interpolator. Or is your video here specifically made for Unity’s Perlin Noise implemented function? I’m not familiar with Unity though. ----------- Thank you so much!
Q1. A random unit vector (arrow) is not a gradient vector until you get the dot product involved. A unit vector is strictly an arrow with length 1 and a direction. The dot product is what makes it a gradient vector.
Q2. Correct. The dot product outputs a value from -1 to 1 if using the unit vector and an input coordinate with less than length 1 . I may have explained it poorly in the video, but you can see at the time stamp the values are originally from -1 to 1 but I say “the values are then shifted to 0 to 1” which is a somewhat incorrect statement to make as the value isn’t shifted until the last step. But for explanation purposes it kinda works out.
Q4. Yes smooth step is more common and probably the correct way to do it. Years ago when I wrote my first Perlin Noise algorithm I had quite a few gaps in my knowledge that I filled with poor research. Earlier this year, because of a request in my discord, I wrote a new Perlin Noise script and started editing a new video overviewing the correct algorithm but was scrapped because ChatGPT came out and for quite a while I've had the mood of "Why make a video, they can just ask ChatGPT to write the script for them". But if you are interested, here is the algorithm I wrote in JavaScript using p5js for that video: github.com/BearTheCoder/p5/blob/master/Perlin%20Noise/VanillaJS/main.js
Q3. Is a dense one, and something that I would like to talk at length using discord. discord.gg/aeAukyWn You are not wrong, but also not right. Probably more of a misunderstanding. If we take a single point on a grid, let's say (1, 1), that single point is the center of the dot product. Which is why if you reference whole number coordinates in a Perlin Noise algorithm, the result comes back 50% gray every time. But also at the same time, if you are observing the gradient vector around (1, 1) with an angle of 45 degrees, if you pull the dot product from a coordinate closer to (2, 2), the output will be closer to 1 or "white", if you pull using a coordinate closer to (0, 0) it will be -1 or "black". Meaning that the gradient spans 4 grid tiles centered around (1, 1). So, when you refence a pixel at location (0.2, 0.4) or (1.5, 1.2), they both will reference the same gradient that is at (1, 1). This is also why if you put the same values into a Perlin noise algorithm, the result will always return the same. Also this is why you can feed Minecraft (which is basically Perlin Noise the Game) a seed and end up at the same spot every time although the world is fairly endless. As far as the actual output, yes, if we pull the value for (0.2, 0.4) the output will be an combination of values from the gradient at (0 0), (0, 1), (1, 0) , and (1, 1)
This video would have been great to see two years ago. I also home brewed a Perlin noise function for a game I’m making. For my random function, I had a very long array deterministic “random” values, and I pull values from the array using a sort of shifting cipher algorithm, so that the values don’t repeat themselves as I get farther away. Otherwise it just uses normal bilinear interpolation.
this tutorial was confusing or im stupid but why is it looking around for neighbouring points and they are all aligned so wont it make so it will be 0.5?
@@BearTheCoder 3:36 i understand why its 0.5 but if i divide sample points by 2 for coordinates wont they point still be aligned so they gradient will stay the same? im sorry if im being stupid
@@rediculaid Ok, I think I know what you are thinking. Each pixel of Perlin noise, when taken in the context of 2d noise, is a combination of 4 different gradients, one for each adjacent coordinate. So, I think what you are asking is, why isn't the output the same as the gradient shown, how do we get perlin noise and not the gradient? Because, the sample's coordinates doesn't change, but the context from which we are grabbing the sample changes based on the coordinate and the angle assigned to the coordinate. The sample's location, the coordinate, and the angle are then used to determine the gradient using the dot product. So, for that one sample you are give 4 different numbers 0.25, 0.1,0 .9, and 0.7 for example, and then those are blended together. It can be confusing not understanding the math, if you want, join my discord and I can explain it in more detail if you want. discord.gg/mZ5vKkS7
a good way to visualize it is: the dataset that the model uses is like a bucket of legos. the algorithm is told to create a certain type of structure, so it looks at other structures like the one it's being asked to make, then picks up the pieces used to make those previous structures and throws something together. essentially its looking at things it knows about the prompt subject, chopping up all the elements making up those images, then attempts to imitate the qualities with those elements, picked out randomly. im sorry if this made you even more confused lmao im not a very good explainer
Here’s an example using JavaScript but it should be the same in any other language. Basically you add another for loop that iterates over the amount of octaves you want and change the input with a opacity and frequency value. Hard to explain, hopefully the code will be enough to get you going.
You don't need to act like most people are so afraid of math. I can guarantee that most people clicking on a perlin noise video are not afraid of dot products etc. And most of us are probably enthusiastic about math. Good vid tho
> here is a screenshot of a code if you want to copy it
Ah, I see you're a man of culture as well
WHAT
i looked down at your subscription counmt and you desperately need about a thousand times more
PLEASE make more
I’m working on it!
Thank you!
Awesome video! really well explained and clear to understand and focus on. sad there hasnt been a part 2 released yet tho.
I’m sorry 😭part 2 has been in the works for months. I’m just a lazy creator.
Great and professionally presented video!
May I ask you some mathematical questions regarding some parts of your video?
Thank you.
Of course, I may be a bit rusty, but the math is still in there somewhere.
what a nerdy video. loved it. also, very well explained.
Good explanation in this video! Sebastian's videos are good but your explain it a lot better! Hope part two comes soon :)
Thank you! Part two should come out in the next few months! I am working on it!
Nice work, really !! Still waiting for part 2
Part 2 coming soon!
Why do you have so little followers? This is a top notch coding UA-cam channel, you should have blown up by now!
Huge compliment! Thank you!
I'm looking forward for the next part!
How your videos are such underrated
:') Thank you.
Your videos are amazing you deserve more views!
Your videos are awesome. Keep it up! :)
Thank you! I have a lot of fun making them!
Awesome video! Thanks dude
+1 sub
*Don't be discourage from nerding out ;)
very very nice
Nice 1984 reference, touché! (2+2=5)
I figured on my own how to make 4 Perlin Noise generators in PYS60 (Python for Nokia) many years ago.
The first one is from having a floating-point variable representing the bell curving offset by at least by 5 pixels to see it beautifully.
The 2nd and 3rd is quite the same as the 1st... but made into 2D and 3D.
The 4th... is from layering sine waves of various sizes which I can have absolute control of... and also can seamlessly wrap around, able to even make animated 3D blobs.
Amazing
Thank you very much!
I love the videos
Thank you!
Thanks for your response! Here are my (rather lengthy) questions.
I’m not a programmer and all the questions below are purely for mathematical understanding purposes. I also skipped all the coding parts because I don’t understand them.
-----------
Q1.
3:21 People call this random vector (arrow) as “Gradient” Vector, do you have any idea on why it’s called that?
Is it because it’s involved in the Dot Product to create values that form a gradual transition (aka a “gradient”) inside a cell (aka grid tile)?
-----------
Q2.
3:28 You said that the Dot Product values inside a cell has the Range of [0,1], but there’s always a chance for Dot Product to output negative values, isn’t it?
-----------
Q3.
(Please read the whole Q3 before answering)
3:30 About the “4 cells forming *ONE* gradient”, doesn’t *EACH* (sorry, I'm not screaming, I'm emphasizing) cell have its own “gradient”? Like it’s illustrated in this video's timestamp here: ua-cam.com/video/ZsEnnB2wrbI/v-deo.html
As explained in many other videos, the visual “gradient” we see is formed by placing hundreds of pixels (that are evaluated by performing Dot Product between one Gradient Vector and hundred of distance vectors) together.
Each cell (aka grid tile) possesses 4 Gradient Vectors at its 4 corners, if we are using only 1 out of 4 to create a “gradient”, that means each cell has a completely separate “gradient” (4 Gradient Vectors means 4 different “gradient”) from the neighboring cells, that means there will be a sudden jump in value at the border in between 2 cells, leading to the visual that you see in the link I sent above.
To visually smooth out those “sudden jumps”, we use Linear / SmoothStep / SmootherStep Interpolators.
Does *your* Perlin Noise use the same algorithm that I addressed above? If it does, then there’s no way that the gradients of 4 adjacent cells would connect that smoothly as you illustrated. Also, if the transitions of values between cells were that smooth, then there would be no reason for any interpolator to be involved because there’s no sudden transitions at the borders.
OR, were you showing what it would look like if *ONE* Gradient Vector was used to perform Dot Product with *ALL* distance vectors across *ALL* cells instead of just the distance vectors inside of *ONE* cell?
-----------
Q4.
I’ve watched and read almost 20 videos / articles and you are the only person to say that Perlin Noise function interpolates the Dot Product values using Cosine Interpolator, whereas all other resources said the interpolators were either SmoothStep or SmootherStep Interpolator.
Or is your video here specifically made for Unity’s Perlin Noise implemented function? I’m not familiar with Unity though.
-----------
Thank you so much!
Q1. A random unit vector (arrow) is not a gradient vector until you get the dot product involved. A unit vector is strictly an arrow with length 1 and a direction. The dot product is what makes it a gradient vector.
Q2. Correct. The dot product outputs a value from -1 to 1 if using the unit vector and an input coordinate with less than length 1 . I may have explained it poorly in the video, but you can see at the time stamp the values are originally from -1 to 1 but I say “the values are then shifted to 0 to 1” which is a somewhat incorrect statement to make as the value isn’t shifted until the last step. But for explanation purposes it kinda works out.
Q4. Yes smooth step is more common and probably the correct way to do it. Years ago when I wrote my first Perlin Noise algorithm I had quite a few gaps in my knowledge that I filled with poor research. Earlier this year, because of a request in my discord, I wrote a new Perlin Noise script and started editing a new video overviewing the correct algorithm but was scrapped because ChatGPT came out and for quite a while I've had the mood of "Why make a video, they can just ask ChatGPT to write the script for them". But if you are interested, here is the algorithm I wrote in JavaScript using p5js for that video: github.com/BearTheCoder/p5/blob/master/Perlin%20Noise/VanillaJS/main.js
Q3. Is a dense one, and something that I would like to talk at length using discord. discord.gg/aeAukyWn
You are not wrong, but also not right. Probably more of a misunderstanding. If we take a single point on a grid, let's say (1, 1), that single point is the center of the dot product. Which is why if you reference whole number coordinates in a Perlin Noise algorithm, the result comes back 50% gray every time. But also at the same time, if you are observing the gradient vector around (1, 1) with an angle of 45 degrees, if you pull the dot product from a coordinate closer to (2, 2), the output will be closer to 1 or "white", if you pull using a coordinate closer to (0, 0) it will be -1 or "black". Meaning that the gradient spans 4 grid tiles centered around (1, 1). So, when you refence a pixel at location (0.2, 0.4) or (1.5, 1.2), they both will reference the same gradient that is at (1, 1). This is also why if you put the same values into a Perlin noise algorithm, the result will always return the same. Also this is why you can feed Minecraft (which is basically Perlin Noise the Game) a seed and end up at the same spot every time although the world is fairly endless. As far as the actual output, yes, if we pull the value for (0.2, 0.4) the output will be an combination of values from the gradient at (0 0), (0, 1), (1, 0) , and (1, 1)
Wow cool, could you make one for Simplex noise too? and other noises as well hahaha, this is easier to understand
I liked you just for that intro
Any news on part 2? :)
I've had the script written for probably about a year, just haven't gotten around to it.
awesome video
Thank you!
This video would have been great to see two years ago. I also home brewed a Perlin noise function for a game I’m making. For my random function, I had a very long array deterministic “random” values, and I pull values from the array using a sort of shifting cipher algorithm, so that the values don’t repeat themselves as I get farther away. Otherwise it just uses normal bilinear interpolation.
this tutorial was confusing or im stupid but why is it looking around for neighbouring points and they are all aligned so wont it make so it will be 0.5?
Hmm? At which point are we talking?
@@BearTheCoder 3:36 i understand why its 0.5 but if i divide sample points by 2 for coordinates wont they point still be aligned so they gradient will stay the same? im sorry if im being stupid
@@rediculaid Ok, I think I know what you are thinking. Each pixel of Perlin noise, when taken in the context of 2d noise, is a combination of 4 different gradients, one for each adjacent coordinate. So, I think what you are asking is, why isn't the output the same as the gradient shown, how do we get perlin noise and not the gradient? Because, the sample's coordinates doesn't change, but the context from which we are grabbing the sample changes based on the coordinate and the angle assigned to the coordinate. The sample's location, the coordinate, and the angle are then used to determine the gradient using the dot product. So, for that one sample you are give 4 different numbers 0.25, 0.1,0 .9, and 0.7 for example, and then those are blended together. It can be confusing not understanding the math, if you want, join my discord and I can explain it in more detail if you want. discord.gg/mZ5vKkS7
Next part please
Wheres the second video!!!
This was very good. Coming from a novice, I just want to understand how Text to image AI like MidJourney/Stable Diffusion works. Thanks.
a good way to visualize it is:
the dataset that the model uses is like a bucket of legos. the algorithm is told to create a certain type of structure, so it looks at other structures like the one it's being asked to make, then picks up the pieces used to make those previous structures and throws something together. essentially its looking at things it knows about the prompt subject, chopping up all the elements making up those images, then attempts to imitate the qualities with those elements, picked out randomly.
im sorry if this made you even more confused lmao
im not a very good explainer
r u know how to add some octaves?
github.com/BearTheCoder/p5/blob/master/Perlin%20Noise/p5%20Noise/main_p5.js
Here’s an example using JavaScript but it should be the same in any other language. Basically you add another for loop that iterates over the amount of octaves you want and change the input with a opacity and frequency value. Hard to explain, hopefully the code will be enough to get you going.
I’m tracking so far you know how to teach
good video. too bad you never made the follow up video tho.
It’s still in the works. Life gets in the way, ya know.
@@BearTheCoder Very true. Hope you're doing well.
You don't need to act like most people are so afraid of math. I can guarantee that most people clicking on a perlin noise video are not afraid of dot products etc. And most of us are probably enthusiastic about math. Good vid tho