🎓9주차: 확산 제한 응집 (DLA)

Diffusion-Limited Aggregation (DLA)

확산 제한 응집은 “무작위로 움직이는 입자들이 서로 만나면서 뭉쳐지는 패턴”을 만드는 알고리즘입니다. 눈송이, 번개, 나뭇가지, 혈관, 광물 결정 등 자연의 분기 구조(fractal branching)를 설명하는 대표적인 원리입니다.

항목	내용
이름	Diffusion-Limited Aggregation (DLA)
의미	확산(diffusion)을 하던 입자들이 서로 달라붙으며 성장하는 집합(aggregation)을 형성
핵심 아이디어	입자들이 브라운 운동(무작위 보행)을 하다가 “핵(seed)”에 닿으면 붙는다
결과 패턴	가지 모양의 프랙탈 구조 (branching fractal)
관련 현상	눈 결정, 번개 방전, 전기 도금, 침전, 식물 뿌리, 균사체 등

작동 과정

시드(seed) 입자 하나를 중심에 둠
→ 나무의 뿌리나 눈 결정의 중심 같은 역할

새로운 입자를 화면의 외곽에 무작위로 생성

그 입자가 랜덤 워크(Random Walk) 하며 이동
(상하좌우, 혹은 대각 포함 무작위 방향으로 한 칸씩)

만약 입자가 이미 붙어있는 구조에 접촉하면
→ 그 자리에서 멈추고 구조에 흡수(attach) 됨

그다음 새로운 입자를 생성해서 같은 과정을 반복
→ 가지처럼 확장되어 자라남

자연 속 예시

❄️ 눈 결정: 중심에서 가지가 뻗으며 분기

⚡️ 번개: 전류가 가장 짧은 길을 따라 확산적으로 성장

🌿 나무: 에너지 흐름에 따라 비대칭적인 분기 구조 형성

🪨 광물 결정: 이온들이 확산되며 표면에 달라붙어 성장

연관이 있는 개념

주제	관계
랜덤(Randomness)	입자 이동의 기반 (브라운 운동)
노이즈(Noise)	확산 경로의 연속적 변형
시스템(Systems)	집단적 행동으로 복잡성 생성
형태 & 구조(Form & Structure)	단순 규칙 → 복잡한 프랙탈 구조

---

1.브라운 운동 시각화 - DLA의 기초

let walkers = [];

function setup() {
  createCanvas(800, 400);
  for (let i = 0; i < 400; i++) {
    walkers.push(createVector(width / 2, height / 2));
  }
  background(15);
  stroke(30, 240, 210, 20);
}

function draw() {
  for (let w of walkers) {
    point(w.x, w.y);
    w.x += random(-2, 2);
    w.y += random(-2, 2);

    // 경계 처리: 캔버스 안에 가두기 (Constrain)
    w.x = constrain(w.x, 0, width);
    w.y = constrain(w.y, 0, height);
  }
}

---

2. 중심에서 자라나는 입자

const MAX_PARTICLES = 1000; // 동시에 존재하는 입자 수
const STICKINESS = 5;     // 응집 거리
const WALK_STEP = 2;      // 랜덤 워크 한 번에 이동하는 거리 
const MAX_WALK_COUNT = 5; // 입자당 프레임당 랜덤 워크 횟수

let particles = [];
let stuck = [];
let maxRadius = 0;

function setup() {
  createCanvas(800, 400);
  background(15);
  colorMode(RGB, 255);

  // 초기 시드 생성
  stuck.push(createVector(width / 2, height / 2));
  maxRadius = 1;
}

