P5.js 한국어 참조 (curve)

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

curve()

설명문

가운데 네 개의 매개변수로 지정된 두 점 사이에 곡선을 그립니다. 처음 두 매개변수는 커브가 그려지지 않은 경우에도 이 점에서 커브가 생성된 것처럼 만드는 제어점입니다. 마찬가지로 마지막 두 매개 변수는 커브가 그려지지 않은 경우에도 커브가 이 지점까지 만들어진 것처럼 만드는 제어점입니다.

일련의 curve()를 결합하거나 curveVertex()를 사용하여 더 긴 곡선을 만들 수 있습니다. curveTightness() 라는 추가 함수는 곡선의 시각적 품질을 제어합니다. curve() 는 Catmull-Rom 스플라인의 구현입니다.

구문

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

curve(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 좌표

예

function draw(){
  noFill();

  stroke(255, 0, 0);
  curve(10, 50, 150, 30, 220, 160, 280, 15);


  stroke(0, 0, 255); // 青色の設定
  circle(10, 50, 6); // 開始制御点の描画

  stroke(255, 200, 0); // オレンジ色の設定
  circle(150, 30, 6); // 最初の点

  stroke(0, 255, 255); // 水色の設定
  circle(220, 160, 6); // 2番めの点

  stroke(205, 255, 35); // 黃緑色の設定
  circle(280, 15, 6); // 終了制御点の描画  
}

실행 결과

저작권

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