IT系女子ログ

Webデザイナーのエッセイ。デザイン、コーディングで気になることをあれこれ考える。

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

ジェネレーティブアートで作った“Generative Art with p5.js for Designer”というテキスト

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

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

f:id:tosssaurus:20181216222649p:plain

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

どれも素敵ですよね。

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

 

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

 

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

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

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

 

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

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

 

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

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


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

 

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

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

 

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

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

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

  • 作者: Benedikt Gross,Hartmut Bohnacker,Julia Laub,深津貴之,国分宏樹,Claudius Lazzeroni,Benedikt Gross(編著),Hartmut Bohnacker(編著),Julia Laub(編著),Claudius Lazzeroni(編著),美山千香士,杉本達應
  • 出版社/メーカー: ビー・エヌ・エヌ新社
  • 発売日: 2018/06/22
  • メディア: 単行本
 

 

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

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

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

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

 

 

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

p5.js | 入門(最近日本語訳対応されました!)

p5.js | get started(本家の方です)