핵심 개념 1: random()의 특성 — 독립적인 무작위

random()의 특성을 먼저 짚어 봅니다. 어떤 움직임에 random()이 잘 맞고, 어떤 움직임에 noise()가 더 잘 맞는지 구분하기 위해서입니다.

random(min, max)는 min 이상 max 미만의 무작위 소수를 돌려줍니다. 핵심은 매번 부를 때마다 완전히 독립적인 새 값이 나온다는 점입니다. 직전에 어떤 값이 나왔든 전혀 영향을 주지 않습니다.

이 특성을 그래프로 확인합니다. x축은 시간(프레임), y축은 random()이 만든 값입니다.

function setup() {
  createCanvas(400, 200);
  background(240);
  stroke(0);
  strokeWeight(2);
}

function draw() {
  let x = frameCount;
  let y = random(height);
  point(x, y);
  if (x > width) {
    noLoop();
  }
}

실행하면 점이 위아래로 불규칙하게 바뀌는 그래프가 나옵니다. 직전 값이 30이든 180이든, 다음 값은 0~200 중 아무 곳에나 나옵니다. 앞 값과 뒤 값 사이에 아무런 관계가 없기 때문입니다.

이 특성을 자연 현상에 그대로 쓰면 어색합니다. 바람 세기가 매 순간 약함→강함→약함으로 갑자기 바뀌고, 기온이 1초마다 20도→5도→35도로 오르내리는 셈입니다.

핵심 개념 2: noise() — 연속적인 무작위

앞에서 본 특성 — ‘앞뒤 값이 서로 독립적이다’ — 과 다른 방식으로 값을 만드는 함수가 noise()입니다. 정식 이름은 Perlin Noise(펄린 노이즈)입니다.

1983년, Ken Perlin은 영화 <트론>의 컴퓨터 그래픽 작업에서 돌 표면, 나무 결, 구름 같은 자연스러운 질감을 만들어야 했습니다. random()만으로는 결과가 너무 인공적이고 불연속적으로 보였기 때문에, ’규칙적이지는 않지만 부드럽게 이어지는 무작위’가 필요했습니다. 그래서 Perlin Noise를 발명했고, 이 공로로 아카데미 과학기술상을 받았습니다. 지금도 영화 VFX, 게임, 미디어아트 전반에서 쓰이며, 교재 Nature of Code의 핵심 개념이기도 합니다.

noise()에 숫자를 하나 넣으면 0 이상 1 이하의 값이 나옵니다.

let value = noise(0.5);  // 0~1 사이의 부드러운 값

입력값을 조금씩 바꿔 가며 불러보면 다음과 같습니다. - noise(0.50) → 예: 0.43 - noise(0.51) → 예: 0.44 — 거의 비슷 - noise(0.52) → 예: 0.46 — 역시 비슷 - noise(5.00) → 예: 0.71 — 멀리 떨어진 입력이라 전혀 다른 값

random()과 noise()를 한 화면 위아래에 동시에 그려 비교해 봅니다.

let xOff = 0;

function setup() {
  createCanvas(400, 300);
  background(240);
  // 위/아래 영역 구분선
  stroke(200);
  line(0, height / 2, width, height / 2);
  // 라벨
  noStroke();
  fill(0);
  textSize(14);
  text("random()", 10, 20);
  text("noise()", 10, height / 2 + 20);
}

function draw() {
  let x = frameCount;
  // 위쪽: random()
  stroke(220, 50, 50);
  strokeWeight(2);
  point(x, random(height / 2));
  // 아래쪽: noise()
  stroke(50, 90, 220);
  point(x, noise(xOff) * (height / 2) + height / 2);
  xOff += 0.01;
  if (x > width) {
    noLoop();
  }
}

random()은 프레임마다 값이 끊기고, noise()는 앞뒤 값이 이어져 자연 현상 표현에 더 적합합니다.

핵심 개념 3: 오프셋과 증가값 — 부드러움을 조절하는 값

noise()에 넣는 입력값을 오프셋(offset)이라고 부릅니다.

노이즈를 산맥 위를 걷는 이미지로 생각해 봅니다.

오프셋은 현재 위치, 증가값은 다음 프레임으로 이동하는 간격입니다. 조금씩 이동하면 값도 부드럽게 바뀝니다.

노이즈를 쓸 때는 항상 다음 세 줄 구조를 따릅니다. 1. draw() 밖에 let xOff = 0;으로 오프셋을 선언합니다. 2. draw() 안에서 noise(xOff)로 값을 읽습니다. 3. draw() 안에서 xOff += 0.01;로 오프셋을 조금씩 늘립니다.

let xOff = 0;             // draw() 밖에서 선언

function setup() {
  createCanvas(400, 400);
}

function draw() {
  let value = noise(xOff);   // 오프셋 위치의 값을 읽음 (0~1)
  // value 활용...
  xOff += 0.01;              // 다음 프레임을 위해 한 걸음 이동
}

xOff += 0.01;의 0.01은 부드러움을 조절하는 값입니다. 산맥 위에서 한 걸음의 크기라고 생각하면 됩니다.

걸음이 작으면 산 높이가 조금씩만 달라져 부드럽고, 걸음이 크면 한 번에 멀리 가서 높이가 확 달라져 거칠어집니다. 걸음이 1.0처럼 너무 크면 매번 산맥의 완전히 다른 곳에 떨어져 random()과 구별이 안 됩니다.

step 값을 0.005 → 0.01 → 0.05 → 0.1 → 1.0로 바꿔 가며 실행하면 차이를 확인할 수 있습니다.

let xOff = 0;
let step = 0.01;   // 이 값에 따라 부드러움이 달라짐

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(240);
  let y = noise(xOff) * height;
  fill(50, 100, 255);
  noStroke();
  ellipse(width / 2, y, 40, 40);
  xOff += step;
  fill(0);
  textSize(16);
  text("step: " + step, 10, 30);
}

0.005면 거의 멈춘 듯 부드럽고, 0.05쯤이면 꽤 빠르며, 1.0이면 움직임이 급격하게 변합니다. 증가값 하나로 작품 분위기 전체가 바뀝니다. 보통 0.01~0.05 사이에서 시작하면 무난합니다.

핵심 개념 4: map()으로 노이즈 값 길들이기

noise()가 돌려주는 값은 항상 0 이상 1 이하입니다. 그런데 실제로 필요한 범위는 0~1이 아닌 경우가 많습니다. 좌표는 0~400, 크기는 20~80, 색은 0~255처럼요.

그래서 noise() 옆에는 거의 항상 map()이 따라옵니다. 5주차에서 배운 값을 다른 범위로 바꾸는 함수입니다.

// noise()는 0~1 → map()으로 원하는 범위로 번역
let y = map(noise(xOff), 0, 1, 100, 300);      // 0~1 을 100~300 으로
let size = map(noise(sizeOff), 0, 1, 20, 80);  // 0~1 을 20~80 으로

noise() 값은 그대로 쓰기보다 map()으로 좌표·크기·색 범위에 맞춰 바꿔 씁니다.

크기를 노이즈로 맥동시키는 예제로 map()을 확인합니다.

let sizeOff = 0;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  let size = map(noise(sizeOff), 0, 1, 20, 80);
  fill(100, 150, 255);
  noStroke();
  ellipse(width / 2, height / 2, size, size);
  sizeOff += 0.02;
}

원의 크기가 부드럽게 커졌다 작아졌다 합니다. noise()로 크기를 정하고 map()으로 20~80 범위로 번역했을 뿐인데 유기적인 느낌이 납니다.