約一ヶ月、ほぼ毎日p5.jsの記事を書き続けた感想

毎年大盛況のQiitaアドベントカレンダーですが、今年は自分でカレンダーを立ち上げました。

その名もp5.js Advent Calendar 2021。この記事はその25日目、最終日の記事です。

約一ヶ月間、毎日p5.jsを触ってみた感想。他の言語とざっくり比べてどうだったかを書きました。

p5.jsを一ヶ月さわってみて

これまでいろいろと挫折してきました

私はこれまでクリエイティブコーディングをとにかく触りだけやってきました。 Quartz Composer、Processing、TouchDesigner・・・。 全て中途半端で投げ出してしまいました。
Processingはコードがほぼ読めない時代に触り、ほぼ何も分からない状態で終了。 TouchDesignerも本腰を入れてやろうと思ったのですが、なんたるかを掴むことができず挫折。

しかし元々表現を形にすることは好きで、なにしよっかなーと考えた結果手を出したのがThree.js。

しかしまさかの環境構築で燃え尽きてしまいました。（笑）
TouchDesignerもそうですが、どんなものでも描画するときには必ずScene、Mesh、Cameraなど必要なものが多いのです。 甘ちゃんですがお手軽さはそこになく、だったらTouchDesignerでよかったのでは...とだんだん気持ちが離れてしまいました。

p5.jsに出会う

それでもThree.jsを諦めず、本屋さんで参考書を探すことに。

そこで見つけたのがGenerative Design with p5.jsという本でした。 冒頭数ページのアートに心を奪われてしまい、即購入。p5.jsをやってみることに。

驚くほどシンプル

本業でJavaScriptを書いているので言語のお作法がある程度分かるというのもあるのですが、とにかくスラスラと頭に入ってきました。

p5はsetup関数でcanvasを作り、draw関数で描画するというとてもシンプルな構造です。 お手軽さも十分なため、いろんな関数をどんどん試して遊ぶことができました。

Processingがだんだん読めるようになる

p5.jsはProcessingをJavaScriptで書けるように移植されたもの。
そのため用意されている関数がほぼ同じです。

twitter界隈では#つぶやきProcessing というハッシュタグがあり、コードと描画されたものを添付してツイートしています。

コードをみて「この関数を使って表現してるのかー」というのがなんとなく分かります。
このコミュニティを知れたこと、Processingが少し読めるようになったことは嬉しい誤算でした。

3Dの描画も簡単

アドベントカレンダーの中でもp5.jsで3Dモデルを描いてみるという記事を書きましたが、 Three.jsに比べて描画までのスピードが圧倒的に違いました。
その分Three.jsやTouchDesignerのほうができることは多いみたいですが、とっかかりとしては間違いなくp5を推せます！

クリエイティブコーディングの入り口はp5.jsをおすすめします

これが一ヶ月さわってきた結論です。 もちろんjava経験者の方はProcessingが良いと思います。

この期間で

  • クリエイティブコーディングってこういうものなんだ。
  • 数学がこういうところで使われるんだ。
  • こういう仕組みで描画されているものが動いて見えるんだ。

という基礎的なことを体系的に学ぶことができました。

ただ入り口だからと言って決して出来ることが少ないわけではありません。 あくまでクリエイティブコーディングの入りとして最適だと思った、ということを言いたく、 そこからの可能性は無限大です！！

次の章はアドベントカレンダーの感想になるので、あまりp5は関係ありません。 興味がある方は読んでみてください。

おもむろに始まったほぼ一人アドベントカレンダー

今年の11月下旬、Qiitaアドベントカレンダーの熱気が徐々に増す中、「カレンダーになんか投稿してみよっかな」という軽い気持ちで「p5.js アドベントカレンダー」を探しました。

そしたらそのカレンダーがないではありませんか！

これはチャンスだと思い、p5.js Advent Calendar 2021を作成しました。
作った時は
「え、俺がライブラリ名を冠したカレンダー作っていいの？」
「恐れ多いわー！」
など、ドキドキワクワクでした。

しかし一向に参加者が現れません。 twitterでも呼びかけましたが増えません。
違う意味でドキドキワクワクとなってしまいました。

毎日１記事を書く辛さ

