이 실험에 대해

외부 라이브러리 없이 순수 JavaScript로 구현한 퍼린 스타일 노이즈. 256개의 무작위 순열 테이블(permutation table)을 기반으로, 격자 꼭짓점에서 그래디언트를 보간해 연속적인 노이즈 값을 생성한다. 4옥타브의 FBM(Fractal Brownian Motion)을 쌓아 자연스러운 지형감을 만든다. 시간 축으로 오프셋을 증가시켜 지형이 흐르는 효과를 낸다. Zoom 슬라이더는 노이즈 샘플링 주파수를 조절한다 — 낮을수록 부드럽고 넓은 지형, 높을수록 세밀하고 복잡해진다.

핵심 코드

// 2D 퍼린 노이즈 — 순열 테이블 기반
function noise2d(x: number, y: number): number {
  const xi = Math.floor(x) & 255
  const yi = Math.floor(y) & 255
  const u = fade(x - Math.floor(x))  // smoothstep 6t⁵-15t⁴+10t³
  const v = fade(y - Math.floor(y))

  const aa = perm[perm[xi] + yi]
  const ba = perm[perm[xi + 1] + yi]
  // ... bilinear interpolation with gradient vectors
  return lerp(lerp(grad(aa,...), grad(ba,...), u),
              lerp(grad(ab,...), grad(bb,...), u), v)
}

// FBM — 4옥타브 누적
function fbm(x: number, y: number): number {
  let val = 0, amp = 0.5, freq = 1
  for (let i = 0; i < 4; i++) {
    val += noise2d(x * freq, y * freq) * amp
    amp *= 0.5; freq *= 2.1
  }
  return val
}

// 매 프레임 시간 오프셋으로 지형 흐름
const nx = (col / COLS) * zoom * 4 + time * 0.6
const ny = (row / ROWS) * zoom * 4 + time * 0.4