🎓 5주차: 노이즈 (Perlin / Simplex / Worley Noise)

noise는 잡음, 원치 않는 신호나 불규칙한 패턴을 뜻합니다.

일반적인 노이즈는 연속적이지 않고 급격한 변화를 보여줍니다. 그런데 Ken Perlin이 개발한 펄린 노이즈(Perlin Noise)는 부드럽고 자연스러운 패턴을 생성하는 알고리즘으로, 자연 현상에서 보이는 유기적인 패턴을 만들 때 자주 사용됩니다.
Perlin noise 위키피디아 링크

대체로 Generative Art에서 사용하는 Noise는 연속성 있는 무작위(continuous randomness)입니다. 즉, 완전히 랜덤이지만 인접한 값끼리 부드럽게 연결되어 있는 것이지요.
이걸 이용해서 자연 현상이나 텍스처, 지형, 흐름, 유기적 형태를 표현할 때 사용하는 것입니다.

Perlin Noise와 함께 잘 쓰이는 노이즈는 마찬가지로 Perlin이 2001년에 개발한 Simplex Noise입니다. 이 노이즈 알고리즘은 "고전적"인 펄린 노이즈와 유사하지만 효율성이 개선되었다고 합니다.

아래는 몇가지 노이즈 알고리즘입니다.

Noise 종류	특징	p5.js 지원 여부
Perlin Noise	부드럽고 그라디언트 기반. 자연스러운 연속성.	✅ 내장 (noise())
Simplex Noise	Perlin의 개선 버전. 고차원에서 계산이 빠르고 artifacts 적음.	❌ 외부 라이브러리 필요
OpenSimplex Noise	Simplex 특허 문제를 피한 오픈 버전.	❌ 외부 코드 필요
Worley Noise (Cellular Noise)	셀 구조 기반 패턴 (예: 암석, 피부 텍스처 등)	❌ 외부 코드 필요
Value Noise	격자점의 랜덤값을 보간한 초기 형태의 noise	❌ 직접 구현 가능

Perlin Noise BASIC

펄린 노이즈의 기본적인 1차원 라인으로 표현한 예시입니다.
왼쪽에서 오른쪽으로 부드럽게 노이즈 라인이 생겨납니다.

let xoff = 0;

function setup() {
  createCanvas(800, 400);
  background(255);
  frameRate(60);
}

function draw() {
  let y = noise(xoff) * height;
  noStroke();
  fill(0, 100);
  // x 위치: frameCount % width (스크롤처럼 표시)
  ellipse((frameCount - 1) % width, y, 8, 8);
  xoff += 0.02;

  if (frameCount > width) {
    noLoop();
  }
}

다른 느낌의 애니메이션으로 코드를 짤 수도 있습니다.
심전도기의 그래프처럼 흐르는 듯한 애니메이션을 표현했습니다.

let start = 0;

function setup() {
  createCanvas(800, 400);
  frameRate(60);
}

function draw() {
  background(25);
  noFill();
  stroke(10, 190, 180);
  strokeWeight(5);
  beginShape();
  let xoff = start;
  for (let x = 0; x < width; x++) {
    let y = noise(xoff) * height;
    vertex(x, y);
    xoff += 0.01;
  }
  endShape();

  start += 0.01;
}

---

Perlin Noise Cloud

let scale = 0.02;

function setup() {
  createCanvas(800, 400);
  pixelDensity(1); // ✅ 픽셀 밀도 1로 설정
  noLoop();
}

function draw() {
  background(25);
  loadPixels();

  for (let x = 0; x < width; x++) {
    for (let y = 0; y < height; y++) {
      let n = noise(x * scale, y * scale);
      let bright = map(n, 0, 1, 0, 255);
      // let bright = floor(n * 255);
      let idx = (x + y * width) * 4;
      
      pixels[idx] = bright;
      pixels[idx + 1] = bright;
      pixels[idx + 2] = bright;
      pixels[idx + 3] = 255;
    }
  }

  updatePixels();
}

---

Noise Flow Field

입자의 흐름을 노이즈 필드로 표현하면 이렇게 됩니다.

let inc = 0.1;
let scl = 10;
let cols, rows;
let zoff = 0;
let particles = [];
let flowfield = [];

function setup() {
  createCanvas(800, 400);
  cols = floor(width / scl);
  rows = floor(height / scl);
  flowfield = new Array(cols * rows);
  for (let i = 0; i < 2000; i++) {
    particles.push(new Particle());
  }
  background(25);
  frameRate(60);
}

