심화 개념 1: 2D 노이즈 noise(x, y) — 위에서 내려다본 값의 지도

1교시 noise(t)는 입력이 하나, 시간 축 하나였습니다. 거기에 입력을 하나 더 붙이면 noise(x, y) — 2D 노이즈가 됩니다.

noise(x, y)는 좌표 (x, y)마다 0~1 값을 돌려줍니다. 1D에서 ’가까운 입력끼리 비슷한 값’이었던 성질이 그대로 2차원으로 퍼진 것입니다. 가까운 좌표끼리 비슷한 값이 나오므로 부드러운 얼룩무늬가 됩니다.

2D 노이즈의 가장 직관적인 활용은, 캔버스의 모든 픽셀에 noise(x, y)를 물어보고 그 값을 밝기로 칠하는 것입니다.

function setup() {
  createCanvas(200, 200);
  pixelDensity(1);   // 픽셀 좌표와 화면 픽셀을 1:1로 맞춤
  noLoop();          // 한 번만 그림

  let scl = 0.02;
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      let bright = noise(x * scl, y * scl) * 255;
      stroke(bright);
      point(x, y);
    }
  }
}

실행하면 흑백의 구름 같은 얼룩무늬가 캔버스를 채웁니다. 이중 for문으로 모든 좌표를 방문하고, 각 좌표에서 noise() 값(0~1)에 255를 곱해 밝기로 쓴 것입니다. Ken Perlin이 영화 <트론>에서 만들고자 했던 자연스러운 질감이 바로 이런 모습입니다.

코드의 scl(noiseScale)이 핵심입니다. 1교시의 증가값처럼 노이즈 입력 간격을 조절하는 값입니다. 픽셀 좌표는 0, 1, 2, 3처럼 1씩 늘어나는데, 스케일 조정 없이 noise(x, y)를 그대로 쓰면 옆 픽셀끼리 값이 너무 달라 구름보다 거친 잡음에 가까워집니다. 좌표에 작은 수(scl)를 곱해 간격을 좁히면 옆 픽셀끼리 비슷해져 부드러운 무늬가 됩니다.

scl 값을 작게 두면 큰 덩어리, 크게 두면 잘게 쪼개진 질감이 됩니다.

심화 개념 2: 움직이는 2D 노이즈 — 세 번째 인자

앞에서 만든 구름은 noLoop()으로 한 번만 그린 정지 화면입니다. 흘러가게 하려면 noise()의 세 번째 입력을 씁니다. noise()는 입력을 세 개까지 받을 수 있습니다.

• noise(t) — 1D, 시간 축 하나
• noise(x, y) — 2D, 공간
• noise(x, y, t) — 2D + 시간, 흐르는 공간

function setup() {
  createCanvas(200, 200);
  pixelDensity(1);
}

function draw() {
  let scl = 0.02;
  noStroke();
  for (let y = 0; y < height; y += 2) {
    for (let x = 0; x < width; x += 2) {
      let bright = noise(x * scl, y * scl, frameCount * 0.01) * 255;
      fill(bright);
      rect(x, y, 2, 2);   // 2px씩 건너뛰므로 점 대신 2x2 사각형으로 빈틈 없이 채움
    }
  }
}

세 번째 입력은 시간 축입니다. frameCount * 0.01로 조금씩 이동시키면 2D 노이즈 무늬가 부드럽게 바뀝니다.

심화 개념 3: Flow Field — 보이지 않는 바람의 길

Flow Field(플로우 필드)는 노이즈의 대표적인 활용 중 하나입니다.

화면을 바둑판처럼 격자로 나누고, 각 칸에 방향(각도)을 하나씩 정해 줍니다. 그 방향을 noise(x, y)로 정하면 가까운 칸끼리 비슷한 값 → 가까운 칸끼리 비슷한 방향이 되어, 전체적으로 자연스럽게 흐르는 방향의 지도가 생깁니다.

바람을 떠올려 봅니다. 내 칸의 바람과 바로 옆 칸의 바람이 정반대라면 어색합니다. 노이즈로 정하면 옆 칸끼리 부드럽게 이어지는 바람의 길이 됩니다.

노이즈 값은 0~1입니다. 여기에 TWO_PI(한 바퀴, 360도)를 곱하면, noise(x, y) * TWO_PI는 0도에서 360도 사이의 각도가 노이즈로 부드럽게 정해집니다.

function setup() {
  createCanvas(400, 400);
  background(255);
  stroke(0);

  let grid = 20;     // 격자 한 칸 크기
  let scl = 0.05;    // 노이즈 스케일

  for (let x = 0; x < width; x += grid) {
    for (let y = 0; y < height; y += grid) {
      let angle = noise(x * scl, y * scl) * TWO_PI;
      push();
      translate(x + grid / 2, y + grid / 2);
      rotate(angle);
      line(0, 0, grid * 0.5, 0);             // 방향 막대
      line(grid * 0.5, 0, grid * 0.35, -3);  // 화살촉
      line(grid * 0.5, 0, grid * 0.35, 3);
      pop();
    }
  }
}

각 칸 중앙으로 좌표계를 옮기고(translate), 노이즈로 정한 각도만큼 돌린 뒤(rotate), 화살표를 그립니다.

점 하나를 이 화살표 방향대로 움직이면 보이지 않는 바람에 실려 떠다니는 것처럼 보입니다. 점에 수명까지 붙이는 본격적인 파티클 시스템은 13주차에서 다룹니다.