Функция 2D Perlin Noise создает разрезанные неровные ряды. ⇐ Javascript

[Anonymous]

Я использовал (насколько я могу судить) довольно другую реализацию 2D-шума Перлина, описанную в этой статье Кембриджского университета: Приложение B - Шум Перлина. Но функция создает несоответствия между строками:
Непоследовательный 2D-шум Перлина
Вот мой код в виде исполняемого фрагмента:

Код: Выделить всё

const { floor, sin, cos, random, PI } = Math;

const canvas = document.getElementById("canvas");
const { width, height } = canvas;
const context = canvas.getContext("2d");

const n = 8;
const seed = seedArray();

function rand_uVec() {
const a = random() * (PI * 2.0);
return {
x: cos(a),
y: sin(a)
};
}

function dot(v0, v1) {
return v0.x * v1.x + v0.y * v1.y;
}

function S(t) {
return 3 * t ** 2 - 2 * t ** 3;
}

function L(LL, LR, sx, sy) {
return LL + S(sx - floor(sx)) * (LR - LL);
}

function U(UL, UR, sx, sy) {
return UL + S(sx - floor(sx)) * (UR - UL);
}

function seedArray() {
let s = [];
for (let x = 0; x < n + 1; x++) {
s[x] = [];
for (let y = 0; y < n + 1; y++) s[x][y] = rand_uVec();
}
return s;
}

function PerlinNoise2D(x, y, width, height) {
x *= (n / width);
y *= (n / height);

const s = floor(x),
t = floor(y);

/*
* (s + 0, t + 0),
* (s + 1, t + 0),
* (s + 1, t + 1),
* (s + 0, t + 1)
*/

// define the grid cell corner coordinates
const s0 = s + 0,
t0 = t + 0,
s1 = s + 1,
t1 = t + 1;

// get the random gradient vectors
const v00 = seed[s0][t0],
v10 = seed[s1][t0],
v11 = seed[s1][t1],
v01 = seed[s0][t1];

// get the difference between the cell corner and sample point
const d00 = {
x: x - s0,
y: y - t0
},
d10 = {
x: x - s1,
y: y - t0
},
d11 = {
x: x - s1,
y: y - t1
},
d01 = {
x: x - s0,
y: y - t1
};

const UL = dot(v00, d00),
UR = dot(v10, d10),
LR = dot(v11, d11),
LL = dot(v01, d01),
vl = L(LL, LR, x, y),
vs = S(y - floor(y)),
vu = U(UL, UR, x, y);

return vl + vs * (vu - vl);
}

function fragColor(imd, x, y, s) {
imd.data[(y * imd.width + x) * 4 + 0] = s;
imd.data[(y * imd.width + x) * 4 + 1] = s;
imd.data[(y * imd.width + x) * 4 + 2] = s;
imd.data[(y * imd.width + x) * 4 + 3] = 255;
}

const imd = context.getImageData(0, 0, canvas.width, canvas.height);

for (let x = 0; x < width; x++) {
for (let y = 0; y < height; y++) {
const noise = PerlinNoise2D(x, y, width, height) * 255
fragColor(imd, x, y, noise);
}
}

context.putImageData(imd, 0, 0);

Код: Выделить всё

Я уже видел подобные проблемы раньше с другими функциями Perlin Noise при переполнении стека, и я пытался изменить порядок некоторых входных координат, но обычно результатом является еще более измельченный график шума, тогда как я ожидал чего-то с более гладкими результатами.
Я был бы признателен, если бы какие-либо ответы могли следовать за реализация статьи, за которой я следую, а не обычная реализация с вложенными функциями линейной интерполяции (я понимаю, что это та же концепция, просто мне кажется, что моя выглядит более упрощенной). Я также был бы признателен, если бы ваши ответы касались только самой базовой реализации Perlin Noise без начальных таблиц реализации/перестановок. Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/797 ... neven-rows