P5.js는 JavaScript를 기반으로 한 자바스크립트 라이브러리로, 그래픽 및 애니메이션을 생성하는데 사용됩니다. P5.js의 기본 문법을 아래에서 소개하겠습니다.

setup() 함수

function setup() {
  // 초기 설정
  // 한 번만 실행됨
}

setup() 함수는 스케치를 초기화하는 데 사용됩니다. 이 함수 안에서는 스케치를 위한 초기 설정을 수행하고, 한 번만 실행됩니다.

draw() 함수

function draw() {
  // 스케치의 주요 로직
  // 프레임마다 반복 실행됨
}

draw() 함수는 스케치의 주요 로직을 포함합니다. 이 함수 안에서는 그래픽 및 애니메이션을 업데이트하고, 프레임마다 반복 실행됩니다.

createCanvas() 함수

function setup() {
  createCanvas(400, 400);
}

createCanvas() 함수는 그래픽이 그려질 캔버스를 생성합니다. 인자로는 캔버스의 너비와 높이를 받습니다.

background() 함수

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

background() 함수는 캔버스의 배경색을 설정합니다. 인자로는 색상값을 받습니다. 여기서는 RGB값 220을 사용하여 회색 배경을 설정한 예제입니다.

fill() 함수

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  fill(255, 0, 0);
  rect(50, 50, 100, 100);
}

fill() 함수는 도형을 채우는 색상을 설정합니다. 인자로는 RGB값을 받습니다. 여기서는 빨간색을 사용하여 정사각형을 채우는 예제입니다.

stroke() 함수

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  fill(255, 0, 0);
  stroke(0);
  rect(50, 50, 100, 100);
}

stroke() 함수는 도형의 테두리 색상을 설정합니다. 인자로는 RGB값을 받습니다. 여기서는 검정색을 사용하여 정사각형의 테두리를 그리는 예제입니다.

이외에도 P5.js에는 다양한 함수와 기능이 있으며, 위에서는 일부를 소개하였습니다. 자세한 내용은 P5.js 공식 문서를 참조하시기 바랍니다.