🎓6주차: 파티클과 에이전트 (Particle & Agent)

이번에는 파티클(Particle)과 에이전트(Agent)라는 단어가 등장합니다. 애니메이션을 보면 얼핏 비슷해보이나 행동 양식의 목표가 다르기 때문에 구분해서 사용해야 합니다.

파티클은 단순히 위치와 속도만 가진 물리적인 점입니다. 공을 던지면 물리법칙에 의해 포물선을 그리며 떨어지는데 그것을 시각화한 것이 파티클입니다. 중력을 거슬러서 올라거던, 한 점에서 퍼져나가던 정해진 법칙에 의해서 발생하고 움직이고 사리지는 작은 물체들입니다.

반면에 에이전트는 이 파티클의 성격에 규칙과 행동 양식을 더해 지능적으로 움직이게 한 것입니다. 던진 공이 장애물을 피하고 움직이는 목표물을 따라 날아가는 행동을 보이도록 한 것이 에이전트입니다. 에이전트들은 상호작용하면서 복잡한 시스템을 이룰 수 있습니다. 이때 적용되는 특징은 자율성(Autonomy), 반응성(Reactivity), 그리고 목표 지향성(Goal-Oriented)입니다. 상호작용은 창벌적 행동(emergent behavior)을 만들어내고 마치 살아있는 유기체의 패턴처럼 보이게끔 합니다.

이번 주차는 다음과 같은 소주제로 구성됩니다.

1. 기본 파티클 원리 (끊임없는 생성)
2. Attaction과 Repulsion
3. Seeking
4. Flocking / Boids
5. Flow Field
6. Path Following & Avoidance
7. Propagation & Diffusion
8. Spring & Constraints
9. Self-Organazing Map (SOM)
10. Lifespan & Emitter

1. 기본 파티클 (Basic Particle)

// 전역 배열 'particles' 선언: 생성된 모든 입자 객체들을 저장할 공간입니다.
let particles = [];

// setup() 함수: p5.js 프로그램이 시작될 때 단 한 번 실행됩니다. 초기 환경 설정을 담당합니다.
function setup() {
  // createCanvas(width, height): 캔버스(그림을 그릴 영역)의 크기를 800x400 픽셀로 설정합니다.
  createCanvas(800, 400);
}

// draw() 함수: 프로그램 실행 중 지속적으로, 초당 약 60프레임 속도로 반복 실행됩니다. 애니메이션의 핵심 루프입니다.
function draw() {
  // background(r, g, b): 매 프레임마다 배경을 어두운 회색(25)으로 칠합니다.
  // 이를 통해 이전 프레임의 입자들이 지워지고 움직이는 효과가 만들어집니다.
  background(25);

  // 새로운 입자 생성
  // particles 배열에 새로운 Particle 객체를 추가합니다.
  // width / 2는 캔버스의 가로 중앙을 의미하며, 100은 상단에서 100픽셀 아래 위치를 의미합니다.
  particles.push(new Particle(width / 2, 100));

  // 입자 업데이트 및 렌더링
  // for 루프를 사용하여 particles 배열의 모든 입자들을 순회합니다.
  // 배열 끝에서부터 시작하여 역순으로 순회하는 이유는,
  // 루프 도중에 입자를 배열에서 제거(splice)할 때 인덱스 오류를 방지하기 위함입니다.
  for (let i = particles.length - 1; i >= 0; i--) {
    // 현재 순회 중인 입자 객체를 p 변수에 할당합니다.
    let p = particles[i];
    // p.update(): 입자의 위치, 속도, 수명을 업데이트합니다.
    p.update();
    // p.show(): 캔버스에 입자를 그립니다.
    p.show();
    // p.isDead(): 입자의 수명이 다했는지 확인합니다.
    if (p.isDead()) {
      // 입자가 죽었다면, particles 배열에서 해당 입자를 제거합니다. (i번째 인덱스부터 1개)
      particles.splice(i, 1);
    }
  }
}

