P5.js 日本語リファレンス(curveTightness)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の curveTightness関数を説明します。

curveTightness()

説明文

curve() および curveVertex() で作成された曲線の曲率(カーブのきつさ)を変更します。指定するパラメータ amount は、曲線が頂点ポイントにどのように影響するかを決定します。値 0.0 はデフォルト値であり(この値は曲線を Catmull-Rom スプラインとして定義します)、値 1.0 はすべてのポイントを曲線でなく直線でつなげます。

構文

curveTightness(amount)

パラメタ

• amount
  Number：元の頂点からの変形量

例

//マウスを左右に動かして曲線の変化を確認します
function setup(){
  createCanvas(100, 100);
  noFill();
}

function draw(){
  background(255);

  stroke(0, 0, 255); // 青色の設定
  circle(10, 26, 6);
  
  stroke(0, 180, 255); // 水色の設定
  circle(83, 24, 6);
  
  stroke(0, 255, 0); // 緑色の設定
  circle(83, 61, 6);
  
  stroke(255, 0, 0); // 赤色の設定
  circle(25, 65, 6);

  // マウス位置(x座標)を、(0 ～キャンバス幅) から (-5 ～ 5) に変換します
  let t = map(mouseX, 0, width, -5, 5);
  
  stroke(0, 0, 0);
  textSize(12);
  text("t=", 10, 10); // t=xx の描画
  text(t, 30, 10);

  noFill();
  curveTightness(t);
  beginShape();
  curveVertex(10, 26);
  curveVertex(10, 26);
  curveVertex(83, 24);
  curveVertex(83, 61);
  curveVertex(25, 65);
  curveVertex(25, 65);
  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) に従います。