お絵かきプログラミングProcessingサンプルコード解説の第8弾です！
ProcessingをまだPCに導入されていない方は、こちらの記事を参考に導入してみてください！
今回は Constrain というサンプルコードを見てみましょう。
難易度は ★★★☆☆ くらい。
わからない箇所があればコメントをください。
Table of Contents
もくじ
とりあえず動かしてみよう
Processnigを起動し、サンプルコードを開きましょう。
ファイル → サンプル と選択し現れたウィンドウで Basics → Input → Constrain と選択してください。
このようなスケッチが現れます。ウィンドウの左上にある再生ボタンをクリックして実行してみましょう。
ドラッグしてみると…円が動きます。
今回のコードはモノをマウスカーソルに追従させるのですが、それに際して変数の値に制限をつけます。
今回はこの、制限の付け方を説明します。便利な技なのでぜひ身につけていってください！
コードを読む
とりあえずコードの全貌を確認しましょう。
そこそこの長さですね。では上からみていきましょう。
まずコメントから始まっていますね。
「マウスをスクリーン上で動かすと、円が動くよ。このプログラムは円を箱の内側に束縛しているよ」と言っています。
2文目が大事です。束縛 (constrain) という言葉はプログラミングにはあまり出てきませんが、今回のサンプルコードのタイトルにもなっていますね。
まずはグローバル変数を確認しましょう。
今回は変数説明のコメントがなく、解読が辛そうです…！
| 変数 | 意味 |
|---|---|
| mx | 何かのx座標？ |
| my | 何かのy座標？ |
| easing | ？？？ |
| radius | 半径？ |
| edge | フチ？ |
| inner | 内側？ edge +radius らしい |
この中ではeasingが特に聞きなれない言葉でしょうか。
easingとは「緩和」を意味する言葉ですが、今回どのように使われる変数なのかはまだわかりません。いつものように、ふわっとイメージだけもっておきましょう。
ではsetupの中身を見てみましょう。
setup
sizeは毎度おなじみのウィンドウサイズを指定する関数です。
noStrokeもよくみる関数ですね。線を描かないようにする設定です。
ellipseMode, rectModeは似たような役割の関数です。ellipseModeはellipseの、rectModeはrectの引数の取り方を指定します。これらは描画関数が呼ばれるタイミングで確認しましょう。
次にdrawを見てみます。
draw
少しずつみていきましょう。
まずは毎度おなじみbackgroundですね。ウィンドウ全体を一色で塗りつぶす関数です。今回のサンプルコードは、drawが呼ばれるたびに直前の画面を消すことがわかります。
次に条件分岐がきていますね。
if文が２つ連続していますが、ざっくり見た感じ、似ています。よく見ると１つ目と２つ目は注目している変数が異なるだけで、構造は同じであることがわかります。
１つ目を見てみましょう。
mouseXとmxの差に注目していますね。
mouseXはよく使われるので覚えている方が多いと思いますが、マウスカーソルのx座標です。
もしこの差が0.1より大きければ、差にeasingをかけた値をmxに足しています。
式をよく見てもらうとわかりますが、mouseXがmxより右側にある（mouseX > mx）場合、mxにプラスの値が足され、逆の場合、mxにマイナスの値が足されます。この結果mxはmouseXに近づきます。
mxの変化を図で表すとこのようになります。
２つ目のif文はmyをmouseYに近づける処理になっています。
mx, myが何を表すのかこの時点ではわかりませんが、とにかく次を見てみましょう。
出ました。constrainです。
この関数は、変数がとる値を、指定の範囲内に収める関数です。
引数の取り方は、
constrain(注目する変数, 下限, 上限)
です。
32行目の式の右側の処理は、
mxの値が範囲内にあればそのままmxを、inner未満であれば、innerを、width–innerより大きければwidth–innerを返す処理になっています。
今回はmxの値の範囲についてのconstrainの結果をmxに代入しているので、単にmxが指定の範囲を超えないように処理されていることがわかります。
constrainによる処理を図で表すとこんな感じになります。
myについても同様ですね。
次をみましょう。
このあたりも毎度お馴染みの関数だと思います。
fillは塗りの色を指定する関数です。
rect, ellipseはそれぞれ長方形、楕円を描く関数です。setupでこれらの関数の引数指定をしていたのでじっくり確認しましょう。
setupでこんな設定をしていましたね。
これらの設定により、rectの引数は
長方形の左上頂点の座標を (x1, y1)、右下頂点の座標を (x2, y2) とすれば、
rect(x1, y1, x2, y2)
となります。
ellipseの引数は、楕円の中心の座標を (x, y)、x方向半径をrx、y方向の半径をryとすれば
ellipse(x, y, rx, ry)
となります。
今回これらの関数で描画される図形は図のようになります。
ここで初めて判明しましたが、変数の意味はこのようになっていました。
| 変数 | 意味 |
|---|---|
| mx | 円の中心x座標 |
| my | 円の中心y座標 |
| easing | 円がカーソルの近く速さの指標 |
| radius | 半径 |
| edge | フチの幅 |
| inner | ウィンドウ端からと 円の中心との距離の最小値 |
これで終わりですね！お疲れ様でした！
考えること
今回easingという変数が、円がマウスカーソルに追従するときの速さの指標となっていました。
例えばx座標についてのこの式をみればeasingが大きければ、マウスカーソルへの追従は速くなるように思えます。
試しに
easing = 0.1
として実行してみましょう。予想通り、追従が速くなることがわかります。
では思い切って
easing = 1
として実行してみましょう。予想通り、追従がさらに速くなることがわかります。
ではさらに思い切って
easing = 10
として実行してみましょう。予想通り…にはならなかったと思います。
どうしてこのような挙動になるのでしょうか？
余力のある方はぜひ考えてみてください。答えはいずれどこかに用意しようと思います。
さいごに
今回は、描画での制限の付け方を扱いました。
本来はif文で実現できる処理なのですが、これが一行で簡単に書けることで、簡単に値の範囲を制限でき、想定外の可能性をできるだけ減らした状態でコーディングすることができます。これによりバグが減らせるはずです。
折角用意されているので、使いこなしてほしいです。
ではまた次回！
