P5.js 한국어 참조 (quadraticVertex)

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

quadraticVertex()

설명문

2차 베지어 곡선의 정점 좌표를 지정합니다. quadraticVertex() 를 호출할 때마다 베지어 곡선의 하나의 제어점과 하나의 앵커점의 위치를 ​​지정하면 선분 또는 모양에 새 세그먼트가 추가됩니다. quadraticVertex() 가 beginShape() 호출내에서 처음으로 사용되는 경우, 최초의 앵커 포인트를 설정하려면 , 그 전에 vertex() 를 호출할 필요가 있습니다. WebGL 모드의 경우 quadraticVertex() 는 2D 및 3D 모드에서 사용할 수 있습니다. 2D 모드에서는 4개의 파라미터가 상정됩니다만, 3D 모드에서는 6개의 파라미터(z좌표를 포함한다)가 상정됩니다.

이 함수는 beginShape() 와 endShape() 사이에서 beginShape() 에 MODE 또는 POINTS 파라미터가 지정되어 있지 않은 경우에만 사용해야 합니다.

구문

quadraticVertex(cx, cy, x3, y3)

quadraticVertex(cx, cy, cz, x3, y3, z3)

매개변수

cx
Number : 제어점의 x 좌표

cy
Number: 제어점의 y 좌표

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

y3
Number: 앵커 점의 y 좌표

cz
Number : 제어점의 z 좌표 (WebGL 모드의 경우)

z3
Number:앵커점의 z좌표(WebGL 모드의 경우)

예 1

function draw() {
  strokeWeight(5);

  // 定義点を描画する
  stroke(255, 0, 0); // 赤色
  point(20, 20);
  stroke(0, 255, 0); // 緑色
  point(80, 20);
  stroke(0, 0, 255); // 青色
  point(50, 50);

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

  beginShape();
    vertex(20, 20);  // 赤色
    quadraticVertex(80, 20, 50, 50); // 緑色、青色
  endShape();
}

실행 결과

예 2

function draw() {
  strokeWeight(5);

  // 定義点を描画する
  stroke(255, 0, 0); // 赤色
  point(20, 20);
  stroke(0, 255, 0); // 緑色
  point(80, 20);

  stroke(0, 0, 255); // 青色
  point(50, 50);

  stroke(50, 200, 255); // 水色
  point(20, 80);
  stroke(255, 165, 0); // オレンジ色
  point(80, 80);
  stroke(190, 0, 255); // 紫色
  point(80, 60);

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

  beginShape();
    vertex(20, 20); // 赤色
    quadraticVertex(80, 20, 50, 50); // 緑色、青色
    quadraticVertex(20, 80, 80, 80); // 水色、オレンジ色
    vertex(80, 60);  // 紫色
  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)를 따릅니다.