お絵かきプログラミングProcessingサンプルコード解説の第３弾です！
ProcessingをまだPCに導入されていない方は、こちらの記事を参考に導入してみてください！
今回は MouseFunctions というサンプルコードをみてみましょう。
この記事では、マウスでクリックやドラッグなどの操作に応じた処理を行うコードの書き方を学べます。

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

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

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

正方形が出てきましたね。なんとなくドラッグしてみましょう…
動く！！

というわけでこのコードは、「直感的に移動できる正方形を描くコード」です。

インタラクティブな描画を行う際に、マウス操作を利用することは多いと思います。ぜひ身につけましょう。

コードを読む

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

…長いですね。全て理解するのは少々骨が折れそうですが頑張っていきましょう！

ところで気づきましたか？今回のコード、構成に特徴があります。

ブロックが多いですね。

各ブロックの開始部分だけ抜粋してみます。

初めの2つ、setupとdrawはこれまでも登場したものです。setupは初期設定のために一度だけ実行されるブロックで、drawは無限ループ実行されるブロックでしたね。

残りの3つは以下の通りです。

処理の流れは、こんな感じです。

では細かい処理を確認していきましょう！

上から読んでいこう

まずはsetupの前の部分を確認します

setupの前の処理は主に、グローバル変数の宣言です。
ブロックの内部で宣言した変数はそのブロック内でしか使えないローカル変数となります。様々なブロックで共有される変数はこのsetupの前の部分で宣言しておく必要があります。

たくさんの変数が宣言されていますね。boxsizeは、「箱の大きさ」でしょうか…
“Offset” という表現もありますね。オフセットとはある位置からの「ずれ」を表す変数名として使われる言葉ですが…この時点では流石にどう使われるのかわかりませんね。
箱が出てきて、動きそうくらいのイメージを持っておけば十分でしょう。

setup

次にsetupの部分をみます。

変数・関数の意味は次の通りです

draw

次にdrawの部分をみます。長いので少しずつみていきます。

backgroundはウィンドウ全体を塗りつぶす関数です。引数は色を表しますが、今回は「黒」を表します。他の色指定の方法を知りたい方は公式ドキュメントを参照してください。

次に進みましょう。

コメント文から始まっていますね。
「カーソルが箱の上にあるかどうかを検査する」と言っています。
初めのif文の中をみてみましょう。
mouseXとmouseYについて２つずつ、計4つの条件文がANDで繋がっていますが、bx, byはまだ意味がわからないので、一旦放置します。なんせ意味がわからないですからね、仕方ありません。

ただ条件分岐の内部を読むと、overBoxの値はこの条件が満たされているときがtrue、満たされていなければfalseとなっているので、overBoxはカーソルが箱の上にあるかどうかを表す変数なのかな？とうっすら想像がつきます。

分岐を抜けた直後をみてみましょう。

コメントは「箱を描く」と言ってますね。わかりやすい。
rectは長方形を描く関数ですが、引数はbx, by, boxSize, boxSize（２つ目）となっています。ここでsetupの部分で保留していた長方形描画の説明に戻ります。

rectは引数の取り方が複数あり、その取り方はrectを呼ぶ前に指定します。それがこの行です。
今回のRADIUSを指定した場合、rectの引数指定は、
rect(中心のx座標, 中心のy座標, 横幅, 縦幅)
となります。

これによりずっと放置していた変数bx, byの意味がわかりましたね。

絵で描くとこんな感じです。

ちなみに大方想像はできていましたが、boxSizeは箱の縦、横の長さですね、今回は縦横の長さが同じなので正方形になっています。

では変数の意味が判明してきたところで、先ほどのif分岐の内部を見直してみましょう。

条件式のmouseX, mouseYはマウスカーソルのx座標、y座標を表すことを考慮すると、この条件は
マウスカーソルが正方形の内部にあるかどうかを判定しているということがわかります。

また、overBoxはこの条件分岐にしたがったbool値が代入されているので、カーソルが正方形の上にあるかどうかを表す変数であることがわかりました。

ところで実はまだ謎の変数がありますね。lockedです。
これについてはここまで読んでもわかりません。仕方ありません。

実際にカーソルを正方形にのせると、辺の色が白に変化していますね。lockedはずっとfalseっぽいですね。でも、ぽいだけです。厳密な検討はまだできません。

これ以上にわかることはなさそうなので次に進みましょう。

mousePressed

mousePressedブロックの中身をみていきましょう。マウスでクリックした時に処理される部分ですね。

まずoverBoxで分岐しています。そしてその値に応じてlockedが決定されています。
lockedはカーソルが正方形上にある時にクリックされるとtrueに、正方形上にないときにクリックされるとfalseになるような変数であることがわかりました。

overBoxがtrueの場合のみ、fillが呼ばれていますね。fill(255,255,255)は塗り潰しの色を白にします。
xOffset, yOffsetが計算されていますが、これらはカーソル位置と長方形の中心との差分のようですが、何に使うのかはまだ不明ですね。

mouseDragged

このブロックはドラッグ操作を行っている間ずっと実行されます。

lockedがtrueの場合だけ処理が行われるような構造になっていますね。
bx, byがカーソルの座標情報によって更新され続けていることがわかります。更新に使われるxOffset, yOffsetは1つ前のブロックでみましたね。
しかしこのオフセットは何のために使われているのでしょうか？

ところで重要な事実として、ドラッグしている間は必ずクリックボタンが押されています。つまりmouseDraggedが実行されるとき、ほぼ同時にmousePressedも実行されます。
つまり、mousePressed内部のこの２行も実行されます。

これにより何が起こるかというと、mousePressed内部でxOffset, yOffsetが、mouseDragged内部でbx, byがほぼ同時に更新され続けます。

結果として、描画される長方形の位置が、マウスドラッグに合わせて動きます。マウスカーソルの位置変化の分だけbx, byを変化させる処理を行うことで実現していますね。

絵で説明するとこんな感じです。

次が最後のブロックになります！

mouseReleased

マウスのクリックボタンを離した時に実行されるブロックです。

lockedがfalseになっています。この処理の目的は何でしょうか。
lockedが使われているところを確認してみましょう。細かいところですが、draw内部での塗りつぶしの色の選択に使われていますね。もしmouseReleased内部にlockedをfalseにする処理を行わなかった場合、mousePressedにおいてtrueになったあと、次にクリックするまではずっとtrueのままです。このため、マウスボタンを離した後でも正方形が白いままになってしまいます。気になる方は手元のコードでmouseReleased内部の処理をコメントアウトして実行してみてください。

これで終わりです！お疲れ様でした！

さいごに

今回はマウス操作による分岐が起こるサンプルコードを扱いました。処理の流れを追うのは決して簡単ではなかったと思います。
このような処理フローは、マウス操作、キーボード入力、ボタンクリックなど、ユーザーからの入力により処理が変わるコードではよく使われる構造です。ぜひ使いこなしてくださいね！

今回は上からコードを読んで行ったときの気持ちに注意して解説しましたが、途中では変数の意味がわからないことはよくあります。これを避けるためにはコメントをいっぱい書きましょう。Processingサンプルコードはたまに説明コメントが全然書かれていないことがありますが、自分でコードを書くときは、コメントは多く残しておくべきです。

ではまた次回！