핵심 개념 1 — 파티클 = 움직이는 객체 + 수명

9~10주차에서 만들었던 Mover 클래스를 떠올려 봅니다. 위치(position), 속도(velocity), 가속도(acceleration)가 있었습니다. 힘을 적용하면 가속도가 바뀌고, 가속도가 속도를 바꾸고, 속도가 위치를 바꾸는 패턴이었습니다.

파티클은 여기에 한 가지 개념만 추가하면 됩니다. 바로 수명(lifespan)입니다.

비유하자면, Mover가 ’수명 제한이 없는 공’이라면 Particle은 ‘촛불’입니다. 태어나는 순간부터 수명이 정해져 있고, 시간이 지나면서 점점 약해지다가 결국 꺼집니다.

수명은 lifespan이라는 숫자를 255에서 시작해 매 프레임 조금씩 줄여나가는 방식으로 구현합니다. 왜 하필 255냐면 — p5.js에서 색상의 알파(투명도) 값 범위가 0~255이기 때문입니다. lifespan 값을 그대로 알파에 넣으면, 수명이 줄어들수록 자연스럽게 투명해집니다. 이것이 바로 페이드아웃(fade-out) 효과입니다.

lifespan: 255 → 완전 불투명 (방금 태어남)
lifespan: 127 → 반투명 (수명 절반 남음)
lifespan: 0   → 완전 투명 (소멸)

핵심 개념 2 — Particle 클래스 설계

7주차에서 클래스를 만들 때의 패턴을 떠올려 봅니다 — constructor, 메서드들, 그리고 프로퍼티. Particle 클래스의 전체 구조는 다음과 같습니다.

class Particle {
  constructor(x, y) {
    this.position = createVector(x, y);
    // 초기 속도: 위쪽으로 살짝 퍼지는 랜덤 방향
    this.velocity = createVector(random(-1, 1), random(-2, 0));
    // 가속도: 중력 (아래 방향)
    this.acceleration = createVector(0, 0.05);
    // 수명: 255에서 시작
    this.lifespan = 255;
  }

  update() {
    // 9주차에서 배운 벡터 물리 업데이트
    this.velocity.add(this.acceleration);
    this.position.add(this.velocity);
    // 매 프레임 수명 감소
    this.lifespan -= 2;
  }

  display() {
    // lifespan을 알파 값으로 사용 → 페이드아웃!
    stroke(0, this.lifespan);
    fill(127, this.lifespan);
    ellipse(this.position.x, this.position.y, 12);
  }

  // 이 파티클이 소멸 대상인지 확인
  isDead() {
    return this.lifespan < 0;
  }
}

한 부분씩 살펴봅니다.

constructor(x, y) - position: 파티클이 태어나는 위치. 나중에 마우스 위치를 넣습니다. - velocity: random(-1, 1)과 random(-2, 0)으로 약간씩 다른 방향으로 퍼져나갑니다. 파티클마다 움직임이 다른 비결입니다. - acceleration: 중력. 아주 작은 값(0.05)이면 충분합니다. 파티클이 천천히 아래로 떨어지게 합니다. - lifespan: 255에서 시작. 이 숫자가 0 아래로 내려가면 소멸 대상으로 판단합니다.

update() - 9주차에서 익숙한 패턴입니다: 가속도 → 속도, 속도 → 위치. - 여기에 this.lifespan -= 2 한 줄이 추가됐습니다. 이것이 파티클의 핵심입니다.

display() - fill(127, this.lifespan) — 두 번째 인자가 알파(투명도)입니다. lifespan이 줄면 투명해집니다. - stroke(0, this.lifespan) — 테두리도 같이 투명해져야 자연스럽습니다.

isDead() - lifespan이 0 미만이면 true를 반환합니다. 단 한 줄이지만 아주 중요한 메서드입니다.

단일 파티클을 화면에 띄우는 코드입니다.

let p;

function setup() {
  createCanvas(640, 360);
  p = new Particle(width / 2, 20);
}

function draw() {
  background(220);
  p.update();
  p.display();

  // 수명이 끝나면 새로 생성
  if (p.isDead()) {
    p = new Particle(width / 2, 20);
  }
}

실행하면 파티클 하나가 위에서 생겨나 중력에 의해 떨어지면서 점점 투명해지다 사라지고, 다시 새로 생겨납니다.

핵심 개념 3 — 배열로 다수의 파티클 관리

파티클 하나로는 별로 인상적이지 않습니다. 파티클 시스템의 매력은 수백 개가 동시에 움직일 때 나타납니다. 배열을 사용해서 구현합니다.

기본 전략은 세 단계입니다.

1. 매 프레임 새 파티클을 배열에 push()
2. 모든 파티클을 update() + display()
3. 수명이 끝난 파티클을 splice()로 제거

let particles = [];

function setup() {
  createCanvas(640, 360);
}

function draw() {
  background(220);

  // 매 프레임 새 파티클 생성
  particles.push(new Particle(width / 2, 20));

  // 역순으로 순회하면서 업데이트 + 표시 + 제거
  for (let i = particles.length - 1; i >= 0; i--) {
    particles[i].update();
    particles[i].display();

    if (particles[i].isDead()) {
      particles.splice(i, 1);
    }
  }
}

여기서 아주 중요한 부분이 역순 순회입니다.

splice(i, 1)은 인덱스 i에 있는 요소를 배열에서 제거합니다. 그러면 그 뒤에 있던 모든 요소의 인덱스가 한 칸씩 앞으로 당겨집니다. 이것이 순방향 순회에서 문제를 일으킵니다.

순방향 순회에서 문제가 생기는 상황:

배열: [A, B, C, D, E]    인덱스: 0, 1, 2, 3, 4

i=0: A 확인 → 정상
i=1: B 확인 → B가 제거 대상이다. splice(1, 1) 실행
배열: [A, C, D, E]        인덱스: 0, 1, 2, 3
                           C가 원래 2번이었는데 이제 1번으로!
i=2: D 확인 → C를 건너뛰었다!  (C는 체크 안 됨)

C가 확인되기도 전에 건너뛰어졌습니다. 제거되어야 할 파티클이 한 프레임 더 남을 수 있는 것입니다.

역순 순회에서는 문제 없음:

배열: [A, B, C, D, E]    인덱스: 0, 1, 2, 3, 4

i=4: E 확인 → 정상
i=3: D 확인 → 정상
i=2: C 확인 → C가 제거 대상이다. splice(2, 1) 실행
배열: [A, B, D, E]        인덱스: 0, 1, 2, 3
                           D, E의 인덱스가 바뀌었지만, 이미 체크 완료!
i=1: B 확인 → 정상 (인덱스 변화 영향 없음)
i=0: A 확인 → 정상

역순으로 순회하면, splice로 인한 인덱스 변화가 이미 체크한 요소들에만 영향을 미쳐서 문제가 없습니다.

// 이 패턴을 기억합니다
for (let i = particles.length - 1; i >= 0; i--) {
  // ... 작업 ...
  if (조건) {
    particles.splice(i, 1);
  }
}

배열에서 splice가 제대로 동작하는지 확인하려면, 배열의 길이를 화면에 표시해 봅니다.

// draw() 안에 추가
fill(0);
noStroke();
text("파티클 수: " + particles.length, 10, 20);

제대로 작동하면 파티클 수가 일정 범위 안에서 유지됩니다 (보통 120~130개). 만약 splice를 빼면 배열이 계속 커지면서 프레임 저하가 생깁니다.