vroomfan

물리 엔진에 의해 움직이는 구슬이 음악을 연주하는 팬아트입니다. Matter.js의 Engine과 HTML Canvas를 이용하여 물리적인 움직임을 구현했고, Tone.js와 garageBand를 이용하여 음악을 연주했습니다.

URL: https://youtu.be/QNqEXeb2NEQ?si=khocg5AKYP16-60Z

개발 기간: 1개월

개발 기여도: 100%

기술 스택

HTML Canvas, Matter.js, Tone.js, garageBand

작업 내용

• Control Panel을 통해 물리 엔진과 물체를 조작할 수 있도록 시스템을 구축했습니다.

  • 구슬의 위치, 속도, 회전 속도, 탄성을 조작할 수 있습니다.
  • 원하는 크기의 발판을 추가하거나 제거할 수 있습니다.
  • 발판의 각도, 위치, 음높이를 조작할 수 있습니다.
  • 중력을 조작할 수 있습니다.
  • 원하는 timestamp(ms)에 물리 엔진이 멈추게 할 수 있습니다.
  • camera(시선)가 구슬을 따라 아래로 내려가는 속도를 조절할 수 있습니다.
  • camera의 위치를 위아래로 움직일 수 있습니다.
  • 구슬과 발판이 충돌할 때의 상태(구슬의 물리적인 값, camera 위치, timestamp 등)를 저장하고 원하는 지점으로 되돌아갈 수 있습니다.

  • 물리 엔진을 멈추거나 시작할 수 있습니다.

    • 자주 사용하는 기능이므로 키보드 단축키를 지정하여 사용할 수 있게 했습니다.

• 물리 엔진을 적용했습니다.

  • Matter.js의 Engine을 사용하여 물리 엔진을 구현했습니다.
  • Matter.js Bodies Module의 circle, rectangle, fromVertices 함수를 사용하여 구슬, 발판, 커브 발판을 만들었습니다.
  • 구슬과 발판이 충돌할 때 지정된 음의 소리가 나게 했습니다.
  • 구슬과 발판이 충돌할 때 발판의 색이 변하도록 했습니다.

  • 크로스브라우징 문제를 해결했습니다.

    • Matter.js Runner Module로 물리 엔진을 작동시키면 브라우저의 종류와 성능에 따라 물리 엔진의 동작이 크게 달라졌습니다.
    • Runner를 사용하지 않고 requestAnimationFrame 함수 내부에서 일정 시간마다 Engine을 직접 update하는 방식으로 변경하여 문제를 했습니다.

• 구슬과 발판을 그리기 위해 HTML Canvas를 사용했습니다.

  • 처음에는 Matter.js의 Render Module로 렌더링하려고 했지만, 원하는 UI를 구현하기에 부족하다고 판단하여 HTML Canvas를 사용했습니다.
  • Engine에서 가져온 물체에 대한 물리적인 값들을 토대로 HTML Canvas에 그렸습니다.
  • ctx.translate, ctx.rotate, ctx.stroke, ctx.drawImage 등의 함수와 requestAnimationFrame을 사용하여 렌더링했습니다.
  • 물체의 그림자를 그릴 때 filter 대신 shadow를 사용하여 크로스브라우징 문제를 해결했습니다.

• 음악과 그림을 추가했습니다.

  • Tone.js를 사용하여 구슬과 발판이 충돌할 때 소리가 나게 했습니다.
  • Tone.js는 개발용으로 사용하였고, 최종적으로는 garageBand를 사용하여 음악을 만들었습니다.
  • 디자이너에게 간단한 아이콘과 배경 이미지를 요청하여 적용했고, 아이콘의 위치나 크기는 포토샵을 사용하여 조절했습니다.
  • 브라우저를 녹화한 영상에 garageBand로 만든 음악을 입혀 결과물을 만들었습니다.