ジェネレーティブアートに挑戦するならp5.jsがはじめやすい

こちらは、Processing Advent Calendar 2018 - Qiitaの17日目の記事です。

ジェネレーティブアート（generative art）とは、プログラムによって生成された表現のことです。ジェネレーティブデザインと呼ばれたりもします。

Pinterestで“generative art”で検索した例

どれも素敵ですよね。

まるで生きているかのように動くジェネレーティブ作品を見かけては、「カッコいいなぁ、天才やなぁ」と、指を加えて見惚れていただけだったのですが、p5.jsに出会ったのをきっかけに自分でも挑戦しはじめました。

作例のコードを模写したり、少しアレンジしたりしながら、先日50個目のアップができたところです。

Day 050 #100DaysOfCode

一番はじめの円が特別大きい場合、外側から内側に向かうような構造になる。
キーを押すと新しい円ができた時の位置と一番近い円との直線距離が可視化される。#p5js #generativedesign pic.twitter.com/fgGRY2wZf9

— tossy🦕 (@tosssaurus) 2018年11月25日

ジェネレーティブアートは、まるで偶然を設計するような、まるで相反する概念を同時に味わっているかのような面白さが感じられて、とても楽しいんです。

絵の具や粘土を自分の手で形作っていくのと比べ、一度プログラムに置き換えて出力する。記述したプログラムの範囲でしか動かないにも関わらず、自分の想像もできなかった表現に出会って、それが美しかったときは本当に興奮します。

さらに、動きがあるところがとっても魅力的。
プログラムの力で、表現の組み合わせが無限になります。

こちらは、ちょこちょこ触っていたときに発見したシャボン玉みたいにみえて美しいなぁと思った表現です。

Day 009 #100DaysOfCode

ドットインストール1周達成。
ランダムの数値が円の色、大きさ、位置を決めてひたすら描画する。
描画モードを加算にしたら万華鏡とかシャボン玉みたいになっていって幻想的。#p5js #generativedesign pic.twitter.com/Bh7l8cMwFe

— tossy🦕 (@tosssaurus) 2018年10月1日

描画モードを少し変えただけで表情が変わって、おもしろいですよね。

予測できない動きをしてる作品を見ていると、途方もない知識と技術がないといけないんじゃないの…と思ってしまいますが、そうでもない。

私はp5.jsに出会ってとても簡単にはじめることができました。 

p5.jsはその名の通りJavaScriptのライブラリなので、コーディングの知識がある方は見たことのある書き方でわかりやすく、すぐに楽しめると思います。複雑でランダムな動きはすべてプログラムがやってくれます。

私は、まずはp5.jsでどのように書けばどんな表現ができるのか学ぶために、p5.jsを使って100個コードを写経することを目標に進めています。 

100個達成まであと半分、理解するまでに300個くらい書いたほうがいいなと思いはじめていますが、頑張ります。

こちらの本の作例を写経しています。

Generative Design with p5.js - [p5.js版ジェネラティブデザイン] ―ウェブでのクリエイティブ・コーディング

JavaScriptの基本はドットインストールやProgateで学べます。
特にドットインストールはp5.jsのレッスンもあって、日本語で学べる貴重な存在でありがたいです。

p5.js入門 (全14回) - プログラミングならドットインストール

JavaScript基礎文法徹底マスター【旧JavaScript入門】 (全24回) - プログラミングならドットインストール

JavaScript | プログラミングの入門なら基礎から学べるProgate[プロゲート]

p5.jsのリファレンスはこちら。

p5.js | 入門（最近日本語訳対応されました！）

p5.js | get started（本家の方です）