P5.js 한국어 참조 (curvePoint)

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

curvePoint()

설명문

포인트 a, b, c, d 의 위치 t 의 곡선의 값을 산출합니다. 파라미터 t 는 0 과 1 의 사이에서 변화합니다. a와 d는 곡선의 제어점이고 b와 c는 곡선의 시작점과 끝점입니다. 이것은 x 좌표, y 좌표 각각에서 실행해 t 로의 곡선의 위치를 ​​취득할 수 있습니다.

구문

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

매개변수

a
Number : 곡선의 첫 번째 제어점 좌표

b
Number : 첫 번째 점의 좌표

c
Number : 두 번째 점의 좌표

d
Number : 두 번째 제어점 좌표

t
Number : 0과 1 사이의 값

반환값

Number: 위치 t 의 bezier 값

예

function draw(){
  noFill();
  stroke(255, 0, 0);
  curve(5, 26, 5, 26, 73, 24, 73, 100); // 赤色の曲線を描画

  stroke(0, 0, 255);
  curve(5, 26, 73, 24, 53, 61, 15, 65); // 青色の曲線を描画

  fill(255);
  let steps = 4;

  for(let i = 0; i <= steps; i++){
    let t = i / steps;
    let x = curvePoint(5, 5, 73, 73, t); // 赤色の曲線上の x 座標を算出
    let y = curvePoint(26, 26, 24, 100, t); // 赤色の曲線上の y 座標を算出
    stroke(255, 200, 0); // オレンジ色を設定
    ellipse(x, y, 5, 5); // 算出したxy座標上に円を描画

    x = curvePoint(5, 73, 53, 15, t); // 青色の曲線上の x 座標を算出
    y = curvePoint(26, 24, 61, 65, t); // 青色の曲線上の y 座標を算出
    stroke(0, 200, 255); // 水色を設定
    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)를 따릅니다.