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

これはなに

書籍『Generative Design with p5.js』P_1_2_1_01に登場する関数について理解を深める記事です。
今回はmap()。

map()

mapといえば他の言語だと配列操作の印象がありますが、
p5のmap関数は全然違う目的で使用されるようです。

Type

map(
    value: number,
    start1: number,
    stop1: number,
    start2: number,
    stop2: number,
    withinBounds?: boolean
): number;

引数については下記の通り。

value 動的な値
start1 valueの下限
stop1 valueの上限
start2 valueの下限に対して返す値の下限
stop2 valueの上限に対して返す値の上限
withinBounds trueのとき、stop2の値を超えることがなくなるオプション

↑
mapを理解してこれを書くまで結構苦しみました。

リファレンスより

Re-maps a number from one range to another.
In the first example above, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the window (0) to the right edge (width).

数値をある範囲から別の範囲に再マッピングします。
上の最初の例では、25という数字は、0から100の範囲の値から、ウィンドウの左端（0）から右端（幅）までの範囲の値に変換されます。（DeepL翻訳）

これだけではわからん（素直な気持ち）

試してみる

リファレンスを参考に下記のコードを試してみました。
コンソールにポインタのX座標とmapの結果を出力します。
（Vueで使用しているため関数の前に'p'があります）

p.setup = () => {
  p.createCanvas(500, 500);
  // p.colorMode(p.HSB);
};

p.draw = () => {
  p.background(204);
  let x1 = p.map(p.mouseX, 0, p.width, 25, 75);
  console.log(`mouseX: ${p.mouseX} x1: ${x1}`);
  p.ellipse(x1, 25, 25, 25);
};

出力結果がこちら。
mouseXが522のとき、mapの結果は77.2と出ています。

mouseX: 522 x1: 77.2

mapの結果はellipse()の第一引数にセットされているため、
ポインタが横に動けば描画された楕円も横に動きます。

p.ellipse(x1, 25, 25, 25);

では何がおこっているのか。

まずstart1は0、stop1はwidthです。
つまりmapにおけるvalueの開始地点は0、
終着地点は500となります。

それを踏まえてstart2とstop2の結果が返る値となります。
start2は25、ということはmouseX(value)が0のときに25を返します。

stop2は75なので、mouseX(value)が500(width)のときに75を返します。
ここでもう一度コンソールに出力した結果を確認しましょう。

mouseX: 522 x1: 77.2

ポインタのX座標が522、x1が77.2と出ています。
つまり、現在のポインタはcreateCanvasの範囲からはみ出た場所におり、
targetの位置もstop2の値を少し超えた場所に位置しているということになります。

今回はつけていないですが、第五引数のwithinBoundsにtrueを渡せば
mouseXが500を超えても、mapの返り値は75でストップします。

いやー難しかった！！

どんなときに使えそうか

「変動する値をもって、範囲を指定したい別の値に置き換えたいとき」
でいいんじゃないでしょうか。

実際にP_1_2_1_01で使用している箇所をみてみましょう。

tileCountX = int(map(mouseX, 0, width, 2, 100));
tileCountY = int(map(mouseY, 0, height, 2, 10));

リンクから挙動を試してみてください。
横軸の正確な目視は難しいですが、
マウスが右いっぱいの時にタイルの数が１行に対して100列、
マウスが下いっぱいの時にタイルが10行になっていることが分かります。

動的な要素で制御したいときはmap()の使用を検討してみると
面白い動きができるかもしれませんね。

参考

p5.js reference | map()
『Generative Design with p5.js』P_1_2_1_01