P5.js 한국어 참조 (bezier)

이 페이지에서는 P5.js 한국어 참조의 bezier 함수에 대해 설명합니다.

bezier()

설명문

3차 베지어 곡선을 그립니다. 이러한 곡선은 일련의 앵커 포인트와 컨트롤 포인트에 의해 정의됩니다. 처음 두 매개 변수는 첫 번째 앵커 포인트를 지정하고 마지막 두 매개 변수는 다른 앵커 포인트를 지정합니다. 이것들은 곡선의 첫 번째와 마지막 점이됩니다. 가운데 매개 변수는 곡선의 모양을 정의하는 두 개의 제어점을 지정합니다. 근사적으로 말하면, 컨트롤 포인트는 커브를 그 방향으로 "끌기"합니다.

베지어 곡선은 프랑스 자동차 엔지니어 피에르 베지어에 의해 개발되었으며 완만하게 경사진 곡선을 정의하기 위해 컴퓨터 그래픽에서 일반적으로 사용됩니다. curve()도 참조하십시오.

구문

bezier(x1, y1, x2, y2, x3, y3, x4, y4)

bezier(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)

매개변수

x1
Number : 첫 번째 앵커 포인트의 x 좌표

y1
Number : 첫 번째 앵커 포인트의 y 좌표

x2
Number : 첫 번째 제어점의 x 좌표

y2
Number : 첫 번째 제어점의 y 좌표

x3
Number : 두 번째 제어점의 x 좌표

y3
Number : 두 번째 제어점의 y 좌표

x4
Number : 두 번째 앵커 포인트의 x 좌표

y4
Number : 두 번째 앵커 포인트의 y 좌표

z1
Number : 첫 번째 앵커 포인트의 Z 좌표

z2
Number : 첫 번째 제어점의 z 좌표

z3
Number : 두 번째 제어점의 z 좌표

z4
Number : 두 번째 앵커 포인트의 Z 좌표

예 1

function draw() {
  noFill();
  stroke(255, 0, 0); // 赤色を指定
  line(10, 10, 85, 10); // 上の線を描画
  line(15, 80, 90, 80); // 下の線を描画
  stroke(0, 0, 0); // 黒色を指定
  bezier(85, 10, 10, 10, 90, 90, 15, 80); // 右上から左下に bezier 曲線を描画
}

실행 결과

예 2

function draw() {
  background(0, 0, 0);
  noFill();
  stroke(255); // 白色を指定
  bezier(150, 150, 0, 100, 100, 0, 100, 0, 0, 0, 100, 0); // 下から上に bezier 曲線を描画
}

실행 결과