本稿は Generative Art の簡単な入門記事です。今回は周辺知識の説明を、 次回はサンプルコードの紹介 を行います。コードだけ読みたいという方は今回をスキップしても問題ありません。
「 Generative Art （ジェネラティブ・アート）」とはプログラムによって自動的に生成された芸術作品です。
「芸術」というと堅苦しい印象を受けますが、ノートの落書きでもノートルダム大聖堂にあるルーベンスの祭壇画でも本人次第で芸術足り得るので問題ありません。
本稿は Generative Art の概要とサンプルコードの紹介を通し、プログラミングでアートを創造する面白さを伝えることを目的としています。
今回は概要を、次回は落書きレベルの Generative Art （↑にある画像です）を、最も身近なプログラミング言語のひとつである JavaScript でもって生成する手順を説明します。そうです、ブラウザで生成します。しかもライブラリなしの VanillaJS です。とても簡単です。恐らく数ある Generative Art 入門記事の中で最も簡単な記事になるでしょう。そういうわけで、肩の力を抜いてお読みください。
なお、 私 は Generative Art を趣味で作っている だけのフロントエンドエンジニアです。特に言うことはありません(ー_ー;)
シソーラス
-
( Generative | Procedural ) ( Art | Design | Image )
これらは（ Procedural Design を除き）すべて同じ意味を指すようです。個人的にはGenerative Imageを使いたいのですが、Generative Artの方が広く使われているため、こちらを推し進めたいと思います。 -
( Creative | Visual ) Coding
これらはプログラミング視点の言葉ですので、本稿では使いません。アートを作りたいのであって、コードを組みたいわけではないのです。
いろいろな Generative Art
まずはどんな作品があるのか、私が勝手に考えた Generative Art の構成要素ごとに（ Google 画像検索で）見てみましょう。
ちなみにこれはセル・オートマトンで作りました。
表現手法
ピクセルを直接操作する ラスターグラフィックス 、ベジェ曲線などのパスを引いて描画する ベクターグラフィックス 、そして 3DCG 。あるいはこれらのミクストメディアまで含めると、表現手法は無限に膨らみます。制作する際はどのようなタッチで描くのか、先に表現手法を定めておくと進めやすくなるでしょう。
なお、次回で紹介するサンプルは最も扱いやすいであろうベクターグラフィックスです。
アルゴリズム
簡単に複雑な図形を生成できる数学アルゴリズムは極めて強力な武器になります。 フラクタル や セル・オートマトン などのキーワードが参考になるでしょう。
ただ、アルゴリズム一辺倒の画像は飽きやすく、かつあまりにも頻繁に使われるため、「 Generative Art = 数式を視覚化した画像」と勘違いされる向きがあります。
アニメーション
リアルタイムに状態が変化する Generative Art は VJ のパフォーマンスの一環 として広く取り入れられているようです。
JavaScript であれば requestAnimationFrame 内で逐一 Canvas API を呼び出す流れで、静止画よりも表現の幅が格段に広がります。ウェブページの背景にアニメーションを表示する Particleground というライブラリが端的な応用例でしょう。
音声
画像と同じように、音声もプログラムによって自動生成できます。アニメーションと合わせることで映像作品も作れそうですが、私は音楽に関しては無知同然なので触れない方向でよろしくお願いします…。
インタラクション
Generative Art は静止画や動画のような「一方向」のものだけではなく、鑑賞者からのアクションをきっかけに状態を変化させる「双方向」のものも存在します。 JavaScript の描画ライブラリである p5.js のサイトでも使われていますね。インタラクティブ性は Generative Art の一番の強みです。
機械学習
最近は AI などに使われる 深層学習（ディープ・ラーニング）を利用した作品 を良く見かけます。
ただ、機械学習の性質上、いわゆる教師データとなる作品が他者の作品だったり、版権の不明瞭な写真だったりするため、作品そのものにアイデンティティを置くことができないジレンマもあるようです。
その他
「自動生成」が Generative Art の定義であるならば、例えば…
- 自動操縦のドローンに花火を括り付け、飛び回る際に描かれる光の軌跡を作品としたり
- 風鈴に筆をぶら下げて描かれたものを「夏の音」などと称して作品としたり
…することも Generative Art のひとつと言えるかもしれません。
必要スキル
何らかのプログラミング言語スキル
当然ながら Generative Art に言語の縛りはありません。 C 言語で直接ビットマップを生成しても良いし、 PHP の GD 関数でお手軽に画像編集しても良いし、 Java や Swift が使えるならアプリ上にインタラクティブな Generative Art を展示できるでしょう。
しかし、ここは処理速度が物を言う分野です、 C 言語がベストであることは間違いありません。なお C 界隈では openFrameworks や Cinder という Creative Coding 向けのフレームワークが有名なようです。
将来、処理速度がネックになって制作が思うように進まない状況に陥るかもしれませんが、これは大変危険です。頭の中に芽生えたアイディアが形にならない内に揮発してしまうからです。描きたいものにもよりますが、 JavaScript で「アタリ」を取ってから C で描く、というプロセスをお勧めします。
デザインスキル
センスです。「良いものを作るセンス」を身につけるのは容易なことではありませんが、「良いものを見分けるセンス」であれば Pinterest でも眺めていれば身につくでしょう。ボブネミミッミが好きな人は脈があると思います。
数学スキル
sin / cos あたりがわかれば十分です。センスとアイディアさえあればどうにかなります。私自身、算数 0 点・数学 5 点（名前が合っていた）の文系人間ですが、それっぽいものは作れています。
もっとも、方程式を組み立てるスキルよりも、図像の構造を言葉で説明するスキルが必要になると思いますが、作っている内に自然と身につくでしょう。
数式に明るくなくても、こういうものが作れます。
次回のサンプルコードについて
なぜ JavaScript なのか？
Generative Art と言えば Processing というクロスプラットフォーム IDE を使うのが一般的ですが、本稿では下記の理由から JavaScript と HTML Canvas でサンプルを制作します。
- JavaScript で作られた作品はそのままウェブページ上で動作させることができるから
- JavaScript のコード資産を使い回したいから（私が楽だから）
1 が主な理由です。
また、 JavaScript での Generative Art 制作では p5.js や processing.js というライブラリを使うのが一般的ですが（どちらも Processing の JS 版です）、サンプルは非常にシンプルな作りなので、本稿では扱いません。
サンプル制作のための推奨環境
そこそこの PC
リアルタイムに大量のポリゴンを描画する 3DCG アニメーションを制作するわけではないので、高性能な GPU は不要です。ちなみに私のマシンはオンボードの MacBook です。
ブラウザで Generative Art を高速に生成する手段としては、 Canvas API を使わずに WebGL を使ったり、 WebGL のシェーダー言語を通して GPU に演算処理をさせたり（ GPGPU ）、あるいは WebAssembly で低水準言語に演算処理をさせたり…などありますが、これらに労力を割くほどの処理能力が必要になったら、ブラウザをやめて C 言語で組んだ方が良いでしょう。
Google Chrome or Mozilla Firefox
どちらでも構いません。体感ですが、 Chrome は Firefox より Canvas API の実行速度が速く、 Firefox は Chrome より演算速度が速いようです（あくまで体感です）。私はセル・オートマトンのような演算中心の手法であれば Firefox を、 Canvas API 中心の手法であれば Chrome を使うようにしています。
テキストエディタ
本当に何でも構いません。私は Atom を使っています。
つまり PC さえあれば OK です。
長くなりましたが、結局のところ、何も知らなくても作れてしまうので問題ありません。
それでは、 次回のサンプルコード紹介 に続きます。