P5.js 한국어 참조 (bezierVertex)

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

bezierVertex()

설명문

베지어 곡선의 정점 좌표를 지정합니다. bezierVertex() 를 호출할 때마다 2개의 제어점과 베지어 곡선의 1개의 앵커점의 위치가 정의되어 새로운 세그먼트(segment)가 선 또는 형상에 추가됩니다. WebGL 모드의 경우 bezierVertex() 는 2D 및 3D 모드에서 사용할 수 있습니다. 2D 모드는 6개의 파라미터를 상정하고 있습니다만, 3D 모드는 9개의 파라미터(z 좌표를 포함한다)를 상정하고 있습니다.

beginShape() 호출에서 bezierVertex() 를 처음 사용할 때는, 최초의 앵커 포인트를 설정하기 위해서, 그 전에 vertex() 를 호출할 필요가 있습니다. 이 함수는 beginShape()와 endShape() 사이에서 beginShape()에 MODE 또는 POINTS 매개 변수가 지정되지 않은 경우에만 사용해야 합니다.

구문

bezierVertex(x2, y2, x3, y3, x4, y4)

bezierVertex(x2, y2, z2, x3, y3, z3, x4, y4, z4)

매개변수

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

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

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

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

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

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

z2
Number : 첫 번째 제어점의 z 좌표 (WebGL 모드의 경우)

z3
Number : 두 번째 제어점의 z 좌표 (WebGL 모드의 경우)

z4
Number : 앵커 포인트의 z 좌표 (WebGL 모드의 경우)

예 1

function draw() {
  noFill();
  beginShape();
  vertex(30, 20);
  bezierVertex(80, 5, 80, 75, 30, 75);
  endShape();

  strokeWeight(6);

  // 定義点を描画する
  stroke(255, 0, 0); // 赤色
  point(30, 20);
  stroke(0, 255, 0);  // 緑色
  point(80, 5);
  stroke(0, 0, 255); // 青色
  point(80, 75);
  stroke(255, 165, 0); // オレンジ色
  point(30, 75);

  strokeWeight(1);
  stroke(0);
}

실행 결과

저작권

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

라이센스

Creative Commons(CC BY-NC-SA 4.0)를 따릅니다.