[javascript] P5.js에서 물리 시뮬레이션을 어떻게 구현하나요?

04 Dec 2023

javascript

P5.js는 JavaScript 기반의 그래픽 라이브러리로, 물리 시뮬레이션을 구현하기에 훌륭한 도구입니다. P5.js를 사용하여 물리 시뮬레이션을 구현하는 방법을 알아보겠습니다.

P5.js 설치 및 설정

먼저 P5.js를 설치하고 설정해야 합니다. P5.js를 사용하기 위해 HTML 문서 내에 <script> 태그로 P5.js 라이브러리 파일을 불러와야 합니다. 아래는 예시입니다.

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
  </head>
  <body>
    <!-- 캔버스를 표시할 공간 -->
    <div id="canvasContainer"></div>

    <!-- P5.js 코드 -->
    <script>
      // P5.js 코드 작성
    </script>
  </body>
</html>

P5.js 세팅

P5.js를 사용하여 물리 시뮬레이션을 구현하려면 setup 함수와 draw 함수를 사용해야 합니다. setup 함수는 스케치 초기화를 위해 한 번 호출되며, draw 함수는 매 프레임마다 호출됩니다.

function setup() {
  createCanvas(400, 400); // 캔버스 크기 설정
}

function draw() {
  // 물리 시뮬레이션 코드 작성
}

물리 시뮬레이션 구현

P5.js에서 물리 시뮬레이션을 구현하려면 오브젝트의 위치, 속도, 가속도 등 물리량을 업데이트하고 그에 따라 그래픽을 그려주어야 합니다. 예를 들어 중력이 작용하는 떨어지는 공을 구현해보겠습니다.

let position;
let velocity;
let acceleration;

function setup() {
  createCanvas(400, 400);
  position = createVector(width / 2, 0); // 시작 위치
  velocity = createVector(0, 0); // 초기 속도
  acceleration = createVector(0, 0.1); // 중력 가속도
}

function draw() {
  background(220);
  
  velocity.add(acceleration); // 가속도 추가
  position.add(velocity); // 속도 추가

  // 공 그리기
  circle(position.x, position.y, 20);
}

이 코드에서는 createVector 함수를 사용하여 위치, 속도, 가속도를 Vector 객체로 생성합니다. setup 함수에서 초기값을 설정하고, draw 함수에서 매 프레임마다 속도와 위치를 업데이트하여 그래픽을 그려줍니다. 중력 가속도 acceleration을 공의 속도 velocity에 더해주고, 속도를 공의 위치에 더해줌으로써 공이 중력에 따라 아래로 떨어지는 모습을 구현할 수 있습니다.

위 예제는 물리 시뮬레이션을 간단히 표현한 것이지만, P5.js를 사용하여 더 복잡한 시뮬레이션을 구현할 수도 있습니다. P5.js의 다양한 기능을 함께 활용하여 원하는 물리 시뮬레이션을 구현해보세요.

더 자세한 내용은 P5.js 공식 문서를 참고하시기 바랍니다.

P5.js 공식 문서

이상으로 P5.js에서 물리 시뮬레이션을 구현하는 방법에 대해 알아보았습니다. 해당 내용이 도움이 되었기를 바랍니다.