🎓 16주차 : 물리 시뮬레이션 기반 아트 (Artworks based on Physical Simulation)

BamgasiJM·2025년 11월 6일

p5.js class

p5.js Art

목록 보기

27/67

✅ 예제 1 : Spring–Mass “Jelly Blob”

(후크법칙 + 감쇠)

질점 i의 힘:
$F = Σ k (|Δx|−L) n − c v (+ 중력/외력)$
세미-implicit Euler:
$v += (F/m)·dt$
$x += v·dt$
원형(Closed loop)으로 연결하면 젤리처럼 출렁
rest를 균등 간격으로 두고 k, c를 튜닝 → 발산 없이 출렁
마우스 드래그는 “가상 스프링”으로 연결 → 자연스럽게 끌림

// === Jelly Blob — Spring-Mass Ring ===
let pts = [];
let springs = [];
const N = 64; // 질점 개수(원을 이루는 점)
const R = 180; // 초기 반지름
const k = 180; // 스프링 상수
const c = 1.6; // 감쇠 계수
const rest = (2 * Math.PI * R) / N; // 이웃점 간 자연길이(대략)
const mass = 1;
const gravity = 300; // 아래로 당기는 힘 (시각화용 과장)
let dragging = -1;

function setup() {
  createCanvas(800, 500);
  for (let i = 0; i < N; i++) {
    let a = (i / N) * TWO_PI;
    pts.push({
      x: width / 2 + R * Math.cos(a),
      y: height / 2 + R * Math.sin(a),
      vx: 0,
      vy: 0,
    });
    springs.push([i, (i + 1) % N]); // 이웃 연결(원)
  }
  noFill();
}

function mousePressed() {
  // 가장 가까운 점 잡아끌기
  let best = -1,
    bestD = 9999;
  for (let i = 0; i < N; i++) {
    let d = dist(mouseX, mouseY, pts[i].x, pts[i].y);
    if (d < bestD && d < 30) {
      bestD = d;
      best = i;
    }
  }
  dragging = best;
}
function mouseReleased() {
  dragging = -1;
}

function draw() {
  background(15);
  const dt = 1 / 60;

  // 외력 + 스프링 힘
  for (let i = 0; i < N; i++) {
    let p = pts[i];
    let fx = 0,
      fy = gravity * mass; // 중력
    // 이웃 스프링
    for (let s = 0; s < springs.length; s++) {
      const [a, b] = springs[s];
      if (a !== i && b !== i) continue;
      const j = a === i ? b : a;
      const q = pts[j];
      const dx = q.x - p.x,
        dy = q.y - p.y;
      const L = Math.hypot(dx, dy) || 1e-6;
      const nux = dx / L,
        nuy = dy / L; // 단위벡터
      const stretch = L - rest; // 변형량
      fx += k * stretch * nux;
      fy += k * stretch * nuy;
    }
    // 점성 감쇠(속도 비례 저항)
    fx += -c * p.vx;
    fy += -c * p.vy;

    // 마우스로 끌기(가상 스프링)
    if (i === dragging) {
      const kDrag = 600;
      fx += kDrag * (mouseX - p.x);
      fy += kDrag * (mouseY - p.y);
    }

    // 적분 (semi-implicit Euler)
    p.vx += (fx / mass) * dt;
    p.vy += (fy / mass) * dt;
  }
  for (let i = 0; i < N; i++) {
    pts[i].x += pts[i].vx * dt;
    pts[i].y += pts[i].vy * dt;
  }

  // 경계 간단 처리(벽에 부딪히면 반사 + 감쇠)
  for (let p of pts) {
    if (p.x < 20) {
      p.x = 20;
      p.vx *= -0.4;
    }
    if (p.x > width - 20) {
      p.x = width - 20;
      p.vx *= -0.4;
    }
    if (p.y < 20) {
      p.y = 20;
      p.vy *= -0.4;
    }
    if (p.y > height - 20) {
      p.y = height - 20;
      p.vy *= -0.4;
    }
  }

  // 렌더(블랍 메쉬 + 외곽선)
  fill(90, 150, 255, 150);
  stroke(200, 200, 255);
  strokeWeight(2);
  beginShape();
  for (let p of pts) vertex(p.x, p.y);
  endShape(CLOSE);

  // 점 표시
  noStroke();
  for (let p of pts) {
    fill(250, 120, 155);
    circle(p.x, p.y, 6);
  }
}

✅ 예제 2 : Collision Particles

(PBD 느낌의 위치기반 충돌 해소)