// Particle 클래스: 개별 입자의 속성과 동작을 정의하는 설계도입니다.
class Particle {
  // constructor(x, y): 새로운 Particle 객체가 생성될 때 초기 속성을 설정합니다.
  // x, y는 입자가 처음 생성될 초기 위치입니다.
  constructor(x, y) {
    // this.pos: p5.Vector 객체를 사용하여 입자의 위치(x, y)를 저장합니다.
    this.pos = createVector(x, y);
    // this.vel: p5.Vector 객체를 사용하여 입자의 속도(velocity)를 저장합니다.
    // p5.Vector.random2D()는 무작위 방향의 단위 벡터를 생성하고,
    // mult(random(1, 3))를 통해 속도의 크기를 1에서 3 사이의 무작위 값으로 설정하여 초기 확산 효과를 줍니다.
    this.vel = p5.Vector.random2D().mult(random(1, 3));
    // this.acc: p5.Vector 객체를 사용하여 입자의 가속도(acceleration)를 저장합니다.
    // (0, 0.05)는 y축 방향(아래쪽)으로 일정한 중력 가속도를 의미합니다.
    this.acc = createVector(0, 0.05);
    // this.lifetime: 입자의 남은 수명을 255(최대 불투명도 값)로 초기 설정합니다.
    this.lifetime = 255;
  }

  // update() 메서드: 매 프레임마다 입자의 물리적인 상태를 갱신합니다.
  update() {
    // 속도에 가속도를 더합니다 (중력의 영향으로 속도가 점점 빨라짐).
    this.vel.add(this.acc);
    // 위치에 현재 속도를 더합니다 (실제 입자 이동).
    this.pos.add(this.vel);
    // 수명을 2씩 감소시킵니다 (점점 투명해지고 사라짐).
    this.lifetime -= 2;
  }

  // show() 메서드: 현재 위치와 수명(투명도)을 기반으로 입자를 화면에 그립니다.
  show() {
    // noStroke(): 입자 도형의 테두리 선을 그리지 않도록 설정합니다.
    noStroke();
    // fill(r, g, b, alpha): 입자의 채우기 색상을 설정합니다.
    // 노란색(210, 180, 30)에 현재 수명(this.lifetime)을 투명도(alpha)로 사용하여
    // 시간이 지날수록 입자가 흐릿해지도록 만듭니다.
    fill(210, 180, 30, this.lifetime);
    // ellipse(x, y, w, h): 현재 위치(this.pos.x, this.pos.y)에 지름 8픽셀의 원을 그립니다.
    ellipse(this.pos.x, this.pos.y, 8);
  }

  // isDead() 메서드: 입자가 제거되어야 할 시점을 판단합니다.
  isDead() {
    // 수명이 0보다 작아지면 true를 반환하여 입자가 '죽었음'을 알립니다.
    return this.lifetime < 0;
  }
}

📘 핵심 개념

• 개별 입자 = 위치 + 속도 + 가속도 + 수명
• 매 프레임마다 물리 갱신 → 수명 감소 → 삭제
• 시스템 = 개별 입자들의 집합

2. 끌림 / 반발 (Attraction / Repulsion)

• 개념: 물리 법칙을 시뮬레이션하는 데 중점을 둡니다. 두 물체 사이에 작용하는 힘(Force)의 크기를 거리의 제곱에 반비례하게 계산합니다 (만유인력).

• 로직의 핵심:목표 지점까지의 거리 $d$와 방향 $\mathbf{r}$을 계산합니다.힘의 크기 $F$를 계산합니다. (일반적으로 $F = \frac{G \cdot m_1 \cdot m_2}{d^2}$ 이지만, 단순화하여 $F = \frac{G}{d}$ 등으로 사용되기도 합니다.)이 힘을 가속도에 직접 적용합니다.

