[javascript] P5.js를 사용하여 웹 페이지를 만들 수 있나요?

04 Dec 2023

javascript

P5.js를 사용하여 웹 페이지를 만들려면 먼저 P5.js를 다운로드하고 HTML 문서에 연결해야합니다. P5.js는 직관적인 API를 제공하여 그래픽 요소의 위치, 크기, 색상 등을 제어할 수 있습니다. 아래는 P5.js를 사용하여 웹 페이지에 원을 그리는 간단한 예제입니다.

<!DOCTYPE html>
<html>
<head>
    <script src="p5.js"></script>
</head>
<body>
    <script>
        function setup() {
            createCanvas(400, 400); // 캔버스 크기 설정
        }

        function draw() {
            background(220); // 배경색 설정
            fill(255, 0, 0); // 원 색상 설정
            ellipse(200, 200, 100, 100); // 원 그리기
        }
    </script>
</body>
</html>

위의 예제는 웹 페이지에 400x400 크기의 캔버스를 생성하고, 배경을 회색으로 지정한 후 가운데에 빨간색 원을 그립니다. 웹 페이지를 열면 캔버스 위에 원이 그려진 결과를 확인할 수 있습니다.

P5.js는 그림 그리기, 애니메이션, 인터랙션 등 다양한 그래픽 작업을 지원합니다. P5.js 공식 사이트(https://p5js.org/)에서 더 많은 예제와 자세한 문서를 확인할 수 있습니다.