예측 위치로 적분 → 위치 제약 해결(충돌, 경계) → 속도 갱신
원 충돌: pen = rA + rB − |Δx|, 보정 벡터를 양쪽에 반씩 적용
시각화를 위해 여러 번의 충돌 반복(Iterations)

// === Many Disks — Position-Based Collision ===
let P = [];
const COUNT = 160;
const R = 6;
const SUBSTEPS = 1;
const ITER = 3;     // 충돌 반복
const DAMP = 0.997; // 약간의 감쇠

function setup() {
  createCanvas(700, 500);
  for (let i = 0; i < COUNT; i++) {
    P.push({
      x: random(80, width-80),
      y: random(80, height-80),
      vx: random(-60, 60),
      vy: random(-60, 60),
      r: R + random(-2, 2),
      col: color(random(140,220), random(140,220), 255, 200),
    });
  }
}

function draw() {
  background(15);
  const dt = 1/60;

  for (let s = 0; s < SUBSTEPS; s++) {
    // 예측 이동
    for (let p of P) {
      p.vy += 400 * dt;         // 중력
      p.x += p.vx * dt;
      p.y += p.vy * dt;
    }

    // 경계(벽) 제약
    for (let p of P) {
      if (p.x < p.r) { p.x = p.r; p.vx *= -0.6; }
      if (p.x > width - p.r) { p.x = width - p.r; p.vx *= -0.6; }
      if (p.y < p.r) { p.y = p.r; p.vy *= -0.6; }
      if (p.y > height - p.r) { p.y = height - p.r; p.vy *= -0.6; }
    }

    // 원-원 충돌 (ITER 번 반복해 수렴성↑)
    for (let it = 0; it < ITER; it++) {
      for (let i = 0; i < P.length; i++) {
        for (let j = i+1; j < P.length; j++) {
          let A = P[i], B = P[j];
          let dx = B.x - A.x, dy = B.y - A.y;
          let L2 = dx*dx + dy*dy;
          let r = A.r + B.r;
          if (L2 > 0 && L2 < r*r) {
            let L = Math.sqrt(L2);
            let pen = r - L;
            let nx = dx / L, ny = dy / L;
            // 반반 보정
            A.x -= nx * pen * 0.5; A.y -= ny * pen * 0.5;
            B.x += nx * pen * 0.5; B.y += ny * pen * 0.5;
            // 속도도 살짝 반사 느낌
            let relvx = B.vx - A.vx, relvy = B.vy - A.vy;
            let vn = relvx * nx + relvy * ny;
            if (vn < 0) {
              let imp = -0.8 * vn;
              A.vx -= imp * nx * 0.5; A.vy -= imp * ny * 0.5;
              B.vx += imp * nx * 0.5; B.vy += imp * ny * 0.5;
            }
          }
        }
      }
    }

    // 감쇠
    for (let p of P) {
      p.vx *= DAMP; p.vy *= DAMP;
    }
  }

  // 렌더
  noStroke();
  for (let p of P) {
    fill(p.col);
    circle(p.x, p.y, p.r*2);
  }
}

✅ 예제 3 : 2D Stable Fluids

(속도장 + 염료장, 반-실시간)

Advection(이류): 반-라그랑주(뒤로 추적) 샘플
Diffusion(확산): Jacobi 반복으로 선형계 근사
Projection: 발산=0 되도록 압력 풀고 v ← v − ∇p
마우스로 힘 추가(velocity) + 염료 주입(dye)
해상도를 낮게(N=64) 두고 반복 횟수(JACOBI=15)로 타협. p5의 pixels[]로 렌더.
마우스 드래그가 속도장을 직접 흔듦(+ 염료 주입) → 와류가 생김
Projection 으로 발산을 제거 → “물 같은” 질감 유지
해상도를 낮춰 CPU에서도 프레임 유지

// === 2D Fluid — Stable Fluids Mini ===
const N = 64;             // 그리드 해상도(정사각)
// 인덱싱 헬퍼
const idx = (x, y) => x + y * N;

let u, v, u0, v0;         // 속도장(u,v) + 임시
let d, d0;                // 염료(dye)
const diff = 0.0001;      // 확산 계수
const visc = 0.0001;      // 점도
const JACOBI = 15;
let prevMouse;

function setup() {
  createCanvas(600, 600);
  pixelDensity(1);
  u = new Float32Array(N*N);
  v = new Float32Array(N*N);
  u0 = new Float32Array(N*N);
  v0 = new Float32Array(N*N);
  d  = new Float32Array(N*N);
  d0 = new Float32Array(N*N);
  prevMouse = createVector(mouseX, mouseY);
}