• 결과: 목표 지점에 도달할 때 속도를 조절하는 메커니즘(조향력)이 없으면, 관성 때문에 목표 지점을 통과하여 튕겨 나가거나 목표 주변을 진동하며 맴도는 (궤도를 도는) 경향이 강합니다.

let particles = [];
let attractMode = true; // true면 끌림, false면 밀어냄

function setup() {
  createCanvas(800, 400);
  for (let i = 0; i < 2000; i++) {
    particles.push(new Particle(random(width), random(height)));
  }
}

function draw() {
  background(2, 10);
  fill(255);
  noStroke();
  text(attractMode ? "Attraction Mode" : "Repulsion Mode", 10, 20);

  for (let p of particles) {
    p.behaviors();
    p.update();
    p.show();
  }
}

function mousePressed() {
  attractMode = !attractMode;
}

class Particle {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = p5.Vector.random2D();
    this.acc = createVector();
  }

  behaviors() {
    let mouse = createVector(mouseX, mouseY);
    let dir = p5.Vector.sub(mouse, this.pos);
    let d = dir.mag();
    d = constrain(d, 10, 30);
    dir.normalize();

    let strength = attractMode ? 5.0 / d : -5.0 / d;
    dir.mult(strength);
    this.acc = dir;
  }

  update() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.vel.limit(5);
  }

  show() {
    stroke(255);
    strokeWeight(4);
    point(this.pos.x, this.pos.y);
  }
}

📘 핵심 개념

• 행동(Behavior) = 외부 자극에 대한 반응 (마우스 위치)
• 힘(Force) = 거리 기반 벡터 (끌림/밀림)
• 모드 전환: 클릭할 때마다 attract ↔ repulse

3.추적 (Seeking)

• 개념: Steering Behavior (조향 행동)의 일종입니다. 에이전트(파티클)가 목표 지점(Target)으로 가장 효율적인 경로를 찾아가도록 방향을 조절하는 데 중점을 둡니다.

• 로직의 핵심:

1. 목표 지점까지의 방향을 계산합니다.
2. 이 방향을 향하는 희망 속도(Desired Velocity)를 설정합니다.
3. 조향력 (Steering Force) = 희망 속도 - 현재 속도를 계산합니다.
4. 이 조향력에 최대 조향력 (maxForce) 제한을 걸어 부드러운 움직임을 만듭니다.

• 결과: 목표 지점에 도달하면 속도를 줄이고 멈추려는 경향이 있습니다. 목표 주변을 맴돌지 않고 정착합니다.

// sketch.js

let NUM_AGENTS = 80;
let agents = [];

function setup() {
  createCanvas(800, 400);
  background(25);  // 캔버스를 깨끗하게 시작

  for (let i = 0; i < NUM_AGENTS; i++) {
    let start = createVector(
      width / 2 + random(-20, 20),
      height / 2 + random(-20, 20)
    );
    agents.push(new Agent(start));
  }
}

function draw() {
  // 배경: 어두운 회색 (25) 및 꼬리 효과
  fill(0, 5);
  noStroke();
  rect(0, 0, width, height);

  let target = createVector(mouseX, mouseY);

  for (let agent of agents) {
    // --- 1. 두 가지 힘 계산 ---

    // 1-1. 분리(Separation) 힘 계산: 다른 에이전트로부터 멀어지려는 힘
    let separation = agent.separate(agents);

    // 1-2. 추적(Seeking) 힘 계산: 목표 지점(마우스)을 향해 가려는 힘
    let seeking = agent.seek(target);

    // --- 2. 힘에 가중치를 부여하고 적용 ---

    // 분리 힘에 더 높은 가중치(1.2)를 부여하여 겹치는 것을 방지
    separation.mult(1.2);
    // 추적 힘에는 표준 가중치(1.0) 부여
    seeking.mult(1.0);

    // 계산된 힘을 모두 적용
    agent.applyForce(separation);
    agent.applyForce(seeking);

    // --- 3. 업데이트 및 렌더링 ---
    agent.update();
    agent.checkEdges();
    agent.display();
  }
}