きつかったです。まず記事のストックが一切ない。ネタもない。日々記事を書く人間でもない。
p5.js初心者で、レベルが高い知見についても書けないのが正直なところでした。

ということで初学者が学んでいく様を記事にしていくしかなく、 結果的にほとんどの記事が「関数まとめ」というタイトルになりました。

f:id:shibuya01055:20211225025357p:plain
ほぼ「関数まとめ」なアドベントカレンダーに

また記事を書く中で技術の壁にぶつかった時は焦りを感じました。
例えばp5.jsの関数まとめ part.10 sin()では数学のsin, cos（サイン、コサイン） を利用します。 私は数学から逃げてきた人間のため「ほんとに分からん！」状態。

しかし毎日が締め切りです。 プログラミングに一切関与しない数学に関する記事やYouTubeで勉強し、夜中3時くらいまで粘って記事を書いていました。 その記憶を残すためにクリエイティブコーディングのためにsin, cosを学ぶという記事を書いたのも良い思い出です。

余談ですが、このとき「あれ？数学学ぶのが苦じゃない。むしろ面白い。」と思えたことに驚きました。 中学生の頃数学が嫌いすぎて「学ぶ必要あるんか」と泣いたこともあるくらいの私が。 奇跡的な気づきをありがとうp5（Processing）。

参加者現る！

大体10日目くらいになった頃、なんと参加者が！ おこがましいですが初めて友達ができた、そんな感覚でした。

参加してくださったのはyoutoyさんとdeconbatchさん。 クリエイティブコーディングの分野ではすでに活躍されている方々で、 deconbatchさんのブログ、deconbatch's Land of 1000 Creative Codings.は私も読んだことがありました。

このお二人に参加していただけて本当に光栄で嬉しかったです。
ありがとうございました！

投稿していただいた記事はこちら↓

youtoyさん
【p5.js 2021】Magenta.js の MusicVAE を使った音作りを試す（p5.js Web Editor上で扱う）
【p5.js 2021（2つ目）】 Leap Motion（leap.js）を p5.js Web Editor上（JavaScript）で扱う

deconbatchさん
p5.js の createGraphics() がメモリを放してくれない！

Twitterのタイムラインが変わってきた

カレンダーの記事が公開されると必ずTwitterで「○日目の記事です！」と投稿していたのですが、そのうちProcessingを触っているであろう方からいいねしていただき、フォローし、、、 を繰り返していたらいつのまにかタイムラインが#つぶやきProcessingみたいになっていました（笑）

好きが高じていくとSNSの環境も変わっていくんだなぁとしみじみ。
記事に追われる毎日だったので私も#つぶやきProcessingしたい...

確実にレベルアップしている実感

アドベントカレンダーも後半に差し掛かった頃でしょうか。 リファレンスのコードを読むのも一苦労だったのが、「読める、読めるぞ！」みたいになっていました。

仕事では初見でも大体の動きを追えるのですが、p5(Processing)が持つ関数は別世界の動きをします。
map()ときたら配列操作と思うじゃないですか。全然違うんですね・・。
そのため関数の動きを一個一個調べないと、リファレンスすら読めない状態でした。

ですがここで関数まとめをしていたことが役に立ちました。
記事を書くにつれていつのまにか基礎のようなものが出来上がっていたのです。
よく勉強はアウトプットが大事！ と言いますが、これほど実感した体験はありませんでした。

まとめ

アドベントカレンダーをほぼ一人でというのはなかなか厳しいものがあります。

しかし25日前の私と今の私でp5の知識量は大きく変わりました。
クリエイティブコーディング初学者の一番重くて辛いところをこの25日間で超えられたのではと感じています。
2回目ですがアウトプットは本当に大事！
あとはまだ知らない関数を掘って、自分が表現したいことを楽しく描画するのみです！

またp5を勉強し始めた頃、NFTが大変盛り上がっていることを知りました。
クリエイターの未来が明るくなるいいニュースですね👏
自分も成長したらいつか参入してみたいなと考えています。

最後に

Processing Advent Calendarというものがありまして、こちらは毎年盛り上がりを見せているようです！
いいなぁ、来年はここにも投稿できるように頑張ろう。 adventar.org