function draw() {
  background(0);
  const dt = 1/60;

  // 1) 마우스 힘/염료 주입
  if (mouseIsPressed) {
    let cx = floor(map(mouseX, 0, width, 1, N-2));
    let cy = floor(map(mouseY, 0, height, 1, N-2));
    let pm = createVector(prevMouse.x, prevMouse.y);
    let mv = createVector(mouseX, mouseY).sub(pm).mult(0.5);
    addVelocity(cx, cy, mv.x, mv.y);
    addDye(cx, cy, 50.0);
  }
  prevMouse.set(mouseX, mouseY);

  // 2) 속도 단계
  diffuse(u0, u, visc, dt);
  diffuse(v0, v, visc, dt);
  project(u0, v0, u, v);          // 압력/발산 제거
  advect(u, u0, u0, v0, dt);
  advect(v, v0, u0, v0, dt);
  project(u, v, u0, v0);

  // 3) 염료 단계
  diffuse(d0, d, diff, dt);
  advect(d, d0, u, v, dt);

  // 4) 렌더
  loadPixels();
  for (let j = 0; j < N; j++) {
    for (let i = 0; i < N; i++) {
      const val = d[idx(i,j)];
      const c = constrain(val, 0, 255);
      // 업샘플링(그리드→화면)
      const x0 = floor(map(i, 0, N, 0, width));
      const y0 = floor(map(j, 0, N, 0, height));
      const x1 = floor(map(i+1, 0, N, 0, width));
      const y1 = floor(map(j+1, 0, N, 0, height));
      for (let y = y0; y < y1; y++) {
        for (let x = x0; x < x1; x++) {
          const p = 4 * (x + y * width);
          pixels[p] = c * 0.6;       // R
          pixels[p+1] = c * 0.8;     // G
          pixels[p+2] = 30;         // B
          pixels[p+3] = 255;
        }
      }
    }
  }
  updatePixels();
}

// ===== 간단 유틸 =====
function addVelocity(i, j, ax, ay){
  const id = idx(i, j);
  u[id] += ax; v[id] += ay;
}
function addDye(i, j, amount){
  const id = idx(i, j);
  d[id] += amount;
}

// 경계 조건: 벽에서 속도 반사, 염료 네움
function setBounds(x){
  // 좌우/상하에 간단 경계
  for (let i = 1; i < N-1; i++) {
    x[idx(i,0)]     = x[idx(i,1)];
    x[idx(i,N-1)]   = x[idx(i,N-2)];
    x[idx(0,i)]     = x[idx(1,i)];
    x[idx(N-1,i)]   = x[idx(N-2,i)];
  }
}

// 확산: (I - a∇²) x = b  ~ Jacobi 반복
function diffuse(x, b, diffc, dt){
  const a = dt * diffc * (N-2)*(N-2);
  x.fill(0);
  for (let k = 0; k < JACOBI; k++){
    for (let j = 1; j < N-1; j++){
      for (let i = 1; i < N-1; i++){
        x[idx(i,j)] = (b[idx(i,j)] + a * (
          x[idx(i-1,j)] + x[idx(i+1,j)] +
          x[idx(i,j-1)] + x[idx(i,j+1)]
        )) / (1 + 4*a);
      }
    }
    setBounds(x);
  }
}

// 이류: 뒤로 추적(반-라그랑주), bilinear 샘플
function advect(dout, din, u, v, dt){
  const h = 1.0 / N;
  for (let j = 1; j < N-1; j++){
    for (let i = 1; i < N-1; i++){
      let x = i - dt * u[idx(i,j)] * h * (N-2);
      let y = j - dt * v[idx(i,j)] * h * (N-2);
      x = constrain(x, 0.5, N-1.5);
      y = constrain(y, 0.5, N-1.5);
      const i0 = floor(x), j0 = floor(y);
      const i1 = i0 + 1, j1 = j0 + 1;
      const sx = x - i0, sy = y - j0;
      const d00 = din[idx(i0,j0)];
      const d10 = din[idx(i1,j0)];
      const d01 = din[idx(i0,j1)];
      const d11 = din[idx(i1,j1)];
      dout[idx(i,j)] =
        (1-sx)*(1-sy)*d00 + sx*(1-sy)*d10 +
        (1-sx)*sy*d01    + sx*sy*d11;
    }
  }
  setBounds(dout);
}

