JavaScript 물리 엔진 만들기 — 100줄로 구현하는 2D 물리 시뮬레이션

class Vec {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
 
  add(v) {
    return new Vec(this.x + v.x, this.y + v.y)
  }
 
  sub(v) {
    return new Vec(this.x - v.x, this.y - v.y)
  }
 
  scale(s) {
    return new Vec(this.x * s, this.y * s)
  }
 
  dot(v) {
    return this.x * v.x + this.y * v.y
  }
 
  length() {
    return Math.sqrt(this.x * this.x + this.y * this.y)
  }
 
  normalize() {
    const len = this.length()
    if (len === 0) return new Vec(0, 0)
    return new Vec(this.x / len, this.y / len)
  }
 
  cross(v) {
    return this.x * v.y - this.y * v.x
  }
}

class Circle {
  constructor(x, y, radius, mass) {
    this.pos = new Vec(x, y)
    this.vel = new Vec(0, 0)
    this.radius = radius
    this.mass = mass
    this.restitution = 0.9
  }
 
  update(dt, gravity) {
    this.vel = this.vel.add(gravity.scale(dt))
    this.pos = this.pos.add(this.vel.scale(dt))
  }
 
  draw(ctx) {
    ctx.beginPath()
    ctx.arc(this.pos.x, this.pos.y, this.radius, 0, Math.PI * 2)
    ctx.fillStyle = '#4a90d9'
    ctx.fill()
    ctx.strokeStyle = '#2c5f8a'
    ctx.stroke()
  }
}

class Line {
  constructor(x1, y1, x2, y2) {
    this.start = new Vec(x1, y1)
    this.end = new Vec(x2, y2)
  }
 
  draw(ctx) {
    ctx.beginPath()
    ctx.moveTo(this.start.x, this.start.y)
    ctx.lineTo(this.end.x, this.end.y)
    ctx.strokeStyle = '#333'
    ctx.lineWidth = 2
    ctx.stroke()
  }
}

function detectCircleCircle(a, b) {
  const diff = b.pos.sub(a.pos)
  const dist = diff.length()
  const minDist = a.radius + b.radius
 
  if (dist >= minDist) return null
 
  const normal = diff.normalize()
  const overlap = minDist - dist
 
  return { normal, overlap, a, b }
}

function detectCircleLine(circle, line) {
  const lineVec = line.end.sub(line.start)
  const circleToStart = circle.pos.sub(line.start)
 
  const lineLen = lineVec.length()
  const lineDir = lineVec.normalize()
 
  let projection = circleToStart.dot(lineDir)
  projection = Math.max(0, Math.min(lineLen, projection))
 
  const closest = line.start.add(lineDir.scale(projection))
  const diff = circle.pos.sub(closest)
  const dist = diff.length()
 
  if (dist >= circle.radius) return null
 
  const normal = diff.normalize()
  const overlap = circle.radius - dist
 
  return { normal, overlap, circle, point: closest }
}

function resolveCircleCircle(collision) {
  const { normal, overlap, a, b } = collision
 
  const totalMass = a.mass + b.mass
  a.pos = a.pos.sub(normal.scale(overlap * (b.mass / totalMass)))
  b.pos = b.pos.add(normal.scale(overlap * (a.mass / totalMass)))
 
  const relVel = a.vel.sub(b.vel)
  const velAlongNormal = relVel.dot(normal)
 
  if (velAlongNormal > 0) return
 
  const restitution = Math.min(a.restitution, b.restitution)
  const impulseMag = -(1 + restitution) * velAlongNormal / totalMass
 
  const impulse = normal.scale(impulseMag)
  a.vel = a.vel.add(impulse.scale(b.mass))
  b.vel = b.vel.sub(impulse.scale(a.mass))
}
 
function resolveCircleLine(collision) {
  const { normal, overlap, circle } = collision
 
  circle.pos = circle.pos.add(normal.scale(overlap))
 
  const velAlongNormal = circle.vel.dot(normal)
  const impulse = normal.scale(-velAlongNormal * (1 + circle.restitution))
  circle.vel = circle.vel.add(impulse)
}

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
const gravity = new Vec(0, 300)
const circles = []
const lines = [
  new Line(0, canvas.height, canvas.width, canvas.height),
  new Line(0, 0, 0, canvas.height),
  new Line(canvas.width, 0, canvas.width, canvas.height),
]
 
canvas.addEventListener('click', (e) => {
  const rect = canvas.getBoundingClientRect()
  const x = e.clientX - rect.left
  const y = e.clientY - rect.top
  const radius = 10 + Math.random() * 20
  const mass = radius * radius * 0.01
  circles.push(new Circle(x, y, radius, mass))
})
 
function simulate(dt) {
  for (const circle of circles) {
    circle.update(dt, gravity)
  }
 
  for (let i = 0; i < circles.length; i++) {
    for (let j = i + 1; j < circles.length; j++) {
      const collision = detectCircleCircle(circles[i], circles[j])
      if (collision) resolveCircleCircle(collision)
    }
 
    for (const line of lines) {
      const collision = detectCircleLine(circles[i], line)
      if (collision) resolveCircleLine(collision)
    }
  }
}
 
function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
 
  for (const line of lines) {
    line.draw(ctx)
  }
 
  for (const circle of circles) {
    circle.draw(ctx)
  }
}
 
let lastTime = 0
 
function loop(time) {
  const dt = Math.min((time - lastTime) / 1000, 0.016)
  lastTime = time
 
  simulate(dt)
  render()
  requestAnimationFrame(loop)
}
 
requestAnimationFrame(loop)