p5.js 布教活動の振り返りと学び
こんにちは．p5.js を用いたジェネラティブアート・クリエイティブコーディングにドハマりしている Keeth こと桑原です．アート活動では くらふなアート というアカウント名で活動しています🎨
本記事は Processing Advent Calendar 2023 の第12日目の記事になります❗
余談
タイトルにもある p5.js という JavaScript 製のライブラリですが，JavaScript が多少書ければクリエイティブコーディングがすぐに開始できる優れものです❗とても楽しいのでぜひ一度触れてみてくださいー❗
各種勉強会で p5.js をテーマに登壇してきた
昨年もエンジニア勉強会で２回ほど p5.js を用いた登壇をさせていただいたのですが，今年も以下の２つの勉強会でお話しする機会をいただきました．
私の大好きな勉強会の１つであり，オフライン開催がコンセプトの１つでもある「We Are JavaScripters!」ですが，コロナ禍によりしばらく開催されておりませんでした．
運営の方にぼちぼち開催してほしいなという想いを伝えたところ，他にもそのような声が挙がっていたようで，ついに今年再開することが決まりとても嬉しく思います😆
私の裏の顔（？）は Riot.js の人だと自負しているのですが，今回は p5.js で登壇してきたのですが，「riot の話じゃない！？」と言われてちょっと笑いましたw
また JSConf JP ですが，こちらは僕が憧れていたカンファレンスでして，今回始めて勇気出して CfP 出したところ採択いただき登壇することができました🎉ありがとうございました❗
それでは，以下スライドを添付しつつ，それぞれの登壇を振り返ってみたいと思います．
We Are JavaScripters! @42nd【初心者歓迎・LT会】
色んなところで発信していますが，ジェネラティブアート・クリエイティブコーディングを通して僕は改めて，プログラミングはそれ自体が楽しいこと だと自覚できたのが最大の収穫です．
例えば何かしらのシェイプのアニメーションを作りたいと思ったとしましょう．世の中にはアニメーション用のライブラリはたくさんあります（例：anime.js や ss など）．または Adobe のツールを使えば難しいコードを書かなくても視覚的に簡単に表現できることもあるでしょう．
それをあえてプログラミングで，コードを書いて表現する．これが楽しい．人は行動や選択に制約がかかるとクリエイティブになります．絵を描きたいなら絵筆や鉛筆，クレヨンと手✋を使えば描けますが，あえて不便な機械とプログラミングを用いて描くデジタルアートが，自分の中のクリエイティブを引き出してくれます．これはある意味快感で，この１年間飽きもせず稚拙だとしても絵を描いてきました．
その一旦を伝えたくお話したのがこのスライドになります．
JSConf JP 2023
こちらはタイトルにもありますように，数学（というか数式）の美しさを p5.js を用いて視覚的に体験してみよう，というコンセプトでお話をしてみました💁
そもそもこのカンファレンスはおそらく JavaScript に関する勉強会で国内最大のものだと私は感じているもので，ここで登壇させていただけることが光栄なことでした．
しかし，当日の私のトークの参加者はわずか5,6名でしたw
まぁ Next.js や バンドルツールの未来，アーキテクチャ，TypeScript, Intl などの方が関心が強いのは当然ですし，僕のトークがかなり亜種でしたのでそりゃそうよねと😂（※1）おかげさまでほぼ緊張なくお話できましたw
また，数学・数式の美しさの一端を語る上で何を採用しようか？はものすごく悩みましたが，結果以下を採用しました💁
三角関数（というか，円関数．つまり sin, cos）
フィボナッチ数列（黄金比）
ユークリッドの互除法（の可視化）
正葉曲線（バラ曲線）
ベタなものを選びましたが，やはり伝わりやすいもの，パッと見て美しいなと思えるものが描画されるものを優先した結果になります．これら以外にも美しさが伝わりやすいものあれば是非コメント等で教えていただけると嬉しいです❗
学び
意外と p5.js や Processing についてご存じの方もチラホラいて，歴史や実績のあるライブラリなんだなと改めて感じると共に，このような素晴らしいライブラリを作ってくださった先人の方々に感謝しかないです🙏
また，これらの資料を作る中で数式は世界の美を我々が追えるようにしてくれる，ある種のインタプリタという存在でもあるなと思います．例えば正円を描きたいとしましょう．コンピューター上で描くには円とはなんぞ？というものを
ある点Aを中心とし，点Aから等距離の点の集合体
このようにコンピューターに教えないといけません（※2）．数学（数式）の世界には以下のように円の方程式がありますが，
これをコンピューターに描かせるには x, y の値の式に変換する必要があります．無理やり計算しても良いのですが，数学の世界には 極座標系 という便利なものがあり，こちらを使うことが一般的（と僕は思っています）かなと．
こんなことせずとも本来の描くものを一発で描けるライブラリの関数だったり，組み込みのシェイプ機能を使う方が遥かに簡単に描くことはできますが，手続き的に円を描く事によりコントローラブルに，かつ表現力が格段に増します．不便というのは見方の１つでしかなく，視点を変えると物凄い有用性があったりするという気付きも大きかったなと．
このように，ジェネラティブアート・クリエイティブコーディングは仕事や業務に直結しないコーディングかもしれないですが，思った以上に価値のある活動なんだなと言うのが今の私の素直な気持ちです．
感想
以前自分がこの世界に飛び込んだ背景についても note 記事にしたのですが，
ここに書いた当時の気持ちは今も変わってなく，数学 × プログラミング × アート という世界があり，その楽しさや美しさ，魅力を伝えたいなと思っています．プログラミングは「単なる作業の効率化や自動」「アプリケーションやシステム構築のツール」ではなく，自由に想像力を働かせた表現をするためのものでもあるなと感じています．（※3 尊敬するマットピアッソン氏のお言葉を少し拝借）
これからも p5.js をベースとしたジェネラティブアート・クリエイティブコーディングの魅力を伝える活動はし続けていきたいと思いますし，仲間が増えたら良いなぁと思ったりもしています．
アートは思ったより身近にあるし，「自分には縁がない」と思われている方に意外とそうでもないよ👀と．アートや絵と人の歴史な思ったより長く関わりも深いと個人的には感じていますので，その点も踏まえて今後も素人ながらも発信していきたいと思いつつ，制作活動もしていきたいと思います❗
ではでは(=ﾟωﾟ)ﾉ
注釈
※1：ただ参加いただいた数少ない方々からとても面白かった，スライド見直してみます，などのお言葉もいただけたのはとても嬉しかったですね❗
※2：もちろん p5.js には便利な関数 ellipse() がありますが，この場合は点で描くことを想定しています．また距離とは？そもそも平面を前提とする？などの厳密性は割愛します
この記事が気に入ったらサポートをしてみませんか？