I want to create a "river biome" where there are rivers cutting to a flat land mass, to start I wrote a little js to generate a random height map (with simplex noise) but that's where I'm stuck.

this is what it generates: enter image description here

as you can see there are clear diagonal lines in there. I tried looking up how to fix this and on my search I found these:

I don't know if this is my problem of if it's something else entirely.

here's the significant part of my code:

for(var y = 0;y < myRivers.height;y++){
    for(var x = 0;x < myRivers.width;x++){
        lightness = simplexnoise(x/50,y/50); // number between -1 and 1
        myRivers.context.fillStyle = lightnessToRgb(lightness); //maps lightness to a color
        myRivers.context.fillRect(x * 4, y * 4, 4, 4); // fills a pixel with the color

a codepen: https://codepen.io/anon/pen/gooyMj

  • $\begingroup$ The second question you link to has a good analysis. What happens when you look at just 1 octave of the noise? Also, what interpolation function are you using? Linear interp will look more blocky than using a smooth step, for example. $\endgroup$ Commented Jan 9, 2018 at 6:45
  • $\begingroup$ I don’t really use interpolation I think $\endgroup$ Commented Jan 9, 2018 at 8:21
  • $\begingroup$ @user1118321 so multiplying with another octave might work? $\endgroup$ Commented Jan 9, 2018 at 8:22
  • 2
    $\begingroup$ A heightmap generated from Perlin noise won't give you a plausible-looking river system anyway. Rivers "cut" their own valleys through terrain. $\endgroup$
    – Dan Hulme
    Commented Jan 9, 2018 at 13:44
  • 2
    $\begingroup$ No, I'm not suggesting a solution. I'm suggesting a way of determining what the problem is. If you show just your lowest octave, what does it look like? Is it blocky? I don't enough about how the simplexnoise() function you're using works to tell you. Is that a function you wrote or something supplied by a library? $\endgroup$ Commented Jan 9, 2018 at 16:56

1 Answer 1


I know im a bit late, but hopefully this can help other people. you can add detail by using Fractal Brownian Motion. There is a great article here that i used as a guide to make my own version in c#. Also I would check to make sure your vars are ints.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.