[javascript] P5.js에서 애니메이션을 만드는 방법은 어떻게 되나요?

04 Dec 2023

P5.js는 효과적인 애니메이션을 생성하는 데 도움이 되는 강력한 프로그래밍 라이브러리입니다. 이것은 자바스크립트를 기반으로 하며, 웹 브라우저에서 동작합니다. 이제 P5.js를 사용하여 애니메이션을 만드는 방법을 알아보겠습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

또한, 스케치를 생성할 <body> 태그 안에 <script> 태그를 추가해야 합니다. 스케치를 생성하는 코드는 다음과 같습니다.

<script>
function setup() {
  // 스케치 초기 설정
}

function draw() {
  // 애니메이션 프레임마다 실행되는 코드
}
</script>

스케치 초기 설정: setup() 함수는 스케치를 시작하기 전에 한 번 실행됩니다. 스케치의 초기 설정, 캔버스 크기 및 색상 모드 등을 이곳에서 정의할 수 있습니다.

function setup() {
  createCanvas(800, 600);  // 캔버스 크기 설정
  background(0);  // 배경색 설정
}

애니메이션 코드: draw() 함수는 스케치의 각 프레임마다 실행됩니다. 이곳에 움직이는 도형, 변화하는 색상 등 애니메이션에 필요한 코드를 작성할 수 있습니다.

function draw() {
  background(0);  // 매 프레임마다 배경을 다시 그립니다.
  fill(255);  // 도형 색상 설정
  ellipse(mouseX, mouseY, 50, 50);  // 마우스 위치에 따라 원을 그립니다.
}

위 코드는 마우스가 움직일 때마다 흰색 원을 그리는 간단한 애니메이션입니다. 이제 원하는 애니메이션을 만들기 위해 draw() 함수 안에 움직임, 색상, 크기 등을 조절하는 코드를 작성하면 됩니다.

P5.js에는 다양한 도형 그리기, 이미지 로드, 텍스트 출력 등의 기능이 포함되어 있습니다. 필요한 함수 및 사용 방법에 대한 자세한 정보는 P5.js 공식 문서를 참고해주세요.