function draw() {
  // build flow field
  let yoff = 0;
  for (let y = 0; y < rows; y++) {
    let xoff = 0;
    for (let x = 0; x < cols; x++) {
      let angle = noise(xoff, yoff, zoff) * TWO_PI * 4;
      let v = p5.Vector.fromAngle(angle);
      v.setMag(0.1);
      let index = x + y * cols;
      flowfield[index] = v;
      xoff += inc;
    }
    yoff += inc;
  }
  zoff += 0.003;

  // update particles
  for (let p of particles) {
    p.follow(flowfield);
    p.update();
    p.edges();
    p.show();
  }
}

// Particle class with safe follow (clamp indices)
class Particle {
  constructor() {
    this.pos = createVector(random(width), random(height));
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
    this.maxSpeed = 2;
    this.prev = this.pos.copy();
  }

  follow(vectors) {
    let x = floor(this.pos.x / scl);
    let y = floor(this.pos.y / scl);
    // 안전하게 범위 클램프
    x = constrain(x, 0, cols - 1);
    y = constrain(y, 0, rows - 1);
    let index = x + y * cols;
    let force = vectors[index];
    if (force) {
      this.applyForce(force);
    }
  }

  applyForce(force) {
    // 복사해서 적용 (원본 벡터를 mutate 하지 않음)
    let f = force.copy();
    this.acc.add(f);
  }

  update() {
    this.vel.add(this.acc);
    this.vel.limit(this.maxSpeed);
    this.pos.add(this.vel);
    this.acc.mult(0);
  }

  show() {
    stroke(30, 210, 200, 10);
    line(this.pos.x, this.pos.y, this.prev.x, this.prev.y);
    this.updatePrev();
  }

  updatePrev() {
    this.prev.x = this.pos.x;
    this.prev.y = this.pos.y;
  }

  edges() {
    if (this.pos.x > width) {
      this.pos.x = 0;
      this.updatePrev();
    }
    if (this.pos.x < 0) {
      this.pos.x = width;
      this.updatePrev();
    }
    if (this.pos.y > height) {
      this.pos.y = 0;
      this.updatePrev();
    }
    if (this.pos.y < 0) {
      this.pos.y = height;
      this.updatePrev();
    }
  }
}

---

🧠 참고

Retina 화면에서는 pixelDensity() 기본값이 2이므로
loadPixels() 시 실제 pixels[] 배열 크기가 width pixelDensity() height pixelDensity() 4가 됩니다.
직접 픽셀 배열을 조작할 때는 항상 pixelDensity(1)을 넣는 것이 안전합니다.

---

Simplex Noise BASIC (애니메이션)

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Sketch</title>

    <link rel="stylesheet" type="text/css" href="/style.css">

    <script src="/libraries/p5.min.js"></script>
    <script src="/libraries/p5.sound.min.js"></script>
  </head>

  <body>
    <!-- ES6 모듈 방식 사용 -->
    <script type="module" src="simplex_noise_basic.js"></script>
  </body>
</html>

// simplex_noise_basic.js
// ES6 모듈 방식 사용

import { createNoise3D } from "https://unpkg.com/simplex-noise@4.0.1/dist/esm/simplex-noise.js";

let noise3D;
let time = 0;

function setup() {
  createCanvas(800, 400);
  noise3D = createNoise3D();
  pixelDensity(1);
  noStroke();
}

function draw() {
  background(0);

  // 픽셀 간격을 띄워서 계산량 줄이기
  let step = 5;

  for (let x = 0; x < width; x += step) {
    for (let y = 0; y < height; y += step) {
      let noiseVal = noise3D(x * 0.005, y * 0.005, time);
      let brightness = map(noiseVal, -1, 1, 0, 255);

      fill(brightness);
      rect(x, y, step, step);
    }
  }

  time += 0.01;

  // fps 표시
  fill(255);
  text(floor(frameRate()), 10, 20);
}

window.setup = setup;
window.draw = draw;

---

Worley Noise BASIC

let points = [];

function setup() {
  createCanvas(800, 400);
  // 랜덤 특징점 생성
  for (let i = 0; i < 50; i++) {
    points.push(createVector(random(width), random(height)));
  }
}

function worleyNoise(x, y) {
  let minDist = Infinity;
  for (let point of points) {
    let distance = dist(x, y, point.x, point.y);
    minDist = min(minDist, distance);
  }
  return minDist;
}

function draw() {
  for (let x = 0; x < width; x += 2) {
    for (let y = 0; y < height; y += 2) {
      let value = worleyNoise(x, y);
      let color = map(value, 0, 100, 255, 0);
      fill(color);
      noStroke();
      rect(x, y, 2, 2);
    }
  }
  noLoop();
}

---