The Basics of Perlin Noise | Roblox Studio Tutorial

hey there this is the end result of today's video and all links to the project files will be in the description down below for you to download and have a look at yourself [Music] so you probably haven't heard of me before and uh well i'm kind yeah there's nothing else to say really but i like to program i have done for years and i thought i'd create a series on youtube where i exchanged my lovely wisdom for some nice youtube adsense just kidding i wouldn't sell myself out like that all that easily regardless we'll be looking at pearl and noise today whilst also learning how to create our own fog screen the purlin noise function what is it well if i were to refer to my roblox dictionary of development it officially states that it returns a purlin noise value and damn that really helped well since the roblox dictionary of development is now used to us or to anyone currently i'll explain it myself the purlin noise algorithm basically allows us to have randomness without it looking like a complicated mess of numbers essentially it creates organic randomness it has a natural appearance to it what you're confused and you're asking me to explain geez it's ball of you to even assume that i know what i'm on about anyway but i'll guess i'll continue in fact let's break it down first by talking about randomness in game development we may want some randomness in order to oppose the machine look of certain things and systems within our game maybe you want to plant a bunch of trees for example hashtag team trees but you don't want them to be placed in a grid and instead want them to be planted in random locations in order to make them appear like they're in an actual forest and natural appearing forest well to do that you'd want to use the random number generator in roblox lure to determine a random position for the planting of the tree within roblox lure the method of generating a random number should look something vaguely like this local number equals math.random and then whatever you put in the brackets is the range that you want a random number generator to pick from so for example if you want to replicate a six-sided dice you'd put the ranges of one to six into the parameters of the generator once you run this script and print the result of a number it should output a random number between one to six just like the diode roll in a monopoly game that would eventually result in you being sent to jail sad times anyways if i was to repeat this code over and over again by putting it within a while true loop you should be able to see that the numbers are completely random every time there should be no pattern to the numbers that are generated and to further exemplify this if i were to plot these numbers on a graph where the y-axis is the number that is actually generated and the x-axis is time it is abundantly clear that the pattern is a huge mess of numbers and this is what is otherwise known as noise and computer science this is what noise is just randomly generated numbers this type of noise however can lead to ugly results in some use cases such as terrain generation for example this is what terrain generation would look like with this random noise instead of what is most commonly used which is purlin noise it doesn't look so fun to hike across does it so anyways you should hopefully know what i mean by noise or just random noise if you don't then what exactly were you doing while i was talking not listening i presume disgraceful but anyways i think it would now make sense to talk about the purlin in perlin noise in fact i think a visual demonstration would aid your quest for knowledge so without further ado let's compare the two different types of noises prepare yourself as we already know random noise is literally a huge mess of numbers with the peaks and troughs of these noise waves showing no correlation between one another they simply are random waves of noise with no pattern whereas with the purlin noise waves however they create a pattern of numbers that flow smoothly between one another with the peaks and troughs of the purlin noise waves being made very clear values that are next to one another have little differences between them not only that but you can easily identify the pattern of numbers which can be difficult or near on impossible with random noise waves thus making pearl and noise a perfect candidate for terrain generation the rolling waves of perlin noise is almost identical to quite a lot of landforms that exist within our own planet whilst still being random and with a slight mathematical tweaking to the waves you could produce many more landforms too it's amazing but how is purlin noise random well in comparison to the random noise waves the numbers themselves are not generated randomly however it is the properties of these metaphorical peaks and troughs that are random i i know i know it does sound very confusing but let me explain first because this is where it might click in your head if i were to input different numbers into the purl and noise algorithm the peaks and troughs would change shape size and position randomly thus making the algorithm random the numbers in between these parts of the pearl and noise wave are then generated based on the surrounding values around them hello this is futurekind in the editor and if you don't understand this don't worry all you need to know is that purlin noise is random and that that's all you need to know it's very complicated to explain and personally i don't really understand it fully yet but yeah just don't worry about it do you see what i mean by organic randomness the algorithm produces random values that appear to be connected to one another without looking like the edge of a knife aside from terrain generation pearly noise could be used for many other systems with in game and software development such as clouds waves of any kind procedural textures and procedural generation of anything really sebastian lake lag legay don't worry sebastian um kyle's isn't so easy to pronounce either so just don't worry keane isles um anyways he has some great videos on how polar noise can be used in clouds by the way so make sure to check him out after this video of course i digress you should have a vague idea of what exactly pulling noise is now and to summarize purlin noise creates randomness that looks organic and not too random now it is let's begin by opening a new project in roblox studio now and start talking about what we're actually going to create just as a warning to those who actually survive the intellectual topics of pearl and noise i'm assuming that everyone watching has a degree of both knowledge and experience for roblox studio and lua u explaining how to set up a function is going to be the least of my priorities in this video moving on let's talk about fog screens which is coincidentally what we are going to produce today to explain fog screens would be to explain the difference between the first and second dimensions they are the two-dimensional form of a pearly noise wave which happens to also be one-dimensional anyways a fog screen is this they represent the different values that have been produced through the perlin noise algorithm with the darker areas representing a lower value such as minus 0.5 for example and the lighter areas represent in a higher value such as 0.5 these can be useful for many things as a smooth natural and random appearance can be utilized for procedural textures and or terrain generation for example we could have the darker areas of the fog screen represent lower valleys of our terrain and we could have the lighter areas represent the peaks and hills of our terrain too it's a simple process really but the first obstacle we face is the making of the actual fog screen the first thing that we're going to want to do is to create a folder in the workspace that houses all the parts for our fog screen we could just parent the parts to workspace directly however just to suffice my ocd there'll be in a folder for today call it whatever you want but it is good practice to call it something that is related to what will actually go into it now create a regular script within server script service and since we are wanting the parts to be created for everyone that is connected for the server so that they can see it we need it to also be created by the server too so it makes sense for it to be in server script service in this script reference a folder from the workspace is available at the top so we can refer back to it later then what we're going to do is create four local variables underneath that that will allow us to change the properties of our fog screen for now just copy down as a type because i will explain what they all mean in a few moments okay so so the first variable called fog screen size is referring to the dimensions of the fog screen and it essentially means that the fog screen will be 100 by 100 pixels wide i wouldn't recommend going any higher than this if your computer is potato but the size should work for most people hopefully down below this variable sits the resolution one which also contains the value of 100 this variable controls a visible resolution of the purlin noise values that are outputted to be truthfully honest this is what a purlin noise wave looks like without the increase of resolution compared to the one i actually showed you earlier for the previous examples it didn't look as good as the one i wanted it to be so the resolution was increased to further demonstrate the differences between purling noise and random noise in summary the resolution of a purlin noise wave metaphorically zooms into the wave itself as if you were looking at it through a magnifying glass increasing the resolution increases the magnification of the wave thus producing a new wave with less changes in the height as less of the wave can actually be seen just like if i were to slowly zoom into the earth the curvature of it becomes less and less visible until it becomes flat enough for people to believe the earth is actually flat stupid round earthers anyways you should hopefully understand what resolution is in terms of the purlin noise wave now let's move on to the frequency variable this value indicates how often a peak and a trough of the purlin noise wave will appear for example setting the frequency to one will not affect anything because you're multiplying it by one which is the same as just having the number being there however changing it to two will double the amount of times a peak in a trough will be outputted it's complicated but just keep in mind that frequency will change how often the waves will repeat within a given section finally there is the amplitude variable which is purely for aesthetic purposes without the value of each part being multiplied by amplitude this is what it would look like however applying this multiplier makes the waves visibly stand out all amplitude really does is affect the height of a wave which is quite simple really and you'll see why we use it in a few moments when we get into the actual use of purlin noise in our script just as a final note with these variables do mess around with them after this video is over changing the values of the variables and seeing how it affects your waves will definitely benefit your learning and understanding of how the algorithm actually works the next section we're going to program is the loop that creates the actual fog screen itself and to do this we're going to want to create two for loops with one embedded within another now like i said earlier i'm not going to explain how to actually make the for loops and what they actually mean and that all the variables within them you can just search up some beginner tutorials it explains how they work and i'm sure you'll be fine but anyway let's label the control variable in the first loop x and then the second loop z with the end value being in the fog screen size for both these loops will loop through every row on the x-axis of the fog screen hence the first for loop and then every pixel on the z-axis which is perfect for the creation of the individual pixels on the phone screen a quick little note before we move on you may want to actually add a run service dot heartbeat column weight at the bottom of the first for loop if you want less lag or even a regular weight will do too this will allow the loops to weight and create the parts which creates less lag because the parts are all being created in one go so this is great for computers are a bit slower so you may want to add that if you want that just make sure to add the run service dot heartbeat column weight at the bottom it should be on the screen somewhere anyway moving on within the second for loop we're going to actually create the individual pixels of the fog screen which is going to simply be a part for our purposes today hopefully you should all know how to actually instance apart so i'm not really going to explain that either however do make sure that the size of the part is equal to a one by one by one part and it is anchored too otherwise it won't work it needs to have them properties otherwise the whole thing will just fall apart or just break now here comes the big chunks part of it all the purlin noise function if i were to simply set the position of a part to the x value from the first for loop one and then the z value from the second for loop all of our parts within the fog screen will be positioned into a flat 2d plane which is not what we want we want to be able to see the purlin noise waves in our fog screen and how it affects the positions of the actual pixels or the parts in our demonstration so we are wanting to create the specific height for each of the parts to begin with i'm going to create a variable called height which is going to call a function that will return the height of a part at a given coordinate this variable will be within the second for loop and it'll be local to each pixel which is why it's called height because it's going to get the height for the specific pixels anyway this height is what will determine the y position of the actual pixel so the arguments of the get height function will contain the x and z coordinates from the for loops as these variables represent the x and z positions of the part that's being created it is important that these coordinates are inputted into the actual function as the purlin noise algorithm will output the y coordinate based on where in the grid the part is actually located before we move on to the actual function itself replace the one in the y position of the part with height in order to actually affect the position of the part oh and then multiply this height by the amplitude two so we can actually see the fluctuations in the wave i'll explain later why we actually have to do this yeah it has something to do with the purlin noise function you should now notice that the get height function is actually underlined in red and this is because we actually haven't defined the function yet so let's do that now create the function just above the for loop so that the loops can actually call it make sure to put the parameters of x and z in there so that we can use the input of data from the for loops too now i'm going to create a new variable within this function called noise height which we're going to return at the end of the function as this is where we'll calculate the height for our part noise height is going to be equal to math.noise and within that we'll have x divided by the resolution times by the frequency hang on i first actually need to explain this new function here so if i were to refer back to my roblox dictionary of development it states that math.noise returns a purl and noise value which we already know this purl and noise value is only outputted when given three arguments which are the x y and z coordinates however since we're going to be creating 2d purlin noise we're only going to use the first two if we're using 3d we'd use the x y and z however in 2d you can just use the z coordinate as a seed so math.random and then a random number and that will give you a random seed every time like for example in minecraft there's a different seed for every world anyways i'm going way too far up the scope now now let's use what we know about the algorithm and input our x and z coordinates into the function since we're only going to be using the first two arguments the final one will be set to zero as default anyways this should work right let's give it a run and test to see if our code has worked which you should unfortunately find it hasn't well this is because i failed to actually mention it when all inputed values are integers the output will always be zero i'm not too sure why this is the case i'm sure someone in the comments will correct me on this one however it is the case so we're going to have to put up with it and it makes sense why it doesn't work since our x and z variables from the for loops will always be integers and default value of zero is also an integer thus outputting zero because every value that was inputted was an integer to combat this we can divide our x and z values by our resolution which should guarantee us that all values will not be integers not only that but it also applies our resolution variable to the purlin noise wave which is exactly what we want in order to have a beautiful looking wave to look at you'll notice that when we actually run our cut the wave is going to be slightly within the ground however if i move all the parts up out of the ground you can see what we have is a wave albeit a boring one but it's still a wave we're making progress anyways as i previously mentioned the resolution increases the magnification of a wave which means that less of the wave is actually visible at a time because it's like you've zoomed into it with a magnifying glass you can visibly see less of it this unfortunately means that we have a boring looking wave but for those intelligent people watching it remember what i said about the frequency variable i love you by the way they will be able to remember that the frequency increases how often parts of the wave are actually visible well this is perfect for making our purlin noise waves look more interesting than just the rolling hills of the windows xp background how about we multiply the already divided x and z values by our frequency variable and see how that changes the wave as you can see the frequency variable is set to three which in theory should mean that the peaks and troughs of our wave will be seen three times more as often let's run it again and see what actually happens okay it's still in the ground but look at that it's actually what we're looking for if i put it slightly back into the ground you can even see me at the beginnings of islands and the bit the base plate representing the actual water i'm not going to be looking into that side of terrain generation in this video but let's finish off what we've actually started first okay so there's actually one thing i haven't mentioned to you about perlin noise and that is that the values which are outputted fluctuate between minus 0.5 and 0.5 now if you do remember i mentioned earlier that the lower parts of our fog screen could for example represent minus 0.5 and the higher parts the part that is colored white could represent 0.5 now i said this on purpose just to foreshadow this event this essentially means that the lowest value that will ever be outputted by the algorithm will be minus 0.5 and the highest value will be 0.5 which is not great for our demonstration just to prove this to you if i were to stop the amplitude variable from multiplying the output height our waves would look incredibly flat and this is because there will only be a difference of one stud between the highest peak and the lowest trough of uphill in noise waves in order to make the waves look larger in height we physically multiply the height of the waves which in our case we multiply them by 10 since our amplitude is 10. the problem with what i just said however is that the purlin noise algorithm doesn't always output a value between these ranges and i know i'm contradicting everything i've just said or i'm gonna lose my freaking mind they can sometimes be outside this range but only by a small margin it's annoying and quite frankly i don't know why either but to fix this we should clamp our values between the definitive ranges of minus 0.5 and 0.5 if you don't know what the math.clamp function does it places the value within a certain range if it's outside of that range it just clamps it in within that range it's complicated but i'm sure a future me will make a video on it soon so look out for that for now except the fact that the noise height should be within the ranges of minus 0.5 and 0.5 from now on now we've still got one more part to the algorithm that we have to do and it is the actual coloring of our fog screen we've got to color the parts to make sure we know which part is it what section of the fog screen and to do this it doesn't really help that the values that are outputted by the algorithm are between the ranges of minus 0.5 and 0.5 they're quite awkward ranges so to make them a nice even range all we're going to have to do is add 0.5 to whatever the output value is and that should increase the range of the output to zero and one which is perfect zero and one is the range that you should always aim for if there is an algorithm that it doesn't give you something like that because you can work with anything with zero and one unless the algorithm that you're working with is requiring something different then obviously change it but zero and one is the perfect range and that is what we're going to stick with so add 0.5 to this value and this will help us in a few moments so let's give this project another test and see what changes there are the first thing that you should immediately notice is that the fog screen is now up in the sky just slightly sitting on top of the base plate this is because the values of the purlin noise wave are between 0 and 1 and not minus 0.5 and 0.5 which happens to all be above the surface of the base plate position wise this is great as this perfectly leads on to what we actually need to do and like i said it's the coloring of the parts now when coloring apart within roblox we'd normally just set the color of the part equal to color three dot from rgb and whatever you put in the brackets is the red green and blue values of the actual colour however there is also something we can use from the colour three library that will massively help us colour the parts if we actually take a look at what the end result of the fog screen should look like the higher parts of the fog screen are coloured in white and the lower parts are coloured in black with the parts in between acting as a gradient between the colours now do you remember how i said that the purlin noise value should be between the ranges of 0 and 1 instead of minus 0.5 and 0.5 well we can use this value for the coloring of the part since it represents the height of the part as a decimal coincidentally this function within the color 3 library accepts rgb values as a decimal number between 0 and 1 just like the ranges of our algorithm perlino's algorithm which is 0 and 1. and because we're only wanting the colors to be from black to light all we have to do is make sure that each rgb value is the same for example the get height function may return a value of 0.8 this means that the color of our part will be four-fifths the color white which is this color anyways this is how we can determine the color of our fog screen pixels based on the height that is outputted from the berlin noise algorithm let's give the script one final test to see if everything works and it does amazing and that my friends is how you create a fog screen using purlin noise within roblox congratulations this has been a long process and a long tutorial thank you for listening to my ted talk [Music] well i'm sure you you're finally happy to hear that this feature length and roblox tutorial is over and quite frankly so am i this script is nearly 4 000 words long and i'm tired but that is it you should now have your very own fog screen and you can use this fog screen to build upon other pearl and noise use cases however i'm assuming that most people watching will most likely want to go down the path of terrain generation and i don't blame you either the hard part of terrain generation is already done you've made the purlin noise algorithm now it's up to you to make the chunk system and the actual appearance of the terrain congratulations on listening to me for this long anyways and if you did enjoy this tutorial slash movie make sure to give this video a fat like and a share to all your developer mates [Music] and uh please give any suggestion for future videos it couldn't be tutorials or just any development videos i i will greatly appreciate them and if you're brave enough give me bold criticism on this video too any feedback will be greatly appreciated too but i guess that's it [Music] bye [Applause] [Music] you

Channel: Kiyan

Views: 37,952

Keywords: roblox, roblox studio, perlin, ken perlin, perlin noise, lua, luau, lua tutorial, roblox tutorial, how to, basics of perlin noise, noise, roblox studio tutorial, fog screen, fog screen tutorial, roblox dev, roblox development

Id: yA210k9ie8Y

Length: 27min 5sec (1625 seconds)

Published: Sun Jul 25 2021