How can I generate a circle/square gradient and store it in a 2d array?

Question

I'm trying to figure out how I can - or at least where I can read more about it - create a circle / square gradient and store the data in a 2d array.

My goal is to use the gradient with simplex-noise to create a procedural island by subtracting the gradient from the generated noise.

Here are picture references of the gradients that I'm talking about and trying to achieve:

The use of a gradient with noise is explained e.g. in a blog post I found here: https://medium.com/@travall/procedural-2d-island-generation-noise-functions-13976bddeaf9

But it only mentions creating the gradient without any details on how it's supposed to be done. I have tried looking around but I have been unsuccessful in finding what I'm looking for.

I would appreciate any tips or pointers in the right direction.

Answer 1

I've been trying to do pretty much the same thing. For the square one, you can find the answer here: 2D Array Gradient Generation in Unity

And for the circle one: You can generate it based on the distance of each "pixel" from the centre of the array.

this code is in C#, because that's what I'm using, but I think it's basic enough the be easily converted.

    int arrayWidth, arrayHeight;
    float[,] gradientArray = new var[arrayWidth, arrayHeight]

    int centerX = arrayWidth / 2 -1; //find center of the array
    int centerY = arrayHeight / 2 -1; //find center of the array

    for (int x = 0; x < arrayWidth; x++)
        {
            for (int y = 0; y < arrayHeight; y++)
            {
                float distanceX = (centerX - x) * (centerX - x);
                float distanceY = (centerY - y) * (centerY - y);

                //find distance from center
                float distanceToCenter = Mathf.Sqrt(distanceX + distanceY);
 
                //divide distance by one of the sides (width or height). 
                //by messing with this line you can easily alter the gradient
                distanceToCenter = distanceToCenter / arrayHeight; 

                gradientArray[x, y] = distanceToCenter; //set value
            }
        }