I’ve been really interested in procedural generation after seeing all the things it can create. A month before this, on the previous lab day, Andy used a noise function to procedurally generate a heightmap in order to create a landmass. He left off saying he wanted to try to add rivers. So I thought I’d give it a go. Looking at places like /r/proceduralgeneration gave me better ideas on how to do this procedurally rather than just moving from high to low elevation.
To start, I wanted the noise function used in the heightmap to be the same one used to create this river system. I used a function to generate perlin noise which is a type of gradient noise that is used a majority of the time in this type of project. It looks a bit like this.
To generate a heightmap from this, you would take the greyscale value from a portion of the picture and use that to apply a height to the map you are building. What I did, however, was split the noise into a grid of squares with 20 pixels per side. Then, used the same idea with the greyscale value, except I applied that value to and angle instead. That way, the noise is converted into a big grid of angles like this…
Using a library called p5.js, I added particles that move through the force vectors exert on them. These vectors come from the angles present in each section of the grid. I also traced these particles as they move, creating an example of a potential river system that could be located on that heightmap. This is what is called a flow field.
At this point it was about midday and reading through more articles about noise I realized there was more to be done. Noise is generated from generally two arguments which are essentially x and y position in the output. To add to this, I gave the function another argument for the z position. This z position I used to represent time. I generated a new grid using a very small increment for z position and adjusted the angles accordingly. You can see the gif here.
Using p5, I was able to trace 5,000 particles at once, moving through the flow field. I also gave each particle a very subtle color change over time to give this result. By making the traced lines even smaller and upping the number of particles up to 100,000, I was (after a very slow generation process) able to create this picture.
If you are interested in this type of picture generation, Don Karlsson wrote a very good article on both the theory and the math of flow field picture generation.
https://codepen.io/DonKarlssonSan/post/particles-in-simplex-noise-flow-field