프로그램 구조

// 프로그램이 시작될때 한번 실행됨
function setup(){
  createCanvas(800,600); // 픽셀단위의 가로, 세로 크기
}

// setup이 실행된 이후 반복되서 실행됨
function draw(){
  // 렌더링 반복
}

시스템 변수들

windowWidth / windowHeight
// 윈도우의 가로/세로

width / height
// 캔버스의 가로 / 세로

mouseX / mouseY
// 현재의 마우스의 x/y 좌표

그래픽으로 출력되지 않는 피드백

print();
// 브라우저의 콘솔에 출력

// 주석처리를 위해 더블 슬래시를 사용 (프로그램이 무시함)

컬러

fill(120); // 흑백 : 0-255의 범주를 가짐
fill(100,125,255); //r, g, b: 0-255의 범주를 가짐
fill(255, 0, 0, 50); //r, g, b, 알파(투명도)
fill('red'); // 컬러 문자열
fill('#ccc'); // 3-digit의 HEX 코드
fill('#222222'); // 6-digit의 HEX로 채움
color(0, 0, 255); // p5.Color 오브젝트

수학

+ - / *  // 기본적인 수학 연산자

random(low,high); // 범위가 있는 난수 생성하기

map(value, in1, in2, out1, out2);
// 어떤 값(value)이 가질수 있는 최소(in1), 최대(in2) 의 범위를 갖는데
// 이를 최소(out1), 최대(out2) 범주로 변환했을때의 값을 계산

2차원 기초도형

line(x1, y1, x2, y2);

ellipse(x, y, width, height);

rect(x, y, width, height);

arc(x, y, width, height, start, stop);

beginShape();
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(x3, y3);
  // 버택스를 추가한다.
endShape(CLOSE);

text("string", x, y, boxwidth, boxheight);

• 그리드 시스템

• line()

• ellipse()

• rect()

• arc()

• vertex()

속성들

background(color);
// 배경색을 지정

fill(color);
// 채울 색을 지정

noFill();
// 채우기를 비활성화 함

stroke(color);
// 선의 색을 지정

strokeWeight(weight);
// 선의 두꼐를 픽셀단위로 지정

noStroke();
// 선을 비활성화

ellipseMode(MODE);
rectMode(MODE);
// CENTER,CORNER

textSize(pixels);

if/then logic

if(test){
  // 조건문의 구조
}

===  // 같은가? 
!==  // 다른가?
>   // 큰가?
<   // 작은가?
>=  // 크거나 같은가?
<=  // 작거나 같은가?