valid,invalid

関心を持てる事柄について

Generative Art を始めて7日間、作品を毎日公開した記録

Generative Art Creative Coding JavaScript Processing

pandora_black

ゴールデンウィーク（以下、GW）の途中で以下の記事を読んで Generative Art (ジェネレーティブアート - Wikipedia)*1 なるものを知り、試しに触ってみたら面白かった。

dev.to にも My first step in learning Generative Art という記事を書いてみたら反応がそこそこあって嬉しかったので GW が終わるまでの7日間で毎日絵を書いて投稿してみることにした。

開発環境

Processing という言語と開発環境があるのだが慣れている JavaScript で書きたかったので p5.js を利用した。

p5.js Web Editor または OpenProcessing - Algorithmic Designs Created with Processing の web 上のインタラクティブエディタを使って描いた。Auto-refresh を有効にすると見た目の確認がすぐできて便利…だがコードでミスって無限ループや OOM に出くわすとブラウザが固まってしまい、作業内容が失われるという"痛み"を何度か味わった。

感想

HTML Canvas を触ったことあるので最初の描き始めるハードルはそれほど高くなく、line で線が引ける、rect で四角形が描ける、なるほど完全に理解した〜〜〜と思ったものの作品例を見た瞬間に「は？？？」ってなった。

とはいえとにかく手を動かさないと何も身につかないと思ってとにかく描いてみたらこれが楽しかった。

業務で書くコードと異なり、 Generative Art には正解もなければ自分が良いと認めるまで終わりもない。出来上がった幾つかのパターンを見比べてどちらがより良いかでずっと悩んだりする。無限に時間が吸われていきながらコーディングの楽しみを再び思い出した気がした。

流石に毎日の投稿を続けるのは厳しいが Generative Art は今後も続けていきたい。

作ったもの

全て ohbarye - OpenProcessing で公開している。

day 1

何も考えずに reference を読みながら出てきたものをコピペしていた。書けた時は「すげー！！！楽しー！！！」という感じでテンションがアップライジングしていたのだが、今になって見返すとなんだコレ…という気持ち。

day 2

現実に存在する何らかのモチーフを再現できるようになりたい、と思って作った。あまりこだわらなかった色合いがやはり良くない。

day 3

day 2 とは対称的に抽象的なイメージを絵に落とし込みたいと考えた。テーマは「糸」なので糸車的でありながらよくわからない現実には存在しない物体を描いてみた。清涼感ある色合いが気に入っている。

day 4

day 2 と同様に現実に存在する何かをもっと綺麗に描いてみたかった。curveVertex を使った曲線がちょうど花びらのようになったのと、noStroke にしたときの儚い感じは良く出来たと思う。

day 5

これは day 1 の次に気に入らないやつ…。「知らない言語を聞いたときの気持ち」を表現するという斜め上のところに飛び込んだが、何が描きたいか途中でよくわからなくなってしまった。

day 6

この日は明確に 2D noise を使った波で絵を描こう！と決めていた。ただの波だとチュートリアルのコピペで終わってしまうので大地を伝うような波、大地の断面図であるかのような波に見えるような動きを付けてみた。

このあたりからコードが複雑になってきており、あとで読み返すのが辛くなりそうだ。

day 7

実は http://evanyou.me/ の稲妻みたいなデザインにインスパイアされ、コードもかなり参考にした。

「パンドラの箱」というモチーフが若干中二臭いが、躍動感・残像の雰囲気・ビビッドなカラーリングなどを総合的に見て、今のところ一番気に入っているかもしれない。

余談だが、パンドラの箱はもともとは水瓶だったのが箱として誤って伝わったらしいと描いている途中に調べて知った。

*1:カタカナだとジェネラティブ・ジェネレーティブ・ジェネレイティブなどで表記揺れするので英語に統一したい。Creative Coding