p5js:ベジェ曲線の描画

ベジェ曲線を描画する方法です。
ベジェ曲線はなめらかな曲線を描くことができます。AdobeのIllustrator等のベクタードローツールでよく使われます。アンカーポイントとコントロールポイントの位置関係によって曲線の角度を決めます。

構文

bezier(x1, y1, x2, y2, x3, y3, x4, y4)

x1：1点目のアンカーポイントのX座標
y1：1点目のアンカーポイントのy座標
x2：1点目のコントロールポイントのx座標
y2：1点目のコントロールポイントのy座標
x3：2点目のコントロールポイントのx座標
y3：2点目のコントロールポイントのy座標
x4：2点目のアンカーポイントのX座標
y4：2点目のアンカーポイントのy座標

function setup() {
  createCanvas(100, 100);  
  background(220);
  noLoop();
}

function draw() {    
  noFill();
  bezier(85, 20, 10, 10, 90, 90, 15, 80);
}