P5.js 한국어 참조 (curveVertex)

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

curveVertex()

설명문

곡선의 정점 좌표를 지정합니다. 이 함수는 beginShape() 와 endShape() 사이에서 그리고 beginShape() 에 MODE 파라미터가 지정되어 있지 않은 경우에만 사용할 수 있습니다. WebGL 모드의 경우 curveVertex() 는 2D 및 3D 모드에서 사용할 수 있습니다. 2D 모드는 2개의 파라미터를 가정하지만 3D 모드는 3개의 파라미터를 가정합니다.

일련의 curveVertex() 라인의 최초와 마지막의 포인트는, 커브의 개시와 종료를 가이드하기 위해서 사용됩니다. 두 번째와 세 번째 포인트 사이에 작은 곡선을 그리려면 최소 네 개의 포인트가 필요합니다. curveVertex() 를 사용하여 다섯 번째 포인트를 추가하면 두 번째, 세 번째 및 네 번째 포인트 사이에 커브가 그려집니다. curveVertex() 는 Catmull-Rom 스플라인의 구현입니다.

구문

curveVertex(x, y)

curveVertex(x, y, [z])

매개변수

x
Number : 정점의 x 좌표

y
Number : 정점의 y 좌표

z
Number : 정점의 z 좌표 (WebGL 모드의 경우) (선택 사항)

예 1

function draw() {
  strokeWeight(5);

  // 定義点を描画する
  stroke(50, 200, 255); // 水色
  point(150, 80);
  stroke(255, 0, 0); // 赤色
  point(84, 91);
  stroke(0, 255, 0); // 緑色
  point(68, 19);
  stroke(0, 0, 255); // 青色
  point(21, 17);
  stroke(255, 165, 0); // オレンジ色
  point(32, 91);

  strokeWeight(1);
  noFill();
  stroke(0);

  beginShape();
    curveVertex(150, 80); // 水色
    curveVertex(84, 91);  // 赤色
    curveVertex(68, 19);  // 緑色
    curveVertex(21, 17);  // 青色
    curveVertex(32, 91);  // オレンジ色
    curveVertex(32, 91);  // オレンジ色
  endShape();
}

실행 결과

저작권

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)를 따릅니다.