お絵かきプログラミングProcessingサンプルコード解説の第7弾です！
ProcessingをまだPCに導入されていない方は、こちらの記事を参考に導入してみてください！
今回は ContinuousLines というサンプルコードをみてみましょう。

難易度は ★☆☆☆☆ くらい。簡単です！！

注意！説明は全てMac版での画面を示しながら行いますが、Windows版でもほとんど同じものが現れると思います。
わからない箇所があればコメントをください。

Table of Contents

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

Processnigを起動し、サンプルコードを開きましょう。
ファイル → サンプルと選択し現れたウィンドウで Topics → Drawing → ContinuousLines と選択してください。

このようなスケッチが現れます。ウィンドウの左上にある再生ボタンをクリックして実行してみましょう。

ドラッグしてみると…線を描けます。

今回のコードは、「ドラッグで絵を描くコード」です。

コードを読む

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

短い！実際簡単です。

まずコメントから始まっていますね。

「クリック、ドラッグすると線が描けるよ。」と言っています。

ではまずsetupの中身を見てみましょう。

setup

sizeは毎度おなじみのウィンドウサイズを指定する関数です。
いつものbackgroundですね。画面全体を塗りつぶします。引数の102は灰色になりますが、値によってその濃さが変わります。気になる方は適当に値を変えて実行してみましょう。

次にdrawを見てみましょう。

draw

これも短いですね。サクッと読みましょう。

strokeは描画する線の色を指定する関数です。ここでは引数を255にしていますが、白になります。

ifの中身のmouserPressedはマウスのクリックボタンが押されているかどうかを表す変数です。ボタンが押されている時はtrue、押されていない時はfalseとなります。
mouseX, mouseY は現在のマウスカーソル位置のx座標, y座標です。同様に、mouseX, mouseYは直前のマウスカーソル位置のx座標、y座標です。
そしてlineは文字通り線を描く関数です。
2点 (x1, y1)、(x2, y2) の間を結ぶ線を描く場合、引数の取り方は、　
line(x1, y1, x2, y2)
となります。
これにより図のように２点間を結ぶ線（線分）が描かれます。