P5.js 한국어 참조 (bezierPoint)

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

bezierPoint()

설명문

포인트 a, b, c, d의 위치 t의 bezier 값을 계산합니다. 매개 변수 a와 d는 곡선의 첫 번째와 마지막 점이고 b와 c는 제어점입니다. 파라미터 t는 0과 1 사이에서 변화합니다. 이것은 x 좌표, y 좌표 각각에서 실행해 t 에서의 베지어 곡선의 위치를 ​​취득할 수 있습니다.

구문

bezierPoint(a, b, c, d, t)

매개변수

a
Number : 곡선상의 최초의 점의 좌표

b
Number : 첫 번째 제어점 좌표

c
Number : 두 번째 제어점 좌표

d
Number : 곡선상의 두 번째 점의 좌표

t
Number : 0과 1 사이의 값

반환값

Number : 위치 t에서 bezier 값

예 1

function draw(){
  noFill();
  let x1 = 85,
      x2 = 10,
      x3 = 90,
      x4 = 15;

  let y1 = 20,
      y2 = 10,
      y3 = 90,
      y4 = 80;

  bezier(x1, y1, x2, y2, x3, y3, x4, y4);
  fill(255);
  let steps = 5;

  for(let i = 0; i <= steps; i++){
    let t = i / steps;
    let x = bezierPoint(x1, x2, x3, x4, t); // bezier 曲線上の x 座標を算出
    let y = bezierPoint(y1, y2, y3, y4, t); // bezier 曲線上の y 座標を算出
    ellipse (x, y, 5, 5); // 算出したxy座標上に円を描画
  }
}

실행 결과

저작권

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