이 실험에 대해

Interactive Developer의 물리 엔진 포트폴리오를 보고 Matter.js로 재현해봤다. 알파벳이 위에서 계속 떨어지고, 마우스를 따라 회전하는 와이퍼가 글자들을 튕겨낸다. 글자 하나하나가 강체(rigid body)로 와이퍼와 충돌한다.

핵심 코드

// 와이퍼 — static body, 매 프레임 마우스 각도로 회전
const angle = Math.atan2(mouseY - cy, mouseX - cx)
Body.setAngle(wiper, angle)
Body.setAngularVelocity(wiper, delta * 3)  // 충격량 전달

// 글자 — 매 N프레임마다 위에서 스폰
const body = Bodies.rectangle(x, -20, w, h, {
  restitution: 0.5,   // 반발계수
  frictionAir: 0.005, // 공기저항 (천천히 떨어짐)
})

// 화면 아래로 나간 글자 제거
if (body.position.y > H + 100) {
  Composite.remove(world, body)
}