Perlin noise artifacts

Question

I've taken the Wikipedia Perlin Noise Algorithm and implemented it in Python, here is the code:

import random
import math
from PIL import Image
from decimal import Decimal


IMAGE_SIZE = 200
PERLIN_RESOLUTION = 10
GRADIENT = []


for x in range(PERLIN_RESOLUTION + 1):
    GRADIENT.append([])
    for y in range(PERLIN_RESOLUTION + 1):
        angle = random.random() * 2 * math.pi
        vector = (
            Decimal(math.cos(angle)),
            Decimal(math.sin(angle))
        )
        GRADIENT[x].append(vector)


def lerp(a0, a1, w):
    return (1 - w)*a0 + w*a1


def dotGridGradient(ix, iy, x, y):

    dx = x - Decimal(ix)
    dy = y - Decimal(iy)

    return (dx*GRADIENT[iy][ix][0] + dy*GRADIENT[iy][ix][1])


def perlin(x, y):
    if x > 0.0:
        x0 = int(x)
    else:
        x0 = int(x) - 1
    x1 = x0 + 1
    if y > 0.0:
        y0 = int(y)
    else:
        y0 = int(y) - 1
    y1 = y0 + 1

    sx = x - Decimal(x0)
    sy = y - Decimal(y0)

    n0 = dotGridGradient(x0, y0, x, y)
    n1 = dotGridGradient(x1, y0, x, y)
    ix0 = lerp(n0, n1, sx)
    n0 = dotGridGradient(x0, y1, x, y)
    n1 = dotGridGradient(x1, y1, x, y)
    ix1 = lerp(n0, n1, sx)
    value = lerp(ix0, ix1, sy)

    return value


image = Image.new('RGB', (IMAGE_SIZE, IMAGE_SIZE))
pixels = image.load()
for i in range(IMAGE_SIZE):
    x = Decimal(i) / IMAGE_SIZE
    for j in range(IMAGE_SIZE):
        y = Decimal(j) / IMAGE_SIZE
        value = perlin(x * 10, y * 10)
        greyscale = (value + 1) * 255 / 2
        pixels[i, j] = (greyscale, greyscale, greyscale)
image.save('artifacts.png', 'PNG')

Here is the resulting image that is created by the script:

I must be missing something here, you can very clearly see the vertices. Can anyone let me know what is going wrong?

Answer 1

You need to use smoothstep instead of linear interpolation.

def smoothstep(a0, a1, w):
    value = w*w*w*(w*(w*6 - 15) + 10)
    return a0 + value*(a1 - a0)