P5.js 한국어 참조 (bezierTangent)

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

bezierTangent()

설명문

포인트 a, b, c, d 의 위치 t 에서 bezier 에 대한 접선을 계산합니다. 매개 변수 a와 d는 곡선의 첫 번째와 마지막 점이고 b와 c는 제어점입니다. 최종 매개 변수 t는 0과 1 사이에서 변경됩니다.

구문

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

매개변수

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

b
Number : 첫 번째 제어점 좌표

c
Number : 두 번째 제어점 좌표

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

t
Number : 0과 1 사이의 값

반환값

Number: 위치 t 접선

예 1

function draw(){
  noFill();
  stroke(205, 0, 250); // 紫色を設定
  bezier(85, 20, 10, 10, 90, 90, 15, 80); // bezier 曲線を描画

  let steps = 3;
  for (let i = 0; i <= steps; i++) {
    let t = i / steps;
    let x = bezierPoint(85, 10, 90, 15, t); // bezier 曲線上のx座標を取得
    let y = bezierPoint(20, 10, 90, 80, t); // bezier 曲線上のy座標を取得
    let tx = bezierTangent(85, 10, 90, 15, t); // bezier 曲線の接線x座標を取得
    let ty = bezierTangent(20, 10, 90, 80, t); // bezier 曲線の接線y座標を取得
    let a = atan2(ty, tx); // x軸からの角度を取得
    a += PI;
    stroke(255, 0, 0); // 赤色を設定
    line(x, y, cos(a) * 20 + x, sin(a) * 20 + y); // 法線を描画

    stroke(0, 0, 255); // 青色を設定
    line(x, y, cos(a) * -20 + x, sin(a) * -20 + y); // 反対側に法線を描画

    stroke(0);
    ellipse(x, y, 6, 6);
  }
}

실행 결과

예 2

function draw(){
  noFill();

  stroke(255, 0, 0); // 赤色を設定
  bezier(125, 20, 10, 10, 90, 90, 15, 80); // bezier 曲線を描画

  stroke(0, 255, 0); // 緑色を設定
  circle(125, 20, 8); // 始点を描画

  stroke(0, 0, 255); // 青色を設定
  circle(15, 80, 8); // 終点を描画

  stroke(200, 0, 255); // 紫色を設定
  circle(10, 10, 8); // 最初の制御点を描画

  stroke(245, 210, 0); // 黄色を設定
  circle(90, 90, 8); // 2番めの制御点を描画

  let steps = 16;
  stroke(50, 200, 255); // 水色を設定
  for (let i = 0; i <= steps; i++){
    let t = i / steps;
    let x = bezierPoint(125, 10, 90, 15, t); // bezier 曲線上のx座標を取得
    let y = bezierPoint(20, 10, 90, 80, t); // bezier 曲線上のy座標を取得
    let tx = bezierTangent(125, 10, 90, 15, t); // bezier 曲線の接線x座標を取得
    let ty = bezierTangent(20, 10, 90, 80, t); // bezier 曲線の接線y座標を取得
    let a = atan2 (ty, tx); // x軸からの角度を取得
    a = a - HALF_PI;
    line(x, y, cos(a) * 12 + x, sin(a) * 12 + y); // 法線を描画
  }
}

실행 결과

저작권

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