How to distort an image using perlin noise?

Question

I'm trying to generate a 2D map and currently I'm doing so by the use of voronoi diagram. The problem I found is that all biomes have really hard edges and I would like to smooth them out a bit.

Initially I was thinking smoothing out voronoi curves, which appears to be far more complex as I imagined. Then I thought about perlin distorion, which seems far more doable. Although, I'm not sure what is the best way to implement this.

This is the function I use to generate a voronoi diagram:

void Generate()
{
    Vector2Int[] centroids = new Vector2Int[regions.Length];
    Color[] regColors = new Color[regions.Length];
    for (int i = 0; i < regions.Length; i++)
    {
        centroids[i] = new Vector2Int(Rand.Range(0, map), Rand.Range(0, map));
        regColors[i] = regions[i].color;
    }
    Color[] colors = new Color[map * map];
    for (int x = 0; x < map; x++)
    {
        for (int y = 0; y < map; y++)
        {
            int index = x * map + y;
            colors[index] = regColors[GetClosestCentroidIndex(new Vector2Int(x, y), centroids)];
        }
    }
}
int GetClosestCentroidIndex(Vector2Int pixelPos, Vector2Int[] centroids)
{
    float smallestDst = float.MaxValue;
    int index = 0;
    for (int i = 0; i < centroids.Length; i++)
    {
        if (Vector2.Distance(pixelPos, centroids[i]) < smallestDst)
        {
            smallestDst = Vector2.Distance(pixelPos, centroids[i]);
            index = i;
        }
    }
    return index;
}

While doing some research I stumbled upon this website, which shows the exact result I'm trying to achieve: https://observablehq.com/@kerryrodden/image-distortion-with-perlin-noise

Can someone help me with this problem? Thank you

[Solved]

By the help of the user DMGregory, the map is now looking much better! This is the new voronoi diagram, after the distortion had been applied.

Currently, I'm using these settings, but I will probably tweak them later.

Scale: 10
Octave Count: 1
Amplitude: 4
Lacunarity: 1
Persistence: 1

And for the seed, currently, I'm using just a randomly generated seed.

Answer 1

First, give yourself a 2D turbulence function with parameters you can adjust to shape the noise the way you want:

public float baseScale = 50.0f;
public int octaveCount = 4;
public float amplitude = 5.0f;
public float lacunarity = 2.0f;
public float persistence = 0.5f;

// Arbitrary numbers to break up visible correlation between octaves / x & y
public Vector2 seed = new Vector2(-71, 37); 

Vector2 Get2DTurbulence(Vector2 input) {

    input = input/baseScale + seed;
    float a = 2f * amplitude;

    Vector2 noise = Vector2.zero;

    for(int octave = 0; octave < octaveCount; octave++) {
        noise.x += a * (Mathf.PerlinNoise(input.x, input.y) - 0.5f);
        noise.y += a * (Mathf.PerlinNoise(input.x + seed.y, input.y + seed.y) - 0.5f);
        input = input * lacunarity + seed;
        a *= persistence;
    }

    return noise
}

Then add turbulence to your position before you use it to find the closest centroid:

int GetClosestCentroidIndex(Vector2Int pixelPos, Vector2Int[] centroids)
{
    Vector2 warpedPos = pixelPos + Get2DTurbulence(pixelPos);

    float smallestDst = float.MaxValue;
    int index = 0;
    for (int i = 0; i < centroids.Length; i++)
    {
        float distance = Vector2.Distance(warped, centroids[i]);
        if (distance < smallestDst)
        {
            smallestDst = distance;
            index = i;
        }
    }
    return index;
}