こちらの本を読んで、ド文系の私がジェネラティブアートに目覚めてしまったというのが前回のエントリ。
■ [普及版]ジェネラティブ・アート―Processingによる実践ガイド
気分がノっているので（笑）、しばらくこの本とp5.jsの話を続けます。
この本で紹介されている作品作りの考え方そのものは、特定の環境や言語に依存するものではありません。しかし、基本的にはサブタイトルにある「Processing」で作ることを前提に、解説やサンプルコードが書かれています。「Processing」を使うのであれば、書いてあるコードをそのまま打ち込めばちゃんと動きます。
Processingは、2000年代のはじめごろからOSSとして開発が続けられている由緒正しいツールであります。アーティストによるメディアアート作品にも、Processingが使われていることが結構あります。大規模な作品になると、最近は「openFrameworks」なども人気があるようですが、Processingは歴史が長い分、解説本も多様でユーザーも多く、特にプログラミングビギナーにとって、相変わらずとっつきやすく、勉強しやすい環境であることに変わりありません。私自身も最初のバージョンあたりを、ちょっといじっていたことがありました（現在はバージョン3）。
…ただ、「今から」改めてProcessingを使うか？ というところでちょっと考えてしまうところがありまして。
Processingの実行にあたってはローカルにJavaランタイムが必要です。最近の雰囲気として、何らかの特別なランタイムをクライアント側に必要とするフレームワークよりも、HTML5とJavascriptで、モダンなブラウザならどれでも動くようなもののほうがよくね？ みたいな感じもあり、Javascriptベースで似たようなことができそうなフレームワークを探してみようと思い立つに至ります。
既存のスケッチをcanvas化できる「Processing.js」
で、ちょっと調べてみたら、最近「Processing.js」というプロジェクトがあるのだそうで。これ、Processing用のソースコードを、canvas内で実行できる形に翻訳してくれるJSフレームワークです。
メリットとしては
・Processingで書いたコードを、直さずにそのままブラウザで動かせる。
・導入が簡単（canvasタグでProcessingで作ったコードのファイルを指定するだけ）
といった感じで、「これまでProcessingでスケッチを作ってきた人が、それをWebに公開する」といった場合には恐らく最有力の選択肢になるのではないかと思います。ただ、私としては、開発環境や言語として、従来のProcessingを使うことが前提になりそうなところが微妙にひっかかり、「できれば、よりJavascriptっぽいヤツを…」と、次の候補を探すことにしました。
Flashオルタナティブとして使うなら「CreateJS」
次に思いついたのが「CreateJS」でした。このブログでも以前、CreateJSを使ったプログラムをいくつか試していました。
・Flash ProからHTML5 Canvasへの書き出しを試す
・CreateJSでConway’s Game of Life
・box2dwebの練習
一応、CreateJSでどんなことができるかは知っているし、アルゴリズムさえ分かればすぐに移植できるんじゃね？ …と思って、とりあえず始めてみたのですが、途中で「ちょっとめんどくさいな」と思い直すことになります。
作業している中で気付いたことですが、「Processing」と「CreateJS」だと、「絵を描く」とか「描いた絵を動かす」といった意味では同じことができるものの、その「やり方」に根本的な違いがあるんですね。
CreateJSは、もともと「Flash」が得意としていたようなタイムラインアニメーションをcanvasで実現するライブラリ群として出てきたという経緯がありました。なので、背景（ステージ）の前にキャラクターを置いて、それらを個別に動かすような作品を作る場合には、手順もラクですし、パフォーマンス面でも有利です。
一方、Processingの場合、作品を「スケッチ」と表現していることからもわかるように、どちらかというと「画用紙に絵を描く」といった感覚で画面を作っていきます。アニメーションを作るときは「パラパラマンガ」のように、画面全体を一度キレイに消して、次のフレームの絵を描くイメージになります。
例えるなら、CreateJSは「もう中学生のダンボール芸」、Processingは「鉄拳のパラパラマンガ芸」的な表現をしたいときに（クリエイター側で）使いやすい仕組みになっているようです。
Processingでは、あえて前に描いた絵を「消さない」ことで、画面上に「軌跡」を作るような表現をラクに作れます。いや、CreateJSでも、もちろんできるんですけれど、本来得意とする使い方ではないので、同じようにやろうとすると、ちょっとスマートじゃなくなるんですね。
逆に、ProcessingでCreateJSのようなアニメーションを作ることもできますが、パフォーマンス面では、かなり遅れをとってしまいます。小さいオブジェクトを一斉に出してグワーと動かすパーティクルのような表現や、スピードが重要な派手めのゲームを作りたいような場合だと、Processingベースでは厳しくなるケースもありそうです。
このへん、無理にどちらかを決め打ちして使うよりも、作りたい作品の要件に応じて使い分けたほうが良さそうだと感じました。
しっくりきたProcessingのJS実装「p5.js」
…で、最終的にたどり着いたのが「p5.js」になります。p5.jsは、ProcessingのJavascript実装版であり、現在では「Processing.org」の公式プロジェクトのひとつになっています。Githubを見たところ、一番最初のプレリリース版が出たのは2014年なので、本家に比べればまだまだ新しいプロジェクトですね。
p5.jsは、Processingとほぼ同じ機能を、同じような記法で使えますが、言語の仕様はJavaではなく、一般的なJavascriptに準じています。他のJavascriptライブラリ（物理演算とか）と混在させるのも、JavaベースのProcessingに比べるとスッキリやれそうです。
あと、型指定などが厳格なJavaと違って、とりあえず変数は全部「var」でまるっと扱えたり、関数やオブジェクトもとりあえず「function」でざっくり作れてしまったりというJavascriptが持つ良い意味での「ユルさ」が、「ラクに書く」上では大変魅力的です。ただ、この「ユルさ」は、大規模な作品を作ったり、高機能なオブジェクトを作って複雑なことをやりたくなったりした場合に、あだになる可能性も出てきます（というか、実際出てきました）。
私の場合、当初は、それほど複雑なものを作るつもりがなかった点、パフォーマンスが出ないと困るわけでもなかった点で「よし、とりあえずp5.jsでやるか」と決断するに至ります。
p5.jsの関数やその使い方については公式の「Reference」に詳しい説明があります。が、英語です。Referenceは必要に応じて読むにしても、体系的に日本語でまとめられた参考書があるといいなと思って探したところ、1冊だけありました。
とりあえず、この本と公式のリファレンスを頼りに「ジェネラティブ・アート―Processingによる実践ガイド」のサンプルをひとつづつ移植してみるところからスタートしました。
※2018/08/31追記： p5.jsに関する日本語の書籍は長らく新しいものが出ていなかったようなのですが、2018年6月に「Generative Design with p5.js」の日本語版が発売されました。
■ Generative Design with p5.js
こちらは、2016年に日本語版が発売された「Generative Design – Processingで切り拓く、デザインの新たな地平」という書籍の前半を抜粋し、p5.js向けのコードで解説しています。僕も発売されてすぐに購入したのですが、このエントリを書いた当時、Processing用からp5.js用にコードを移植しながら苦労して使い方を覚えたことを思いだし、本気で時を超えて当時の自分にこの本送ってやりたいと思いました（笑）。もし、これからp5.jsを使ってみたいなーと思っていて、ある程度情報がまとまった本を探しているというのであれば、こちらを強くお勧めします。
「p5.jsでやってみよう」と思ったワケ はコメントを受け付けていません