スケッチを100個描いた

p5.jsでスケッチを毎日描いてはXにアップしています。半年ほどで200以上のスケッチを描きました。習慣化してから3ヶ月ほど経った頃、色の扱い方が自分の中で定まっておらず、向き合うことをせずモノクロや単色のスケッチに逃げていました。

そこでグラデーションをテーマに深堀ってみれば、何かがみえてくるのではないかと思い立ち、軽い気持ちで100個描いてみることにしました。OpenProcessingにもアップしています。
https://openprocessing.org/user/253266/?o=2&view=sketches

特にルールは決めず、思いつくままに描きました。シェーダー等を書けばもっと多彩な表現ができると思いますが、まだまだ力不足でシェーダーに手はつけられず。

また、色に関するjsライブラリを使用してしまうとライブラリー探しがメインになりそうだったので、使わないことにしました。

ほぇ〜おもしろいな〜と思ったこと

毎日描いていると、全然アウトプットが向上してないな、という気持ちがひたすらに重なり、無駄に落ち込んできます。そうならないように、自分にとっての新たな気づきが1つでも発見できたらOKという自分ルールを厳守する必要があります。

ほぇ〜おもしろいな〜という直感的なアホさを全開にして取り組むことが、気付きに繋がります。今回のスケッチ100個分の気付きの中から、3つに絞って書いてみます。

バックグラウンドをあえて上書きしないでみる

これは偶然生まれた表現でした。p5.jsでアニメーション表現を実現するには、コマごとにdraw関数の中でbackgroundを更新する必要があります。backgroundの記述を忘れてしまうと、前のコマの描写が残ってしまいます。それをあえて残すと絵の具のような表現が生まれます。動かし方や図形の形によって表情が変わるので、絵の具と筆の関係のように深堀り甲斐があります。

colorModeで扱い方がガラッと変わる

Web関連の仕事をしていると、RGBやカラーコードの扱いに慣れてしまいますが、HSBやHSLのほうが直感的に操作できるという点で扱いやすいように思いました。彩度と明度に変化を加えやすくなるので、色相だけをコントロールするよりも表現の幅が広がります。

正規分布を取り入れてみる

グラデーションを日々描いていて、なんか馴染まないな...と、色の調整を繰り返して時間を浪費するということが多発しました。正しく規則的に色を変化させているのに、自然な感じにならないと思っていました。

自然な感じ...自然現象...バラツキ感...ん！正規分布...なんか大昔に大学で習ったな...

実際はもっと遠回りしましたが、昔の知識とアイデアがつながったときは、楽しいですね。
調べてみるとやはりすでにトライしている方がいました。

カラースタディ：グラデーション「日の出、印象」
https://jp.deconbatch.com/2022/12/color-study-gradient.html

参考にさせていただき、実装してみると...

背景に溶け込むような表現になったのでは...！

また、正規分布といえば、p5.jsにはrandomGaussianという関数も用意されています。正規分布に従ってランダム性を持たせることもできます。
https://p5js.org/reference/#/p5/randomGaussian

100個書いたくらいじゃ色の理解なんて程遠かった

結論としては、p5.jsでの表現方法の幅は広がったけど、100個書いたくらいじゃ色の理解なんて程遠いとわかりました。そりゃそうだ。

また、ランダムに0からアイデアを考えていると無理がきます。今回のように無限にあるパラメーターをある程度限定して作成する方法は、気づきを得るための仕組みとして優秀だなと思いました。