p5.js Addict をリニューアルしました。ジェネラティブアートを、コードから読むブログへ

このブログ「p5.js Addict」は、今日からかたちを変えます。これまでは p5.js とクリエイティブコーディングのニュースやイベント、学習、技術を幅広く扱ってきました。これからは、ひとつの作品を選び、そのコードを読む ことに絞ります。世界のクリエイターが公開したジェネラティブアート作品を記事の冒頭に埋め込み、その場で動かしてもらいながら、画面の模様がどんな仕組みから生まれているのかを、プログラミングに触れたことのない人にもわかる言葉で読み解いていきます。

なぜ「コードから読む」のか

美しい作品に出会うと、私はまず見とれます。そして少し経つと、どうしても知りたくなります。この揺らぎは、どこから来ているのだろうか、と。

絵画なら、筆の跡や絵の具の重なりから、描き手の手の動きを想像するしかありません。ジェネラティブアートは違います。作品を生み出した手順そのものが、コードとしてそこに残っています。数値ひとつ、条件分岐ひとつに、作者が迷い、選んだ跡が刻まれているのです。

他人のコードを読むことは、その思考の跡をたどることです。完成した画面だけを眺めているときには見えなかったものが、コードを読むと見えてきます。そうして読んだあとにもう一度作品を見ると、同じ画面がまるで違って見えることがあります。私はこのブログで、その体験を読者と分かち合いたいと考えました。

それに、ジェネラティブアートを始めたい人にとって、他人のコードを読むことはいちばん確かな学び方のひとつだと思います。関数の一覧を眺めるより、実際に動いている作品の中で関数がどう使われているかを見る方が、ずっと記憶に残ります。

新しい記事の読み方

これからの記事は、おおむね次の流れで進みます。

冒頭の作品: 記事のいちばん上に作品を埋め込んでいます。まずは動かしてみてください。マウスやキーボード、マイクに反応する作品もあります。
この作品の見どころ: 鑑賞者として、私がその作品のどこに惹かれるのかを書きます。
コードの全体像: プログラムがどんな部品でできているのかを、骨組みから説明します。
仕組みを読み解く: 作品の核になる処理を、コードを抜粋しながら順番に読みます。p5.js の関数が出てきたら、それが何をするのか、引数が何を意味するのかを添えます。三角関数やノイズのような数学が出てきたら、式より先に「何のために使っているのか」を言葉と比喩で説明します。
自分で改造してみる: どの数値を変えると何が起きそうか、手元で試せるヒントを並べます。
作品クレジット: 記事の終わりに、作品名、作者、公開日、ライセンス、作者の紹介をまとめています。

読みながら作品に戻って、説明と画面を見比べてみてください。「この行が、あの動きを作っているのか」と腑に落ちる瞬間が、きっとあるはずです。

作品の選び方と、作者への約束

作品を紹介するにあたって、守ると決めたことがあります。

まず、取り上げるのは 作者が商用を含む再利用を認めるライセンスで公開している作品だけ です。具体的には CC BY、CC BY-SA、CC0 などです。このサイトにはアフィリエイトのリンクがあるため、非営利での利用に限るライセンスの作品は、どれほど心惹かれても取り上げません。

次に、作品の著作権は作者にあります。作品は公開元の埋め込み機能で表示し、本文に載せるコードは原作から抜粋したもので、内容には手を加えません。抜粋が原作と一字一句同じであることは、記事を公開する前に機械的に照合しています。記事のヘッダー画像は、作品を実際に動かした画面を撮影したものです。CC BY-SA の作品であれば、その画像も同じライセンスで提供します。

そして、作者の経歴や制作の意図については、公開されているプロフィールと作品の説明に書かれていることだけを記します。コードから意図を推し量るときは、それが私の推測であるとわかるように書きます。

いまは主に、p5.js の作品が数多く公開されている OpenProcessing から作品を選んでいます。ただ、場所や道具にこだわるつもりはありません。コードで描かれ、読むことが許されている作品であれば、広く読んでいきたいと考えています。記事は 1〜2 週間に 1 本のペースで届けます。

これまでの記事について

リニューアルより前に書いた、ニュースやイベント、学習、技術の記事は、そのまま残しています。p5.js 以外の描画ツールとの比較や、展示の紹介など、いまでも役に立つ内容があるはずです。記事一覧から、引き続き読んでいただけます。

このヘッダー画像を描いたコード

この記事のヘッダー画像は、私が書いた p5.js のコードで描きました。新しいブログの最初のお知らせなので、ここでも少しだけコードを読んでみます。

function setup() {
  createCanvas(1600, 900);
  randomSeed(20261012); noiseSeed(20261012);
  background(11, 6, 32);
  noFill();
  const palette = [color(255, 79, 216, 90), color(0, 229, 255, 80), color(155, 107, 255, 80), color(255, 214, 102, 60)];
  for (let k = 0; k < 2600; k++) {
    let x = random(width), y = random(height);
    stroke(random(palette)); strokeWeight(random(0.6, 1.8));
    beginShape();
    for (let i = 0; i < 90; i++) {
      vertex(x, y);
      const a = noise(x * 0.0018, y * 0.0018) * TWO_PI * 2.2;
      x += cos(a) * 4; y += sin(a) * 4;
      if (x < 0 || x > width || y < 0 || y > height) break;
    }
    endShape();
  }
  noLoop();
}

画面のあちこちに 2600 本の線の始点をばらまき、それぞれの線を 4 ピクセルずつ 90 歩、伸ばしていきます。どちらへ伸ばすかを決めているのが noise() です。noise() は、近い場所どうしでは似た値を、離れた場所では違う値を返します。そのため、隣り合う線は似た向きに流れ、画面全体に川の流れのような模様が生まれます。このような描き方は「フローフィールド」と呼ばれ、ジェネラティブアートでよく使われる技法のひとつです。

randomSeed() と noiseSeed() に渡している 20261012 は、今日の日付です。種を固定すると、何度描いても同じ絵になります。この数字を変えると、まったく別の流れが現れるはずです。

こうした読み方を、これからは世界の誰かが書いたコードで続けていきます。最初の一作として、マイクの音を幾何学模様に変える「Sonidoverde」のコード解説を公開しました。よければ、そちらから読んでみてください。