ドット絵 x p5.js
師走に入りましたね。
早速ですがこちらのイラストをご覧ください。
※イラスト上でマウスを動かすと変化があります。スマホ等の場合はタッチで。
※何も映らない場合は「Rerun」してください。
See the Pen Untitled by Meno (@me-no) on CodePen.
これなに
↑はドット絵をJavaScript ライブラリの p5.js によって動かしたものになります。
筆者は日ごろドット絵を描いたりなどしているものです。
生活のためにSEの仕事もしており、昨年からドット絵にコーディングを取り入れたイラストづくりを始めました。
Processing によるジェネラティブアートに惹かれたのが始まりだったこともあり、専らp5.js を使って作品を描いています。
今回はこちらのアドベントカレンダーの、12月1日分の記事を書きます。
作品づくりのこだわり
ドット絵らしくあること
p5.js で図形を描くと、通常は滑らかな曲線になります。
ドット絵は1ピクセルが目視で分かるぐらいに強調された、解像度の低い "ピクセルアート" なので、図形が描画される位置に制限を加えて、滑らかでないドット絵の曲線になるよう処理を加えています。
アクションが無くても画として成立すること
インタラクティブアニメーションをつくるにあたって、ユーザの操作によって初めて描画される要素も用意はしますが、それが無かった場合でも1枚の画が徐々に出来上がっていく過程を楽しんでもらえるようなアニメーションを心掛けています。
●ユーザからのアクションが無い場合
↓
↓
●アクションがあった場合
作品づくりの変遷
学生時代に数学を専門にしていたこともあり、イラストにもサインカーブなんかを取り入れることが度々ありました。
ただ毎回サインカーブでも芸がないと思っていた矢先、出合ったのがジェネラティブアートのジャンルでした。
※ちなみに最後の数枚は明らかにダミアン・ハーストから色を抽出しています。
勉強し始めた当初はもっと、複雑かつ綺麗な曲線をドット絵に取り入れんとする意気込みだったのですが、気づけば結局サインカーブを多用する日々です。
↑サインカーブに沿ってイラストを並べただけ
つまり 技術的には大したことやっていない のですが、それでも単純なプログラムの組み合わせで思いがけず綺麗な画になったりするのはp5.js の面白いところだと感じます。
↑ローズカーブが描きたかった絵。背景はサインカーブとランダムな四角形を描画しているだけです。
ちなみにp5.js を始めてから、普段の業務におけるJavaScript の読解力がちょっとだけ上がりました。（いい話）
"ユニーク"なデジタルアートをつくること
私にとってのクリエイティブコーディングの面白いところは何より、ゲームのようなスケールではないけれど、 鑑賞する側の動きに依存して変化する、ある種の動的なイラストをつくれるところ にあります。
デジタルイラストはいくらでも複製できますが、ランダム関数で毎回違った模様を形成したり、鑑賞者自身にイラストに変化を加えてもらうことで、NFTのようなコンセプトとは違った形でデジタル作品に一意性を見出してもらえるんじゃないかと思っています。
補足など
p5.js 勉強会
ドット絵とp5.js に関しては6月に「p5.js勉強会」にて軽くお話しているので良ければご覧ください。
出展
12月3日（日）に COMITIA146＠東京ビッグサイト で合同画集を出します。タブレットを持参してp5.js 作品の展示も検討しているので、こちらも良ければお立ち寄りください。
画集の一作品を先取りして公開。WASDでちょっとだけ動きます。（絵を一度クリックしてアクティブにしてからお試しください。）
See the Pen astro by Meno (@me-no) on CodePen.
お読みくださりありがとうございました。
関連記事