// 발산 제거(Projection): 압력 풀고 v에서 ∇p 빼기
function project(u, v, p, div){
  // div = ∂u/∂x + ∂v/∂y
  for (let j = 1; j < N-1; j++){
    for (let i = 1; i < N-1; i++){
      div[idx(i,j)] = -0.5 * (
        u[idx(i+1,j)] - u[idx(i-1,j)] +
        v[idx(i,j+1)] - v[idx(i,j-1)]
      );
      p[idx(i,j)] = 0;
    }
  }
  setBounds(div); setBounds(p);

  // Poisson: ∇²p = div (Jacobi)
  for (let k = 0; k < JACOBI; k++){
    for (let j = 1; j < N-1; j++){
      for (let i = 1; i < N-1; i++){
        p[idx(i,j)] = (div[idx(i,j)] + (
          p[idx(i-1,j)] + p[idx(i+1,j)] +
          p[idx(i,j-1)] + p[idx(i,j+1)]
        )) / 4;
      }
    }
    setBounds(p);
  }

  // v ← v − ∇p
  for (let j = 1; j < N-1; j++){
    for (let i = 1; i < N-1; i++){
      u[idx(i,j)] -= 0.5 * (p[idx(i+1,j)] - p[idx(i-1,j)]);
      v[idx(i,j)] -= 0.5 * (p[idx(i,j+1)] - p[idx(i,j-1)]);
    }
  }
  setBounds(u); setBounds(v);
}

✅ 예제 4 : Cloth Wave Sculpture

(마우스로 천 휘날리기)

let clothW = 80;
let clothH = 80;
let spacing = 9.5;

let points = [];
let constraints = [];
let gravity = 0.1;
let windStrength = 2.0;
let ITER = 10; // constraint 반복 횟수

function setup() {
  createCanvas(800, 800);
  initCloth();
}

function draw() {
  background(15);

  applyPhysics();
  satisfyConstraints();
  renderCloth();
}

// ----------------------------------------------------
// 1. Cloth 생성
// ----------------------------------------------------
function initCloth() {
  points = [];
  constraints = [];

  for (let y = 0; y < clothH; y++) {
    for (let x = 0; x < clothW; x++) {
      let px = 20 + x * spacing;
      let py = 20 + y * spacing;
      points.push(new Point(px, py, y === 0)); // 맨 윗줄은 고정 가능
    }
  }

  // 이웃 연결
  for (let y = 0; y < clothH; y++) {
    for (let x = 0; x < clothW; x++) {
      if (x < clothW - 1)
        constraints.push(new Constraint(idx(x, y), idx(x + 1, y)));
      if (y < clothH - 1)
        constraints.push(new Constraint(idx(x, y), idx(x, y + 1)));
    }
  }
}

function idx(x, y) {
  return x + y * clothW;
}

// ----------------------------------------------------
// 2. Point 클래스 (Verlet Integration)
// ----------------------------------------------------
class Point {
  constructor(x, y, pin = false) {
    this.x = x;
    this.y = y;
    this.px = x;
    this.py = y;
    this.pin = pin;
  }

  applyForce(fx, fy) {
    if (this.pin) return;
    this.x += fx;
    this.y += fy;
  }

  update() {
    if (this.pin) return;

    let vx = this.x - this.px;
    let vy = this.y - this.py;

    this.px = this.x;
    this.py = this.y;

    this.x += vx;
    this.y += vy + gravity;
  }
}

// ----------------------------------------------------
// 3. Constraint 클래스 (거리 제약)
// ----------------------------------------------------
class Constraint {
  constructor(a, b) {
    this.a = a;
    this.b = b;
    this.restLength = spacing;
  }

  satisfy() {
    let pA = points[this.a];
    let pB = points[this.b];

    let dx = pB.x - pA.x;
    let dy = pB.y - pA.y;
    let dist = sqrt(dx * dx + dy * dy);
    let diff = (this.restLength - dist) / dist;

    let moveX = dx * diff * 0.5;
    let moveY = dy * diff * 0.5;

    if (!pA.pin) {
      pA.x -= moveX;
      pA.y -= moveY;
    }
    if (!pB.pin) {
      pB.x += moveX;
      pB.y += moveY;
    }
  }
}

// ----------------------------------------------------
// 4. 전체 물리 적용
// ----------------------------------------------------
function applyPhysics() {
  // 바람 (Simplex noise 기반)
  let t = frameCount * 0.02;

  for (let i = 0; i < points.length; i++) {
    let p = points[i];

    // 바람 (x방향 힘)
    let wind = windStrength * (noise(i * 0.1, t) - 0.5);

    p.applyForce(wind, 0);
    p.update();
  }
}

