[javascript] P5.js에서 테스트하는 방법을 알려주세요.

04 Dec 2023

javascript

P5.js는 JavaScript로 작성된 창작 프로세싱 환경입니다. 이를 테스트하려면 몇 가지 단계를 따라야 합니다.

P5.js 시작하기: P5.js를 사용하기 위해서는 먼저 테스트할 프로젝트에 P5.js 라이브러리를 추가해야 합니다. 이를 위해 P5.js 홈페이지(https://p5js.org)에서 P5.js 라이브러리를 다운로드하거나 CDN을 사용할 수 있습니다. 다음으로 HTML 파일에 <script> 태그를 이용하여 P5.js 라이브러리를 추가합니다.

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
    <script src="sketch.js"></script>
</body>
</html>

테스트할 스케치 작성하기: sketch.js 파일을 생성하고 P5.js 스케치를 작성합니다. P5.js 스케치는 setup() 함수와 draw() 함수로 구성됩니다. setup() 함수는 스케치를 초기화하고 한 번만 실행되는 부분이며, draw() 함수는 프레임마다 실행되는 부분입니다. 예를 들어, 아래와 같이 원을 그리는 간단한 스케치를 작성해보겠습니다.

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(220);
    ellipse(200, 200, 100, 100);
}

웹 브라우저에서 테스트하기: 테스트할 스케치가 작성되었다면, 웹 브라우저에서 스케치를 실행해볼 수 있습니다. HTML 파일을 웹 브라우저로 열거나, 웹 서버에 파일을 업로드하여 테스트할 수 있습니다. 웹 브라우저에서 실행되는 스케치에는 원이 그려진 창이 나타나야 합니다.

P5.js를 사용하여 테스트하는 방법에 대해서 알려드렸습니다. P5.js 공식 문서(https://p5js.org/reference/)에서 더 많은 기능과 사용법을 확인할 수 있습니다.