// ---------------------------------------------------------------------
// Agent 클래스 정의 (seperation 로직 및 seeking 로직 )
// ---------------------------------------------------------------------
class Agent {
  constructor(l) {
    this.position = l;
    this.velocity = p5.Vector.random2D();
    this.acceleration = createVector(0, 0);

    this.maxSpeed = 2.0;
    this.maxForce = 0.2;
    this.radius = 2;

    // 객체 색상: 산호색(Coral, RGB: 255, 127, 80)
    this.agentColor = color(255, 127, 80);
  }

  applyForce(force) {
    this.acceleration.add(force);
  }

  // Seeking 메서드가 힘을 바로 적용하지 않고 Steering Force 벡터를 반환하도록 수정
  seek(target) {
    let desired = p5.Vector.sub(target, this.position);
    desired.normalize();
    desired.mult(this.maxSpeed);

    let steer = p5.Vector.sub(desired, this.velocity);
    steer.limit(this.maxForce);

    return steer; // 힘을 반환
  }

  // --- 새로 추가된 Separation (분리) 행동 구현 ---
  separate(agents) {
    let desiredSeparation = this.radius * 2 + 10; // 너무 가까워지면 분리 시작할 거리
    let sum = createVector(0, 0);
    let count = 0;

    for (let other of agents) {
      let d = p5.Vector.dist(this.position, other.position);

      // 다른 에이전트이고, 너무 가까이 있다면
      if (d > 0 && d < desiredSeparation) {
        // 이웃으로부터 멀어지는 방향 벡터 계산
        let diff = p5.Vector.sub(this.position, other.position);
        diff.normalize();
        // 거리가 가까울수록 강한 힘을 부여 (거리의 제곱이 아닌, 단순 거리로 나눔)
        diff.div(d);
        sum.add(diff);
        count++;
      }
    }

    if (count > 0) {
      sum.div(count); // 평균 분리 방향 계산

      // Steering Behavior 로직을 적용하여 최종 분리 힘 계산
      sum.normalize();
      sum.mult(this.maxSpeed);

      let steer = p5.Vector.sub(sum, this.velocity);
      steer.limit(this.maxForce);
      return steer;
    }
    return createVector(0, 0);
  }
  // -------------------------------------------------------

  update() {
    this.velocity.add(this.acceleration);
    this.velocity.limit(this.maxSpeed);
    this.position.add(this.velocity);
    this.acceleration.mult(0);
  }

  checkEdges() {
    if (this.position.x > width) this.position.x = 0;
    else if (this.position.x < 0) this.position.x = width;
    if (this.position.y > height) this.position.y = 0;
    else if (this.position.y < 0) this.position.y = height;
  }

  display() {
    stroke(this.agentColor);
    fill(this.agentColor, 200);
    ellipse(this.position.x, this.position.y, this.radius * 2, this.radius * 2);
  }
}

4.군집 행동 (Flocking / Boids Algorithm)

// Separation (분리) : 너무 가까우면 멀어지게
// Alignment (정렬) : 주변의 평균 속도와 비슷하게
// Cohesion (응집) : 주변 개체의 중심으로 이동
let flock = [];

function setup() {
  createCanvas(800, 400);
  for (let i = 0; i < 250; i++) {
    flock.push(new Boid());
  }
}

function draw() {
  background(25);
  for (let boid of flock) {
    boid.flock(flock);
    boid.update();
    boid.edges();
    boid.show();
  }
}

class Boid {
  constructor() {
    this.pos = createVector(random(width), random(height));
    this.vel = p5.Vector.random2D();
    this.vel.setMag(random(2, 4));
    this.acc = createVector();
    this.maxForce = 0.1;
    this.maxSpeed = 2;
  }

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