function draw() {
  background(15, 15, 15, 20);

  // 1. 입자 생성: 패턴 외곽에서 생성
  if (particles.length < MAX_PARTICLES) {
    let launchRadius = maxRadius + 50;
    let angle = random(TWO_PI);
    let x = width / 2 + cos(angle) * launchRadius;
    let y = height / 2 + sin(angle) * launchRadius;
    particles.push(createVector(x, y));
  }

  // 2. 입자 이동 및 응집 확인
  for (let i = particles.length - 1; i >= 0; i--) {
    let p = particles[i];

    // 🌟 가속화 1: 입자당 여러 번의 랜덤 워크 수행 (속도 증폭)
    for (let k = 0; k < MAX_WALK_COUNT; k++) {
      p.x += random(-WALK_STEP, WALK_STEP);
      p.y += random(-WALK_STEP, WALK_STEP);
    }

    let closestDistSq = Infinity;

    // 🌟 가속화 2: 패턴 외곽에 접근했을 때만 충돌 확인
    let distFromCenter = dist(width / 2, height / 2, p.x, p.y);
    if (distFromCenter < maxRadius + STICKINESS * 2) {
      // 입자가 응집체 근처에 도달했을 때만 N*M 충돌 검사 실행
      for (let s of stuck) {
        let dSq = (p.x - s.x) ** 2 + (p.y - s.y) ** 2;
        closestDistSq = min(closestDistSq, dSq);
      }

      // 응집 조건
      if (closestDistSq < STICKINESS * STICKINESS) {
        stuck.push(p);
        particles.splice(i, 1);

        // 최대 반지름 업데이트
        if (distFromCenter > maxRadius) {
          maxRadius = distFromCenter;
        }
        break; // 응집 후 다음 입자로
      }
    }

    // 🌟 가속화 3: 너무 멀리 나간 입자 제거 (최대 반지름 + 1000 이상)
    // 패턴이 커질 때 효율적으로 입자를 제거하도록 범위 확장
    if (distFromCenter > maxRadius + 1000) {
      particles.splice(i, 1);
    }
  }

  // 3. 드로잉
  noStroke();
  fill(255);
  for (let s of stuck) circle(s.x, s.y, 3);

  fill(30, 190, 180);
  for (let p of particles) circle(p.x, p.y, 3);
}

3. 가장자리에서 중심으로

const MAX_PARTICLES = 1000;
let particles = [];
let stuck = [];

function setup() {
  createCanvas(800, 600);
  background(15);
  // 중심 seed
  stuck.push(createVector(width / 2, height / 2));
}

function draw() {
  fill(15, 15, 15, 30);
  rect(0, 0, width, height);

  // 새로운 입자 생성 (무작위 가장자리)
  if (frameCount % 1 === 0) {     // 매 프레임마다 입자 생성
    let angle = random(TWO_PI);
    let r = width / 2 - 10;
    let x = width / 2 + cos(angle) * r;
    let y = height / 2 + sin(angle) * r;
    particles.push(createVector(x, y));
  }
  
  // MAX_PARTICLES 개수보다 적을 때만 새로운 입자를 생성합니다.
  if (particles.length < MAX_PARTICLES) {
    if (frameCount % 2 === 0) {
      // ... 기존 입자 생성 코드 ...
      let angle = random(TWO_PI);
      let r = width / 2 - 10;
      let x = width / 2 + cos(angle) * r;
      let y = height / 2 + sin(angle) * r;
      particles.push(createVector(x, y));
    }
  }
  
  // 입자 이동
  for (let i = particles.length - 1; i >= 0; i--) {
    let p = particles[i];
    p.x += random(-3, 3);
    p.y += random(-3, 3);

    // 중심 쪽으로 이동
    let center = createVector(width / 2, height / 2);
    let dir = p5.Vector.sub(center, p).setMag(0.5);
    p.add(dir);

    // 붙기 검사
    for (let s of stuck) {
      if (p.dist(s) < 3) {
        stuck.push(p);
        particles.splice(i, 1);
        break;
      }
    }

    // 화면 밖 제거
    if (p.x < 0 || p.x > width || p.y < 0 || p.y > height) {
      particles.splice(i, 1);
    }
  }

  // 그리기
  noStroke();
  fill(255);
  for (let s of stuck) circle(s.x, s.y, 3);
  fill(30, 190, 180);
  for (let p of particles) circle(p.x, p.y, 2);
}

4. 색상 기반 DLA (나이에 따라 색 변화)

let particles = [];
let stuck = [];
let colors = [];

function setup() {
  createCanvas(600, 600);
  background(0);
  colorMode(HSB);
  noStroke();
  // 중심 seed
  stuck.push(createVector(width / 2, height / 2));
  colors.push(0); // generation 0
}

