p5.js Study 📚
1. p5.js 시작과 기본 구조
p5.js는 프로그래밍과 시각 예술을 쉽게 배울 수 있도록 도와주는 JavaScript 라이브러리입니다.
주로 인터랙티브 아트와 그래픽 디자인, 애니메이션 등을 만들 때 사용됩니다.
1. p5.js 세팅하기
p5.js를 사용하려면 먼저 HTML 파일에 p5.js를 포함해야 합니다. p5.js 공식 사이트에서 CDN 링크를 복사하여 HTML 파일에 추가하거나, p5.js 웹 에디터를 사용하면 쉽게 시작할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
2. 기본 구조
sketch.js 파일에서 코드를 작성하게 됩니다.
p5.js는 두 가지 주요 함수로 시작합니다:
- setup(): 초기 설정을 담당합니다. (화면 크기, 변수 초기화 등)
- draw(): 반복적으로 실행되며 화면에 그림을 그리는 역할을 합니다.
// 웹페이지가 처음 시작될 때 호출되는 함수
function setup() {
createCanvas(400, 400); // 400x400 크기의 캔버스 생성
background(220); // 회색 배경 설정
}
// 웹페이지에서 일정 빈도로 게속 실행되는 함수(초당 60프레임)
function draw() {
ellipse(200, 200, 50, 50); // x, y 좌표 (200, 200)에 지름 50의 원 그리기
}'p5.js Study 📚' 카테고리의 다른 글
| 2. 캔버스와 기본 도형, 색상 설정 (0) | 2024.12.16 |
|---|