// ----------------------------------------------------
// 5. 제약 만족 반복(천 형태 유지)
// ----------------------------------------------------
function satisfyConstraints() {
  for (let k = 0; k < ITER; k++) {
    for (let c of constraints) {
      c.satisfy();
    }
  }
}

// ----------------------------------------------------
// 6. 렌더링
// ----------------------------------------------------
function renderCloth() {
  noStroke();

  for (let y = 0; y < clothH - 1; y++) {
    for (let x = 0; x < clothW - 1; x++) {
      let p = points[idx(x, y)];
      let pR = points[idx(x + 1, y)];
      let pD = points[idx(x, y + 1)];
      let pDR = points[idx(x + 1, y + 1)];

      // 높이에 따라 색상 그라데이션
      let c = map(p.y, 0, height, 80, 180);
      fill(c, 120, 255 - c, 180);

      beginShape();
      vertex(p.x, p.y);
      vertex(pR.x, pR.y);
      vertex(pDR.x, pDR.y);
      vertex(pD.x, pD.y);
      endShape(CLOSE);
    }
  }

  // point 디버그용(끄고 싶으면 주석처리)
  /*
  fill(255);
  for (let p of points) circle(p.x, p.y, 3);
  */
}

// ----------------------------------------------------
// 추가: 마우스로 천 당기기
// ----------------------------------------------------
function mouseDragged() {
  let closest = -1;
  let best = 9999;

  for (let i = 0; i < points.length; i++) {
    let d = dist(mouseX, mouseY, points[i].x, points[i].y);
    if (d < best && d < 30) {
      best = d;
      closest = i;
    }
  }

  if (closest !== -1) {
    let p = points[closest];
    p.x = mouseX;
    p.y = mouseY;
  }
}

✅ 예제 5 : Conservation of Angular Momentum

일정 반지름 밖으로 돌고 있는 물체가 중심으로 가까워지면서 회전 속도가 빨라지는 각운동량 보존 법칙을 표현

각운동량 보존 법칙

외부 토크가 작용하지 않는 계에서 각운동량 L 은 보존된다.

$L = m r^2 ω$

m : 질량
r : 회전 반지름
ω : 각속도

본 시뮬레이션에서는 질량 m 을 상수로 두므로 다음과 같이 단순화한다.

$r^2 ω = constant$

즉, 반지름이 감소하면 각속도는 증가하고 반지름이 증가하면 각속도는 감소한다.

시뮬레이션 동작 규칙

초기 반지름은 300, 별은 중심을 기준으로 일정 각속도로 회전 중.
마우스를 누르고 있는 동안
- 반지름이 점점 감소 + 각운동량 보존에 의해 회전 속도는 증가.
마우스를 떼면
- 반지름이 다시 원래 궤도로 복귀 + 회전 속도는 다시 감소.

좌표 계산 방식

회전은 rotate()를 사용하지 않고 극좌표 → 직교좌표 변환으로 직접 계산한다.

x = r cos(θ)
y = r sin(θ)

let angle = 0;

// 반지름
let r = 300;
let baseR = 300;

// 각속도
let omega = 0.01;
let baseOmega = 0.01;

// 각운동량 상수 (r^2 * omega)
let angularMomentum;

function setup() {
  createCanvas(800, 800);
  angularMomentum = baseR * baseR * baseOmega;
}

function draw() {
  background(255);

  translate(width / 2, height / 2);

  // 마우스 입력에 따른 반지름 변화
  if (mouseIsPressed) {
    r -= 1.5;
    r = max(r, 80); // 중심으로 완전히 떨어지지 않도록 제한
  } else {
    r += 1.5;
    r = min(r, baseR);
  }

  // 각운동량 보존: r^2 * omega = constant
  omega = angularMomentum / (r * r);

  // 각도 업데이트
  angle += omega;

  // 별 위치 계산
  let x = cos(angle) * r;
  let y = sin(angle) * r;

  // 중심 (블랙홀)
  fill(0);
  noStroke();
  ellipse(0, 0, 12, 12);

  // 별
  ellipse(x, y, 16, 16);
}

BamgasiJM

Coding Art with Blender / oF / Processing / p5.js / nannou

이전 포스트

🎓15주차: 오디오 반응 (Audio-Reactive)

다음 포스트