-
캔버스(Canvas): P5.js에서 그래픽 요소를 그리는 영역입니다. 캔버스는 웹 페이지의 일부로 생각할 수 있으며, 주어진 크기로 설정됩니다. P5.js에서 제공하는 createCanvas() 함수로 캔버스를 생성할 수 있습니다.
-
setup() 함수: P5.js 프로그램을 초기화하기 위해 사용되는 함수입니다. 일반적으로 캔버스 생성, 초기 설정 등을 수행합니다. 이 함수는 프로그램 시작 시 한 번만 호출됩니다.
-
draw() 함수: P5.js에서 그래픽 요소를 계속해서 업데이트하고 그리기 위해 사용되는 함수입니다. 이 함수는 setup() 함수가 호출된 후 계속해서 호출됩니다. 프레임당 한 번 호출되는데, 프레임 속도는 frameRate() 함수로 조정할 수 있습니다.
-
그리기 기본 요소: P5.js에서는 다양한 그래픽 요소를 그릴 수 있습니다. 예를 들어, 점, 선, 도형, 텍스트 등이 있으며, 각각의 요소는 개별적인 함수로 제공됩니다. 이러한 함수들을 사용하여 원하는 그래픽을 그릴 수 있습니다.
-
이벤트 처리: P5.js에서는 마우스 클릭, 키보드 입력 등과 같은 이벤트를 처리할 수 있습니다. 이벤트 처리를 위해 마우스 이벤트 함수(mousePressed(), mouseReleased(), 등)와 키보드 이벤트 함수(keyPressed(), keyReleased(), 등) 등을 사용할 수 있습니다.
P5.js의 핵심 개념과 주요 함수들을 알아두면, 창작적인 코딩과 그래픽 프로그래밍을 할 때 더 쉽고 효과적으로 활용할 수 있습니다.
참고 자료: