【p5.js】random(), noise()を使ってジェネラティブアートを再現する方法

p5.jsでジェネラティブアートを作る時は、
random(), noise()を使うことが多いと思います。

ジェネラティブアートなのでブラウザを更新するごとに. random(), noise()の値が変わり様々な表現をしてくれます。

ただ、気に入った表現に出会ったとしても、
それを再現できなくなってガッカリすることもありますよね。（私は何度かありました。）
そこでrandom(), noise()を使った作品を再現する方法を説明します。

Tips的な感じです。

seed値を取得

再現方法はrandomSeed(), noiseSeed()を使うことです。
これらに固定した値を設定すれば、実行するたびに同じ結果を生成することが出来ます。

まず、作成した作品のsetup()を下のコードの様にします。

function setup() {
  createCanvas(w, w);

  let r_seed = int(random(Number.MAX_SAFE_INTEGER));
  let n_seed = int(random(Number.MAX_SAFE_INTEGER));

  randomSeed(r_seed);
  noiseSeed(n_seed);

  console.log("randomSeed:", r_seed);
  console.log("noiseSeed:", n_seed);
}

これで実行すると毎回ランダムな実行結果となりますが、
console.log()でrandomSeed(), noiseSeed()に設定したseed値を出力する様にします。

実行した時に、下のようにログにseed値が表示されるはずです。

randomSeed:
1139045017
noiseSeed:
-1728431305

このseed値をメモしておけば、ランダムな表現の中で出会った素敵な作品を再現できます。

seed値を設定

再現する時には、メモしておいたseed値をコードに直接書いて実行すれば、再現可能です。

function setup() {
  createCanvas(w, w);

  let r_seed = 1139045017;
  let n_seed = -1728431305;

  randomSeed(r_seed);
  noiseSeed(n_seed);

  console.log("randomSeed:", r_seed);
  console.log("noiseSeed:", n_seed);
}

console.log()って何？という方は、
p5.js editorやopenprocessingを使って実行すれば、
下の方に表示されるはずです。

まとめ

p5.jsでrandom(), noise()を使った作品を再現する方法を説明しました。
一期一会なジェネラティブ・アートですが、
このやり方を使えば、気に入った表現を再現することが出来ます。
後々、描画は同じでサイズだけを変える際にも、使えたりします。
作品作りに活用していただければと思います。