  align(boids) {
    let perception = 50;
    let steering = createVector();
    let total = 0;
    for (let other of boids) {
      let d = dist(this.pos.x, this.pos.y, other.pos.x, other.pos.y);
      if (other != this && d < perception) {
        steering.add(other.vel);
        total++;
      }
    }
    if (total > 0) {
      steering.div(total);
      steering.setMag(this.maxSpeed);
      steering.sub(this.vel);
      steering.limit(this.maxForce);
    }
    return steering;
  }

  cohesion(boids) {
    let perception = 50;
    let steering = createVector();
    let total = 0;
    for (let other of boids) {
      let d = dist(this.pos.x, this.pos.y, other.pos.x, other.pos.y);
      if (other != this && d < perception) {
        steering.add(other.pos);
        total++;
      }
    }
    if (total > 0) {
      steering.div(total);
      steering.sub(this.pos);
      steering.setMag(this.maxSpeed);
      steering.sub(this.vel);
      steering.limit(this.maxForce);
    }
    return steering;
  }

  separation(boids) {
    let perception = 24;
    let steering = createVector();
    let total = 0;
    for (let other of boids) {
      let d = dist(this.pos.x, this.pos.y, other.pos.x, other.pos.y);
      if (other != this && d < perception) {
        let diff = p5.Vector.sub(this.pos, other.pos);
        diff.div(d * d);
        steering.add(diff);
        total++;
      }
    }
    if (total > 0) {
      steering.div(total);
      steering.setMag(this.maxSpeed);
      steering.sub(this.vel);
      steering.limit(this.maxForce);
    }
    return steering;
  }

  flock(boids) {
    let alignment = this.align(boids);
    let cohesion = this.cohesion(boids);
    let separation = this.separation(boids);

    // 각 규칙의 영향 가중치
    separation.mult(1.5);
    alignment.mult(1.0);
    cohesion.mult(1.0);

    this.acc.add(alignment);
    this.acc.add(cohesion);
    this.acc.add(separation);
  }

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

  show() {
    strokeWeight(6);
    stroke(150, 255, 30);
    point(this.pos.x, this.pos.y);
  }
}

📘 핵심 개념

• 복잡한 패턴 = 단순 규칙들의 상호작용
• 전역 제어 없이 “자율적인” 시스템 행동

아래는 5~10번 소주제의 소개입니다. 코드는 추후 추가할 예정입니다.

5.유기적 경로 추적

• Flow Field (흐름장)
• 미리 정의된 2D/3D 공간의 힘(벡터장)을 따라 파티클이 움직입니다. 마치 바람이나 물의 흐름을 따라가는 듯한 유기적이고 예측 불가능한 경로를 생성합니다.

6.장애물 회피

• Path Following & Avoidance
• 파티클이 정해진 경로를 따라가면서 동시에 벽이나 다른 장애물을 인지하고 피하는 행동을 추가합니다. 에이전트의 지능을 높입니다.

7.연쇄 반응/신경망

• Propagation & Diffusion
• 한 파티클의 상태(예: 색상, 크기) 변화가 주변 파티클로 파급되거나, 파티클들이 그리드를 따라 색상이나 값을 전달하여 패턴을 만드는 확산 시스템입니다

8.탄성/구속

• Springs & Constraints
• 파티클들을 가상의 용수철(Springs)로 연결하여, 끌어당기거나 늘어나게 합니다. 천, 깃발, 연체 동물과 같은 구조적 움직임을 시뮬레이션합니다.

9.자기 조직화 지도

• Self-Organizing Map (SOM)
• 복잡한 데이터셋을 파티클의 2D 위치로 매핑하는 방식으로, 파티클이 서로 영향을 주어 자발적인 패턴이나 질서를 만들어냅니다. (데이터 시각화 응용 가능)

10.소멸 및 재생

• Lifespan & Emitter
• 파티클에 수명(lifespan)을 부여하여 시간이 지나면 사라지고, 특정 지점(Emitter)에서 새로운 파티클이 지속적으로 생성됩니다. 연기, 불꽃, 분수 등에 필수적인 구성입니다