お絵かきプログラミングProcessingサンプルコード解説の第14弾です！
ProcessingをまだPCに導入されていない方は、こちらの記事を参考に導入してみてください！
今回は Bezier というサンプルコードを見てみましょう。この記事を読んでもらうと、↓このような描画に必要なコードを理解することができます。

とりあえず動かしてみよう

Processnigを起動し、サンプルコードを開きましょう。
ファイル → サンプル と選択し現れたウィンドウで Basics → Form → Bezier と選択してBezierのスケッチを表示し、ウィンドウの左上にある再生ボタンをクリックして実行してみましょう。

曲線がマウスの動きに合わせて変形します。

コードを読む

とりあえずコードの全貌を確認しましょう。

短いですね。setup()、draw()それぞれ数行です。

まず初めのコメントを読みましょう。

「bezier()の初めの２つのパラメータは曲線の始点を指定し、最後の2つのパラメータは終点を指定します。間のパラメータは曲線の形を定義する制御点を設定する。」
とのことです。

ベジェ曲線については、こちらのページの説明が大変わかりやすいです。
ベジェ曲線とは

ではまずsetup()を確認しましょう。

setup

• size(): 描画ウィンドウのサイズを指定する関数。
• stroke(): 図形の枠線の色を指定します。今回は白が指定されています。
• noFill(): 図形の中を塗りつぶさないようにします（noFill()を呼んだ後の描画に適用されます）。

よくみる関数ばかりで、シンプルですね。

では次にdraw()を見てみましょう。

draw

background()は画面全体を塗りつぶす関数で、今回は黒で塗りつぶしています。

そして、なんと次で最後です。ループが回されていますが、その中でbezier()が呼ばれていますね。
この関数は、bezier(x1, y1, x2, y2, x3, y3, x4, y4)という形で、平面上の４つの点の座標を引数にとっています。

• 始点：(x1, y1)
• 制御点: (x2, y2), (x3, y3)
• 終点： (x4, y4)

bezier()

サンプルコードでは以下のような対応になります。

描画された図形と各点の座標の関係を確認しましょう。(説明用の図は、見やすさのために色を少し変更しています。)
図中のベジェ曲線で色が濃いものは、ループ処理でi=0の時に描画されるものです。

制御点も示すと以下のようになります。（始点・終点と対応する制御点を結ぶ線を、赤で描いています）

始点・終点から対応する制御点へ直線を引くと、これらは曲線に対して始点・終点で接するような線分になっていることがわかり、ベジェ曲線の定義との関連のイメージがわかるかと思います。

これがBezierの全貌になります。お疲れ様でした！

おまけ

Bezierのサンプルについて理解を深めるための小さな問題を用意しました。興味がある方は取り組んでみてください。

解答例はこちらにおいておきます。

さいごに

今回は、ベジェ曲線の描画を学びました。
円・楕円の関数では不可能な曲線の描画もできるので、描画の幅が広がったと思います。ぜひ使ってみてください！

ではまた次回！