例えばこんな感じのスケッチを作ったとします。


See the Pen
constrain00
by reona396 (@reona396)
on CodePen.



スケッチ上にマウスカーソルをあわせると、オレンジ色の四角の右に青い四角が現れます。
青い四角はマウスカーソルの縦の位置に追従してインタラクティブに長さが変わります。

現状は上方向にカーソルを移動させると黒い線を越えて四角が裏返るような挙動になります。

また、下方向にカーソルを移動させればさせるほど、青い四角は下方向に伸びています。
わかりにくいですが、実はスケッチの外部にカーソルを移動させても追従しているようです。

ここから「青い四角もオレンジ色の四角と同じサイズの範囲で長さが変わってほしい」と考えたとします。
つまり、2本の黒い線の間でだけでサイズが変わるようにしたいということです。
これをバシッと書ける関数があるんですよ。
それが constrain() です!!

p5.js reference | constrain()

「constrain」とは制限するという意味です。
その言葉のとおり、指定した値を下限と上限の間で制限します。
要はUnityでのClampみたいです。

p5.jsでconstrain()を使って先ほどの条件にそったコードを書いてみます。


See the Pen
constrain01
by reona396 (@reona396)
on CodePen.



黒い線の上部、下部だと青い四角が伸びなくなっています。
青い四角が黒い線の間でだけ伸びたり縮んだりする挙動になっていますね。
これは青い四角の縦の長さをconstrainで0から250までに制限しているためです。
便利!!

この関数を使った作品がこちら。

この作品は画像の上にさらに画像を重ねて「変身」を表現しています。
上から重ねる画像はmouseYで表示領域を変えています。
この時、単純にmouseYで制御するとスケッチの下部にマウスカーソルが進んだ時、
上に重ねた画像だけがどんどん伸び続ける…という挙動になってしまっていました。
というわけで、constrainを使って0からheightまでに制御しています。

---

こんな便利な関数なのに全然知らなかったんですよね…
調べてみたらゲームの所持金の制御に使ったりすることもあるみたいですね。
¥0より下にならないように、かつカンスト値より上にならないように、みたいな!
汎用性がある!!