function draw() {
  // 일정 간격으로 입자 추가
  if (frameCount % 1 === 0) {
    let angle = random(TWO_PI);
    let r = width / 2 - 5;
    let x = width / 2 + cos(angle) * r;
    let y = height / 2 + sin(angle) * r;
    particles.push(createVector(x, y));
  }

  // 입자 이동 및 붙기 검사
  for (let i = particles.length - 1; i >= 0; i--) {
    let p = particles[i];
    p.x += random(-2, 2);
    p.y += random(-2, 2);

    // 화면 중앙으로 향하는 약한 힘
    let center = createVector(width / 2, height / 2);
    let dir = p5.Vector.sub(center, p).setMag(0.2);
    p.add(dir);

    for (let j = 0; j < stuck.length; j++) {
      let s = stuck[j];
      if (p.dist(s) < 3) {
        stuck.push(p);
        colors.push(colors[j] + 1);
        particles.splice(i, 1);
        break;
      }
    }

    // 화면 밖으로 나가면 제거
    if (p.x < 0 || p.x > width || p.y < 0 || p.y > height) {
      particles.splice(i, 1);
    }
  }

  // 붙은 입자 그리기
  for (let i = 0; i < stuck.length; i++) {
    let hue = map(colors[i], 0, 80, 0, 360) % 360;
    fill(hue, 255, 255);
    circle(stuck[i].x, stuck[i].y, 3);
  }

  // 모여드는 입자
  fill(30, 30 ,30);
  for (let p of particles) {
    circle(p.x, p.y, 2);
  }

  // 성장 제한 (화면이 가득 찼을 때 정지)
  if (stuck.length > 2000) {
    noLoop();
    console.log("DLA growth complete!");
  }
}

5. 방향성 있는 DLA (중력 & 바람)

DLA를 수행하는 파티클에 중력과 바람의 영향을 시뮬레이션할 수 있습니다. 랜덤워크를 하는 와중에도 x, y 좌표를 매 프레임마다 방향성이 있게 수치를 추가해주면 원하는 방향과 속도로 움직이면서 응집을 하게 합니다. 아래 코드는 마치 눈이 쌓이는 듯한 모습을 연출하고 있습니다.

const MAX_PARTICLES = 300;
const STICKINESS = 5;

let particles = [];
let stuck = [];

function setup() {
  createCanvas(800, 400);
  background(15);
  colorMode(RGB, 255);

  // 바닥면 전체를 시드로 설정
  let seedSpacing = 3; // 시드 간격 (간격이 좁을수록 응집이 빠르고 부드러움)

  for (let x = 0; x <= width; x += seedSpacing) {
    // 캔버스 아랫면(y = height - 1)에 시드를 배치합니다.
    stuck.push(createVector(x, height - 1));
  }
}

function draw() {
  // 배경을 투명하게 덮어 칠하여 궤적 잔상 효과 생성
  fill(15, 15, 15, 50);
  rect(0, 0, width, height);

  // 새로운 입자 생성 (위쪽에서 떨어짐)
  if (particles.length < MAX_PARTICLES) {
    if (frameCount % 1 === 0) {
      let x = random(width);
      let y = 0; // 캔버스 상단
      particles.push(createVector(x, y));
    }
  }

  // 입자 이동 및 응집 (쌓임) 검사
  for (let i = particles.length - 1; i >= 0; i--) {
    let p = particles[i];

    // 입자 이동: 중력(Y)과 바람(X)
    p.x += random(-1.5, 1.5); // x축: 바람
    p.y += random(3, 7); 	  // y축: 중력

    // 붙기(응집) 검사
    let isStuck = false;
    for (let s of stuck) {
      if (p.dist(s) < STICKINESS) {
        stuck.push(p);
        particles.splice(i, 1);
        isStuck = true;
        break;
      }
    }

    if (isStuck) continue; // 붙었으면 다음 입자로

    // 화면 밖 제거 (바닥을 지나친 입자 제거)
    if (p.y > height + 10) particles.splice(i, 1);
  }

  // 그리기
  noStroke();

  // 응집된 입자 (쌓인 눈/바닥)
  fill(255, 200);
  for (let s of stuck) circle(s.x, s.y, 10);

  // 움직이는 입자 (눈/파티클)
  fill(255, 200);
  for (let p of particles) circle(p.x, p.y, 10);
}

---