Processingサンプルコードをわかりやすく解説【Constrain】

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

難易度は ★★★☆☆ くらい。

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

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

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

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

ドラッグしてみると…円が動きます

今回のコードはモノをマウスカーソルに追従させるのですが、それに際して変数の値に制限をつけます

今回はこの、制限の付け方を説明します。便利な技なのでぜひ身につけていってください!



コードを読む

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

そこそこの長さですね。では上からみていきましょう。

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

マウスをスクリーン上で動かすと、円が動くよ。このプログラムは円を箱の内側に束縛している」と言っています。
2文目が大事です。束縛 (constrain) という言葉はプログラミングにはあまり出てきませんが、今回のサンプルコードのタイトルにもなっていますね。

まずはグローバル変数を確認しましょう。

今回は変数説明のコメントがなく、解読が辛そうです…!

変数意味
mx何かのx座標?
my何かのy座標?
easing???
radius半径?
edgeフチ?
inner内側?
edge +radius らしい

この中ではeasingが特に聞きなれない言葉でしょうか。
easingとは「緩和」を意味する言葉ですが、今回どのように使われる変数なのかはまだわかりません。いつものように、ふわっとイメージだけもっておきましょう

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

setup


sizeは毎度おなじみのウィンドウサイズを指定する関数です。
noStrokeもよくみる関数ですね。線を描かないようにする設定です。
ellipseMode, rectModeは似たような役割の関数です。ellipseModeellipseの、rectModerect引数の取り方を指定します。これらは描画関数が呼ばれるタイミングで確認しましょう。

次にdrawを見てみます。

draw


少しずつみていきましょう。


まずは毎度おなじみbackgroundですね。ウィンドウ全体を一色で塗りつぶす関数です。今回のサンプルコードは、drawが呼ばれるたびに直前の画面を消すことがわかります。

次に条件分岐がきていますね。

if文が2つ連続していますが、ざっくり見た感じ、似ています。よく見ると1つ目と2つ目は注目している変数が異なるだけで、構造は同じであることがわかります。

1つ目を見てみましょう。
mouseXmxの差に注目していますね。
mouseXはよく使われるので覚えている方が多いと思いますが、マウスカーソルのx座標です。
もしこの差が0.1より大きければ、差にeasingをかけた値をmxに足しています。
式をよく見てもらうとわかりますが、mouseXmxより右側にある(mouseX > mx)場合、mxにプラスの値が足され、逆の場合、mxにマイナスの値が足されますこの結果mxmouseXに近づきます。
mxの変化を図で表すとこのようになります。

2つ目のif文はmymouseYに近づける処理になっています。
mx, myが何を表すのかこの時点ではわかりませんが、とにかく次を見てみましょう。


出ました。constrainです。
この関数は、変数がとる値を、指定の範囲内に収める関数です。
引数の取り方は、

constrain(注目する変数, 下限, 上限)

です。

32行目の式の右側の処理は、
mxの値が範囲内にあればそのままmxを、inner未満であれば、innerを、widthinnerより大きければwidthinnerを返す処理になっています。
今回は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文で実現できる処理なのですが、これが一行で簡単に書けることで、簡単に値の範囲を制限でき、想定外の可能性をできるだけ減らした状態でコーディングすることができます。これによりバグが減らせるはずです。
折角用意されているので、使いこなしてほしいです。

ではまた次回!

参考

公式ドキュメント constrain()

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください