Processingとジェネラティブアート入門——乱数と繰り返しから始める

ジェネラティブアートの入口は、「繰り返し」で形を並べ、「乱数」で少しずつずらす の2つで足ります。難しい数式を覚える前に、この2つだけで1枚の絵が成立することを体験しておくと、その先のノイズや物理演算も「ずらし方の種類が増えただけ」と捉えられるようになります。私はこの順番で触ってきました。

Processingは「スケッチブック」として作られた

Processingは、公式サイトのOverviewによると、2001年の春にBen FryとCasey Reasが始めたプロジェクトです。当時2人はMITメディアラボの大学院生で、John Maedaの研究グループに所属していたと書かれています。同じページには、ソフトウェアのスケッチブックとして、そして視覚的な文脈でプログラミングの基礎を教えるために作られた、という説明があります。

この「スケッチブック」という位置づけが、私には大事でした。完成品を作る道具ではなく、数行書いて、動かして、直す道具。Webの案件で使うフレームワークとは目的が違うので、設計やフォルダ構成を考えずに書き始めてよい、という気楽さがあります。

ブラウザで動かしたい場合は、JavaScriptライブラリのp5.jsがあります。公式のAboutページでは、Lauren Lee McCarthyが作者として紹介され、Processing Foundationが支えるプロジェクトの1つとされています。Web制作の人には、インストールなしで試せるp5.jsのほうが入りやすいと感じています。以下のコードもp5.jsで書きます。

繰り返しで「整列」を作る

最初に書くのは、同じ形を等間隔に並べるだけのコードです。

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(245);
  for (let y = 20; y < height; y += 40) {
    for (let x = 20; x < width; x += 40) {
      circle(x, y, 24);
    }
  }
}

for を2重にして、横と縦に円を並べています。これだけだと方眼紙のような絵ですが、この「整列した状態」が基準になります。ジェネラティブアートの面白さは、整った状態からどれだけ、どうやって崩すかにあると私は考えています。基準がないと、崩れているのか散らかっているのかが見分けられません。

乱数で「ずれ」を入れる

次に、円の大きさと位置に乱数を足します。

let d = random(8, 32);
circle(x + random(-6, 6), y + random(-6, 6), d);

circle(x, y, 24) の1行をこの2行に置き換えるだけで、絵は急に手描きのような表情になります。ここで試してほしいのは、乱数の幅を変えることです。

ずらす幅	見え方の傾向
小さい（±2程度）	整列は保たれ、わずかに揺らいで見える
中くらい（±6程度）	並びは読めるが、手作業のような不揃いが出る
大きい（±40以上）	格子が読めなくなり、散らばった点に見える

数値は私が400pxのキャンバスで試したときの感覚なので、目安として見てください。同じコードでも、幅の決め方ひとつで印象が変わります。「どの幅が気持ちいいか」を決めるのは作る人で、ここがデザインの仕事だと感じています。

再現できるようにする：シードとノイズ

乱数を使うと、実行するたびに絵が変わります。p5.jsのリファレンスでも、random() は既定では実行のたびに違う結果を返すと説明されています。気に入った1枚を残したいときは、randomSeed() に決まった数値を渡すと、同じ結果を再現できます。

randomSeed(42);

私は気に入った絵が出たら、シードの数値をファイル名やメモに残すようにしています。あとで「あの絵をもう少し大きく」と言われたときに、数値がないと同じものに戻れないからです。

もう1つ覚えておくと便利なのが noise() です。リファレンスによると、random() は呼び出しごとに値が大きく変わりうるのに対し、noise() は「なめらか」な値を作れます。戻り値は0から1の間で、Ken Perlinが1980年代に映画『トロン』の制作の中で考案した、と紹介されています。隣り合う円の大きさがゆるやかにつながるので、波や地形のような流れを作りたいときに使います。

制作の仕事にどう持ち帰るか

ジェネラティブアートを案件にそのまま使う機会は多くありません。ただ、私は次の2点で役に立っていると感じています。

• 「ルールで見た目を決める」考え方：余白やサイズを数値と規則で決める習慣は、デザインシステムやCSSの変数設計と地続きです
• 背景やキービジュアルの素材づくり：写真が用意できない案件で、ブランドカラーだけを使ったパターンを数十枚出して選ぶ、という使い方ができます

どちらも、シードを残しておけば「同じものをもう一度出せる」ことが前提になります。再現できない素材は、修正依頼に応えられないので仕事では使いにくいです。

明日から試せる一手

p5.jsのWebエディタを開いて、上の2重ループを貼り、random() の幅だけを3回変えて見比べてみてください。気に入った幅が決まったら randomSeed() に好きな数値を入れて、何度実行しても同じ絵が出ることを確かめます。「並べる・ずらす・固定する」の3つが手に入れば、入門としては十分だと思います。