曲線

この短いチュートリアルでは、p5.js の3つのカーブタイプを紹介します: 円弧、スプライン曲線、およびベジェ曲線。

円弧

円弧は描画するのに最も簡単なカーブであり、楕円の一部として定義されています。次のパラメーターで関数を呼び出します:

arc (x, y, w, h, start, stop, [mode])

最初の4つのパラメーター（x,y,w,h）は、円弧の境界ボックスを定義し、次の2つ（start, stop）は、円弧の開始角度と終了角度です。 これらの角度はラジアンで与えられ、0度が東を指し、PI ラジアンが180°に相当します。

スプライン曲線

円弧は良いですが、単純です。次の関数 curve() では、必ずしも円弧の一部であるとは限らない曲線を描画できます。 この関数は、技術的にはロム-カトマルスプラインと呼ばれるものを描画します。曲線を描画するには、曲線が始まる点と終わる点の (x, y) 座標を指定する必要があります。また、曲線の方向と湾曲量を決定する2つの制御点も指定する必要があります。 最初の2つと最後の2つのパラメーターが曲線の制御点です。curve() への呼び出しでは、これらのパラメーターが使われます:

curve (cpx1, cpy1, x1, y1, x2, y2, cpx2, cpy2);

制御点は曲線の見た目にどのように影響しますか？

曲線の始点における接線は、制御点1と曲線の終点との間の直線に平行です。曲線の終点における接線は、始点と制御点2との間の直線に平行です。

次の図は、曲線とその制御点がどのように曲線に影響するかを示すためにドラッグできる点を示しています:

連続スプライン曲線

単独での curve() はあまり魅力的ではありません。複数の点を通る連続した曲線を描画するには、curveVertex() 関数を使用した方が良いでしょう。この関数は、beginShape() 関数と endShape() 関数で図形を作成しているときにのみ使用できます。 一般的な使い方では、曲線の最初の点を最初の制御点とし、曲線の最後の点を最後の制御点として使用します。

ベジェ曲線

スプライン曲線は円弧よりも優れていますが、芸術的な印象を与える流麗で滑らかな曲線はありません。そういった曲線を描画するには、bezier() 関数を使ってベジェ曲線を描画する必要があります。スプライン曲線と同様に、bezier() 関数には8つのパラメーターがありますが、順序が異なります。 最初の2つと最後の2つのパラメーターは開始点と終了点であり、中間の4つの点が制御点です。

bezier(x1, y1, cpx1, cpy1, cpx2, cpy2, x2, y2);

制御点が curve() にどのように影響するかを視覚化することは難しいですが、制御点がベジェ曲線にどのように影響するかを見るのは少し容易です。 2本のポールといくつかのゴムバンドを想像してください。ポールは制御点を曲線の端点に接続します。ゴムバンドはポールの上部を接続します。 さらに2本のゴムバンドがポールの中間点を最初のゴムバンドの中間点に接続します。もう1本のゴムバンドがそれらの中間点を接続します。 その最後のゴムバンドの中心は曲線に結ばれています。この図は説明に役立ち、点を移動させることで曲線を変更できます。

連続ベジェ曲線

curveVertex() が連続スプライン曲線を作成するのを可能にするように、bezierVertex() を使用すると連続ベジェ曲線を作成できます。 再び、beginShape() / endShape() のシーケンス内である必要があります。vertex(startX, startY) を使って曲線の開始アンカーポイントを指定する必要があります。次のポイントは、次のような呼び出しで指定されます:

bezierVertex(cpx1, cpy1, cpx2, cpy2, x, y);

これは連続ベジェ曲線ですが、滑らかにはつながっていません。曲線 A と B を滑らかに連続させるためには、A の最後の制御点、A の最後の点、および B の最初の制御点が直線上になければなりません。

まとめ

• 円や楕円の一部が必要な場合は、arc() を使用します。連続した円弧を作成したり、図形の一部として使用することはできません。
• 2点間の小さな曲線が必要な場合は、curve() を使用します。図形の一部として連続した曲線のシリーズを作成するには、curveVertex() を使用します。
• 長くて滑らかな曲線が必要な場合は、bezier() を使用します。 図形の一部として連続したベジェ曲線のシリーズを作成するには、bezierVertex() を使用します。