2024-06-01 色で遊ぶ
土曜日。7:00起床。睡眠時間はまだ曖昧なままだが、とりあえず早起きは出来ているのでまあいい。日報を書き始めたせいか、昨日までとは少し気分も変わり、インプット業務にも少しメリハリが出てきた。ただ、朝に予定したスケジュールとはまだほど遠い。
起きて、たまっていたメールを片付けて、Three.jsのモックに取り掛かる。ポストプロセッシングの仕様に慣れてきたので、単一のシェーダーをあれこれとかけてその効果を確かめる。全部で10ぐらいは作っただろうか。いつの間にか昼になり、夕方近くになり。たった1点のサンプルコードを書くだけでも5時間、6時間とかかってしまう骨の折れる作業だった。
完全にBlenderの学習をやる時間を失ってしまう。
ささっと昼食をとって、次は昨日から始めたp5.jsを今日も触った。
とりあえずp5.jsは大元にp5というクラスが存在し、そのクラスに用意された静的メンバーやp5インスタンスを通してすべての機能の実行や描画を行う。ライブラリのように機能ごとのクラスが用意されているわけではないので、なかなか取っ掛かりの部分が難しい。
とりあえず今日は色周りの使い方を学ぶサンプルを作成した。

用意されているサンプルコードを見て、写経コーディングをしながら、このメソッドはこういう意味、このイベントリスナーはどのイベントを拾っている等を学んでいくのが楽しい。上のサンプルはコンテンツ上のマウス位置からカラーチャートの分割数を確定し、そのrowとcolumn数に沿って、各セルの色の色相と彩度を計算して描画するというものだが、そもそもやった事のないアプローチでなかなか面白い。これをパーティクルでやったらまた面白いだろうなと容易に想像できる。

こちらはランダムに左右両端の色を決め、その間をp5.jsに用意されているカラーモードごとの計算メソッドを使って補間させるというサンプル。マウス位置で分割数を決めて、分割数が多ければ滑らかなグラデーションになるというもの。かなり複雑でイメージがつき辛いアプローチだが、p5.jsだと10行程度のコードで実現できる。しかも動作がメチャクチャ軽くて驚く。
こんな事をやっている間にもう寝る時間になる。ポートフォリオの制作は進まなかったが、とりあえず1日、クリエイティブな気分は維持出来た。ちゃんと納得いく1日になったのはいつぶりだろう。明日もいい1日になったらいいな。
未来のファンファーレ この手で鳴らせ
夢が私を掴んで離さない
(ももいろクローバーZ 『追憶のファンファーレ』より)



