P5.js 한국어 참조 (curveTangent)

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

curveTangent()

설명문

점 a, b, c, d 의 위치 t 에서 곡선의 접선을 계산합니다. 파라미터 t 는 0 과 1 사이에서 변화해, a 와 d 는 곡선상의 점, b 와 c 는 제어점입니다.

구문

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

매개변수

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

b
Number : 첫 번째 제어점 좌표

c
Number : 두 번째 제어점 좌표

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

t
Number : 0과 1 사이의 값

반환값

Number: 위치 t 의 접선

예 1

function draw(){
  noFill();
  stroke(0);
  curve(5, 26, 73, 24, 73, 61, 15, 65); // 曲線を描画

  let steps = 4;
  for(let i = 0; i <= steps; i++){
    let t = i / steps;
    let x = curvePoint(5, 73, 73, 15, t); // 曲線上のx座標を取得
    let y = curvePoint(26, 24, 61, 65, t); // 曲線上のy座標を取得

    let tx = curveTangent(5, 73, 73, 15, t); // 曲線の接線x座標を取得
    let ty = curveTangent(26, 24, 61, 65, t); // 曲線の接線y座標を取得

    let a = atan2(ty, tx); // x軸からの角度を取得
    a -= HALF_PI;
    stroke(255, 0, 0);
    line(x, y, cos(a)* 8 + x, sin(a)* 8 + 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)를 따릅니다.