EN

페이지 1: 기본 설정 및 그리기

1. 기본 설정 및 그리기

p5.js는 시각 예술과 인터랙티브 경험에 중점을 둔 크리에이티브 코딩을 위한 JavaScript 라이브러리입니다. 모든 p5.js 스케치는 setup()과 draw()라는 두 가지 주요 함수를 필요로 합니다.

1.1. p5.js 포함 및 기본 구조

HTML 파일에 p5.js 라이브러리를 포함합니다. sketch.js 파일(또는 유사한 이름)을 생성하고 연결합니다.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.1/p5.min.js"></script>
  <script src="sketch.js"></script>
</head>
<body></body>
</html>

// sketch.js
function setup() {
  createCanvas(400, 400); // 400x400 픽셀 캔버스 생성
}

function draw() {
  background(220); // 배경색을 연한 회색으로 설정
}

setup() 함수는 시작할 때 한 번 실행되며, draw() 함수는 반복적으로 실행됩니다 (일반적으로 초당 60회).

1.2. 기본적인 도형 그리기

내장 함수를 사용하여 다양한 도형을 그릴 수 있습니다.

function draw() {
  background(220);
  fill(255, 0, 0); // 채우기 색상을 빨간색으로 설정
  noStroke(); // 윤곽선 제거
  ellipse(width / 2, height / 2, 50, 50); // 중앙에 원 그리기

  stroke(0, 0, 255); // 윤곽선 색상을 파란색으로 설정
  strokeWeight(4); // 윤곽선 두께 설정
  rect(50, 50, 70, 70); // (50, 50)에 너비/높이 70인 사각형 그리기
}

도형의 모양을 제어하려면 fill(), stroke(), noFill(), noStroke(), strokeWeight()를 사용하십시오.

Contact Us