- Procedural Terrain Generation in Javascript
- 19 Dec 2022 07:50:23 pm
- Last edited by Michael2_3B on 20 Dec 2022 05:04:04 am; edited 3 times in total
So, over the past several days, I've been working on an HTML page that uses Javascript to procedurally generate perlin noise, and draw it in a canvas element. With help from chatGPT, I was able to figure out how to write and implement the perlin noise function, how to seed the function by using a seedable PRNG, how to draw stuff on the canvas isometrically, and also how to handle UI things like dragging the terrain around with the cursor.
Try the generator out here!
https://michael2-3b.github.io/Procedural-Perlin-Terrain/
And star the repository:
https://github.com/Michael2-3B/Procedural-Perlin-Terrain
I initially started this project by programming a rather simplistic interdependent terrain generation system (which is what my Isometric Minecraft program for the CE currently uses), where cell heights are generated based on their neighbors; no two neighbors can have a height difference greater than 1. Obviously, this is not a very good system to use, as it generates a lot of bias, and does not allow for procedural generation. I then looked into other algorithms like diamond-square, but ultimately decided I need to learn how to do perlin noise.
With some guidance from the chatGPT bot by openAI, I was able to create a custom perlin noise function, with dot products, linear interpolation, etc. and it uses variables like persistence, wavelength, octaves (the amount of detail), and more. It also uses offset variables for what portion of the noise map it should generate, and because it's procedural, the world size is virtually infinite. From there, all I had to do was interpret the noise values as values between 0 and 255 (because this works great for color values), add a world light value, draw the points on the canvas, and also add input elements to the html page for controlling the different variables.
One thing to note is that as of right now, I'm only representing the terrain based on elevation. In the near future I'm hoping/planning to implement more noise maps that control things like biomes, moisture, tree placements and more.
Overall I've learned a good bit already in the past few days, and I'm excited to continue working on this! Let me know what you all think!
Try the generator out here!
https://michael2-3b.github.io/Procedural-Perlin-Terrain/
And star the repository:
https://github.com/Michael2-3B/Procedural-Perlin-Terrain
I initially started this project by programming a rather simplistic interdependent terrain generation system (which is what my Isometric Minecraft program for the CE currently uses), where cell heights are generated based on their neighbors; no two neighbors can have a height difference greater than 1. Obviously, this is not a very good system to use, as it generates a lot of bias, and does not allow for procedural generation. I then looked into other algorithms like diamond-square, but ultimately decided I need to learn how to do perlin noise.
With some guidance from the chatGPT bot by openAI, I was able to create a custom perlin noise function, with dot products, linear interpolation, etc. and it uses variables like persistence, wavelength, octaves (the amount of detail), and more. It also uses offset variables for what portion of the noise map it should generate, and because it's procedural, the world size is virtually infinite. From there, all I had to do was interpret the noise values as values between 0 and 255 (because this works great for color values), add a world light value, draw the points on the canvas, and also add input elements to the html page for controlling the different variables.
One thing to note is that as of right now, I'm only representing the terrain based on elevation. In the near future I'm hoping/planning to implement more noise maps that control things like biomes, moisture, tree placements and more.
Overall I've learned a good bit already in the past few days, and I'm excited to continue working on this! Let me know what you all think!