p5.js 레퍼런스

// 라이프사이클 함수
function preload() { }  // 에셋 로딩 (setup 전 실행)
function setup() { }    // 초기화 (1회 실행)
function draw() { }     // 렌더링 루프 (매 프레임)

// 캔버스
createCanvas(width, height);     // 2D 캔버스 생성
createCanvas(w, h, WEBGL);       // 3D 캔버스 (WebGL)
resizeCanvas(width, height);     // 캔버스 크기 변경
background(r, g, b, a);          // 배경색 설정

// 프레임
frameRate(fps);          // 프레임 속도 설정
frameCount;              // 현재까지 그려진 프레임 수
loop() / noLoop();       // draw() 루프 제어

// 기본 도형
ellipse(x, y, w, h);     // 타원/원
rect(x, y, w, h);       // 사각형
line(x1, y1, x2, y2);   // 선
triangle(x1, y1, x2, y2, x3, y3); // 삼각형
arc(x, y, w, h, start, stop);     // 호
point(x, y);             // 점

// 색상
fill(r, g, b, a);        // 채우기 색
stroke(r, g, b);         // 테두리 색
strokeWeight(w);         // 테두리 두께
noFill();                // 채우기 없음
noStroke();              // 테두리 없음
colorMode(RGB | HSB, max); // 색상 모드

// 변환
translate(x, y);         // 좌표계 이동
rotate(angle);           // 회전 (라디안)
scale(s);                // 확대/축소
push() / pop();          // 변환 상태 저장/복원

// 마우스
mouseX, mouseY;          // 현재 마우스 좌표
pmouseX, pmouseY;        // 이전 프레임 좌표
mouseIsPressed;          // 마우스 눌림 여부
function mousePressed() { }  // 클릭 이벤트
function mouseDragged() { }  // 드래그 이벤트

// 키보드
key;                     // 마지막으로 누른 키
keyCode;                 // 키 코드 (UP_ARROW 등)
keyIsPressed;            // 키 눌림 여부
function keyPressed() { }    // 키 누름 이벤트

// 수학
random(min, max);        // 무작위 값
noise(x, y, z);          // Perlin Noise (0~1)
map(val, min1, max1, min2, max2); // 범위 변환
constrain(val, min, max);// 범위 제한
lerp(start, end, t);     // 선형 보간
dist(x1, y1, x2, y2);   // 거리 계산
sin(angle), cos(angle);  // 삼각함수