[javascript] P5.js에서 도형 그리기를 어떻게 구현하나요?

04 Dec 2023

javascript

P5.js는 JavaScript 기반의 그래픽 라이브러리로, 도형 그리기를 구현하는 것이 매우 간단합니다. 다음은 P5.js를 사용하여 기본 도형들을 그리는 방법에 대한 예시입니다.

원 그리기

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

function draw() {
  background(220);
  
  // 원 그리기
  fill(255, 0, 0); // 색상 설정 (빨강)
  stroke(0, 0, 255); // 테두리 색상 설정 (파랑)
  strokeWeight(2); // 테두리 두께 설정
  circle(200, 200, 100); // 원 그리기 (중심 x, 중심 y, 반지름)
}

사각형 그리기

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

function draw() {
  background(220);
  
  // 사각형 그리기
  fill(0, 255, 0); // 색상 설정 (녹색)
  stroke(255, 0, 0); // 테두리 색상 설정 (빨강)
  strokeWeight(2); // 테두리 두께 설정
  rect(150, 150, 100, 100); // 사각형 그리기 (왼쪽 위 x, 왼쪽 위 y, 너비, 높이)
}

삼각형 그리기

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

function draw() {
  background(220);
  
  // 삼각형 그리기
  fill(0, 0, 255); // 색상 설정 (파랑)
  stroke(255, 0, 0); // 테두리 색상 설정 (빨강)
  strokeWeight(2); // 테두리 두께 설정
  triangle(200, 200, 250, 300, 150, 300); // 삼각형 그리기 (x1, y1, x2, y2, x3, y3)
}

위의 예제들은 P5.js 기본 문법을 사용하여 간단한 도형을 그리는 방법을 보여줍니다. 필요에 따라 색상, 테두리 설정 등을 변경하여 다양한 도형을 그릴 수 있습니다. P5.js 도큐먼트에서 더 많은 도형 그리기 기능을 찾아볼 수 있습니다.

참고 자료:

P5.js 도큐먼트