I wanted to try out an idea that (very roughly and poorly) models erosion. The idea is that this can take smooth terrain, and form valeys and rivers.

See the Pen Erosion by madcoretom (@madcoretom) on CodePen.

Why is it poor?

  • Mainly because water only flows left, right, up or down, and no other angles inbetween. This leads to rivers that make 90° bends
  • Because the blur algorithm shifts everything up to the top-left

How does it work?

  1. Initialise a grid with random values. This example uses a grid of 100 x 100
  2. Blur it, a lot. Here I blur over the first 100 frames, using the 9 neighbouring pixels evenly
  3. Plot Rain.
    1. Rain starts in a random point
    2. Rain picks up some “sediment” (a small amount of the height)
    3. Rain goes up/down/left or right, and leaves a small amount of sediment
    4. If the rain has nowhere to go, it leaves the remaining sediment
    5. If the rain reaches the waterline, it stops, and the sediment magically disappears

How is it rendered?

Using HTML canvas. The height determines the colour, and brightness. Points under the waterline are blue. I then calculate roughly a shadow by looking at (only) the height of its direct neightbour to the left. This (poorly) simulates light coming in from the left

Why Did I make it?

For fun. I had the idea (and had seen it elsewhere), and wanted to see how quickly I could get results that looked semi-realistic.

What’s next?

  • Maybe making this in a WebGL shader. It would be much faster and more suited to the job
  • Adding more features, like rock hardness, and actually tracking pooling water
  • Allowing for rain to flow diagonally
  • A game? or maybe just a toy

You can view the full Codepen project here and browse the rest of my random snippets (like this and this and this)