Weird effect when generating gradients for height map

Question

I am experimenting with generating height maps using radial gradients and perlin noise, using a technique I found here: http://www.reddit.com/r/gamedev/comments/1g4eae/need_help_generating_an_island_using_perlin_noise/cagmlsi.

This is my code:

 public override void generate(int seed) {
        Random rand = new Random(seed);


        float[,] pixelMap = new float[gridSizeX, gridSizeY];

        // generate random starting points for the islands
        centers = new int[ISLAND_COUNT,2];
        for (int i = 0; i < ISLAND_COUNT; i++) {
            centers[i, 0] = rand.Next(0, gridSizeX - 1);
            centers[i, 1] = rand.Next(0, gridSizeY - 1);
        }

        float maxDistance = 0;
        for (int x = 0; x < gridSizeX; x++) {
            for (int y = 0; y < gridSizeY; y++) {
                // calculate the distance for each center node to the current coords.
                // pick the distance that is closest for the color value
                float distanceToCenter = 9999999; //artificially high number
                for (int i = 0; i < ISLAND_COUNT; i++) {
                    int centerX = centers[i, 0];
                    int centerY = centers[i, 1];
                    float localDistance;

                    //Simple squaring, you can use whatever math libraries are available to you to make this more readable
                    //The cool thing about squaring is that it will always give you a positive distance! (-10 * -10 = 100)
                    float testX = x;
                    float testY = y;

                    float distanceX = (centerX - testX) * (centerX - testX);
                    float distanceY = (centerY - testY) * (centerY - testY);

                    localDistance = (float)Math.Sqrt(distanceX + distanceY);

                    // let's see if the wrapped distance is shorter; if so use that.
                    // this allows our gradient to wrap along the X axis
                    if (x > centerX) {
                        testX = (gridSizeX - x) + centerX * 2;
                    } else {
                        testX = (gridSizeX + x);
                    }

                    distanceX = (centerX - testX) * (centerX - testX);
                    if (localDistance > (float)Math.Sqrt(distanceX + distanceY)) {
                        localDistance = (float)Math.Sqrt(distanceX + distanceY);
                    }

                    //is this closer than the last recorded distance? If so use it
                    if (localDistance < distanceToCenter) {
                        distanceToCenter = localDistance;
                    }

                    // record the maximum distance calculated
                    if (localDistance > maxDistance) {
                        maxDistance = localDistance;
                    }
                }                    



                // add the color to the pixel map, adjusted for an rgb between 0 and 255.
                pixelMap[x, y] = (distanceToCenter / gridSizeX) * 255 * 2;
            }                    
        }           


        drawImage(pixelMap);


        // save image of final generation
        passOutput.Save(@"test.png", ImageFormat.Png);
    }

This code generates an image like this though:

the red dots (if you can see them) are diagnostics code I added to mark the center of the gradients.

I am completely stumped as to why these white borders are happening at the midway points between gradients. I feel like there is a simple solutions to this, but I have been at this for days and have been unable to fix it no mater what I try.

What I am expecting is something like this mockup made in Photoshop:

Notice how there are no sharp edges; all gradients int he image blend into each-other seamlessly.

Any ideas?

Answer 1

Here are four options that you can try:

A) Scale & threshold existing output

You can ensure that the gradient saturates at some maximum value before reaching any of the cell borders. This will tend to make small holes of uniform size, but you can introduce size variation by assigning a random scale factor to each seed point and scaling distances to that point before comparing with its neighbours.

B) Blur existing output

This is self-explanatory. With a wide enough blur kernel, you can smudge the sharp borders into smooth high regions like in your example. This may require some scaling/offsetting to maintain the desired contrast/mins/maxes.

C) Smooth Voronoi

Iñigo Quilez describes a method to generate a Voronoi pattern with smooth borders. The low-power exponential falloff shown in the top-left is fairly similar to your target example:

D) Multiply all distances

Rather than outputting the distance to the closest point, return the product of the distances to all of the points. This gradient still hits zero at each seed point, but has no first derivative discontinuities between them (unlike standard Worley F1 noise). This will require some scaling to keep in the desired brightness range.