p5.jsの関数まとめ part.5 constrain()

この記事は Qiita p5js アドベントカレンダー6日目の記事です。

これはなに

p5.jsが用意している関数について理解を深める記事です。
今回はconstrain()について。

constrain()

動的な数値(mouseXなど)をconstrainに渡すと、指定した範囲を超えない数値を返してくれる関数です。
地味ですがすごく面白い機能だと思います。

リファレンスより

Constrains a value between a minimum and maximum value.

最小値と最大値の間で値を拘束します。(DeepL翻訳)

Type

 constrain(n: number, low: number, high: number): number;

引数

• n 基本的にここは動的な値を渡すことになります。
• low 返す値の下限を設定できます。
• high 返す値の上限を設定できます。

nがlowを下回ったり、highを上回ったりしたとしても、
constrainからは必ずこの範囲の数値が返ることになります。

どんな時に使えそうか

以前私はp5を使ってこんなものを作りました。
https://twitter.com/TENTEN11055/status/1464353772088401921

これは三角形が0からframeCountの数値の間の大きさで描画されていくものです。
ただ画面を覆い尽くすほどの大きさは欲しくなく、ある程度で止まってほしかったのですがレンダリングを止めるわけにもいきません。

今回のconstrain()を使用すれば、指定した数字を最大値にすることができます。
試しに下記のコードを実行してみました。

function setup() {
  frameRate(20)
  createCanvas(600, 600);
}

function draw() {
  // frameCountで現在のフレーム数を取得し、0から500までのランダムな数値を取得
  const count = random(0, constrain(frameCount, 0, 500))
  // 結果を画面上にテキスト表示。
  textSize(32)
  text(int(count), random(0, size), random(0, size))
}

画面上に0から500までのランダムな数値が散りばめられるように書きました。
実行すると分かりますが、どれだけ時間がたっても500を超えることはなく、数値が散らばる範囲も(500, 500)の間です。

シンプルだけどかなり使える関数だと思いました。

参考

p5.js reference | constrain()
『Generative Design with p5.js』P_1_2_3_01