Radial Gradients Are So Powerful!

so let's start by making a grid I'm going to use p5js for this because I can easily draw shapes but you can use whatever you want create a variable for the grid size and another for the size of each tile in the grid I'll initialize the grid size to 15 meaning the grid will have 15 tiles across the width and the height we'll set the ti size down in the setup function I'll make the canvas in p5js 500x 500 pixels this is kind of like your window of drawing and anything outside this window won't show the tow size will be 500 divided by the number of tiles on the width and height which is just the grid size variable this makes all the tiles the right size so they fit perfectly inside the canvas and don't get cut off or leave Extra Space now you're not going to actually have a grid yet because this is just a pixel art visualization so let's make one in the draw function create two Loops one nested inside the other that go through each coordinate in the grid and spawn a rectangle at the position X comma y both the width and the height will be tile size there is a problem with this though and it's that each tile's position won't take into account the size of the tile for example look at the tiles at this size they seem to fit but as soon as we increase the size of the tiles they don't actually move to make space for the other tiles to fix this just multiply the X and Y coordinates by the tile size which make sure the necessary offset is in place now we have a grid but to make a radial gradient we need to First find the center of it which is the center of the grid make two variables for the center on the x- axis and the center on the y a axis initialize both of them as the grid size divided by two and floor the result to make sure it's rounded just in case you get a decimal now what we're going to do is get the distance between every single tile and the center and calculate how bright that tile is based on that value create a function called calculate brightness which takes in the parameters X and Y first find the distance from the tile to the center using the distance formula which is just derived from the Pythagorean theorem this is how it looks in code then we want to normalize the distance to a range of 0 to 1 and we do this by dividing The Distance by half of the grid size why half because half of the grid size is the maximum distance set a point in the circle of the gradient can be from the center in other words it's the radius of the circle so if the distance from the center is one and the radius of the circle is two then we get 0.5 as the brightness value which makes sense because theti is halfway through the gradient but there are values that lie outside the circle that are going to have distances greater than the radius meaning brightness value is greater than one so let's just clamp this whole thing between zero and one as well finally return the brightness value you might also want to multiply this by 255 because many languages use color values between 0 and 255 instead of 0 and 1 right before drawing the rectangle let's set the fill color to the return value of the calculate brightness function passing in the current X and Y coordinates being iterated P5 GS lets me put in just one value for color but other programs might require you to put in three values for the red green and blue color channels if yours does just copy this value for all three arguments and now if you run you should have a radial gradient but I want mine to go from dark to light instead of light to dark so let's add another parameter called invert right before we return the value if invert is true then set the brightness value to one minus itself to well invert it and when you call the function below add the new argument as true once you run the gradient should should go from dark to light but gradients aren't only useful for decoration there's so much more you can do with them for example you can put the brightness value through a function to make the gradient ease in or ease out like I did here by putting it through a simple bezier curve or you could add a slight bit of noise to each tile to have some variation and you can also use this as a height map if you create a 3D scene in a game engine like Unity you can raise the vertices of a mesh depending on the brightness of a tile and then you can easily get a valley or a hill shape if it looks too uniform just add some noise or pass the brightness value through a function this approach doesn't just give you random terrain but also a bit more freedom and control over it like being able to have a hill or maybe you could treat this as a population density map to generate a city spawning different types of buildings depending on the density of the tile they're on there's so much more you can do with gradients so keep trying out new things and if you find something cool I'd love to know down in the comments

Channel: unknown1050

Views: 4,671

Keywords: gradient, procedural mesh generation, terrain generator, city generator, town generator, procedural, height map

Id: iP3k39uNodU

Length: 4min 25sec (265 seconds)

Published: Thu Jun 13 2024