【Processing】bezierVertex()関数の使い方【滑らかな曲線を描くために使う】

2024年9月22日

URLをコピーしました！

ワタタク

今回の記事の目的はProcessingの「bezierVertex()関数」を理解し、自分なりに使ってみること。

記事内のProcessingのバージョンは4.3。

【Processing】bezierVertex()関数について

bezierVertex()関数について

bezierVertexは、英語で「ベジエ頂点」という意味
bezierVertex()を使うと、滑らかな曲線を描くことができる

【Processing】bezierVertex()関数の主な書き方

beginShape(); // 形を描き始める！（アンカーポイント）

vertex(x1, y1); // ここが最初の点！（アンカーポイント1）

bezierVertex(x2, y2, x3, y3, x4, y4); // ここで曲線を描くよ！
// x2, y2 は曲線の最初の制御点（コントロールポイント1）
// x3, y3 は曲線の次の制御点（コントロールポイント2）
// x4, y4 は曲線の終わりの点（アンカーポイント2）

endShape(); // 形を描き終わるよ！

【Processing】bezierVertex()関数の使い方【コード】

void setup() {
  size(400, 400); // キャンバスのサイズを設定
}

void draw() {
  background(255); // 背景を白に

  stroke(0); // 線の色を黒に
  noFill(); // 塗りつぶしをしない

  beginShape(); // 形を描き始める

  vertex(50, 300); // 最初の点を指定（アンカーポイント1）
  bezierVertex(150, 100, 250, 100, 350, 300); // 曲線を描く
  // (150, 100) と (250, 100) が制御点（コントロールポイント）
　// (350, 300) が終わりの点（アンカーポイント2）

  endShape(); // 形を描き終わる
}