cover image

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

カテゴリ
Other
書いた人
Kyohei Shibuya
公開日
2021/12/30
💡
概要
毎年大盛況のQiitaアドベントカレンダーですが、今年は自分でカレンダーを立ち上げました。
その名もp5.js Advent Calendar 2021。この記事はその25日目、最終日の記事です。
約一ヶ月間、毎日p5.jsを触ってみた感想。他の言語とざっくり比べてどうだったかを書きました。
 
🚀
記事はこちら!
約一ヶ月、ほぼ毎日p5.jsの記事を書き続けた感想 - でぶわか
毎年大盛況のQiita アドベントカレンダー ですが、今年は自分でカレンダーを立ち上げました。 その名もp5.js Advent Calendar 2021 。この記事はその25日目、最終日の記事です。 約一ヶ月間、毎日p5.jsを触ってみた感想。他の言語とざっくり比べてどうだったかを書きました。 私はこれまでクリエイティブコーディングをとにかく触りだけやってきました。 Quartz Composer、 Processing、 TouchDesigner・・・。 全て中途半端で投げ出してしまいました。 Processingはコードがほぼ読めない時代に触り、ほぼ何も分からない状態で終了。 TouchDesignerも本腰を入れてやろうと思ったのですが、なんたるかを掴むことができず挫折。 しかし元々表現を形にすることは好きで、なにしよっかなーと考えた結果手を出したのが Three.js 。 しかしまさかの環境構築で燃え尽きてしまいました。(笑) TouchDesignerもそうですが、どんなものでも描画するときには必ず Scene、 Mesh、 Cameraなど必要なものが多いのです。 甘ちゃんですが お手軽さ はそこになく、だったらTouchDesignerでよかったのでは...とだんだん気持ちが離れてしまいました。 それでもThree.jsを諦めず、本屋さんで参考書を探すことに。 そこで見つけたのが Generative Design with p5.js という本でした。 冒頭数ページのアートに心を奪われてしまい、即購入。p5.jsをやってみることに。 本業で JavaScript を書いているので言語のお作法がある程度分かるというのもあるのですが、とにかくスラスラと頭に入ってきました。 p5はsetup関数で canvas を作り、draw関数で描画するというとてもシンプルな構造です。 お手軽さも十分なため、いろんな関数をどんどん試して遊ぶことができました。 p5.jsはProcessingを JavaScriptで書けるように移植されたもの。 そのため用意されている関数がほぼ同じです。 twitter界隈では#つぶやきProcessing という ハッシュタグ があり、コードと描画されたものを添付してツイートしています。 #つぶやきProcessing t=0,draw=n=>{for(t||createCanvas(W=500,W, WEBGL,S=stroke),background(0),rotateY(.1*t),translate(0,-100),i=0;i<W;i+=2)S(0,q=100*sin(i/33+t)+150,0),x=i/2*cos(z=i/15),z=i/2*sin(z),line(0,i,0,x,i/.6,z),S(q),point(x,i/.9,z),line(0,-44,0,x/6,33*sin(i)-44,z/6);t-=.05} pic.twitter.com/aJhgeJHRUj - Koma Tebe (@KomaTebe) 2021年12月24日 コードをみて「この関数を使って表現してるのかー」というのがなんとなく分かります。 このコミュニティを知れたこと、Processingが少し読めるようになったことは嬉しい誤算でした。 アドベントカレンダーの中でも p5.jsで3Dモデルを描いてみるという記事を書きましたが、 Three.jsに比べて描画までのスピードが圧倒的に違いました。 その分Three.jsやTouchDesignerのほうができることは多いみたいですが、とっかかりとしては間違いなくp5を推せます! これが一ヶ月さわってきた結論です。 もちろん java 経験者の方はProcessingが良いと思います。 この期間で クリエイティブコーディングってこういうものなんだ。 数学がこういうところで使われるんだ。 こういう仕組みで描画されているものが動いて見えるんだ。 という基礎的なことを体系的に学ぶことができました。 ただ入り口だからと言って決して出来ることが少ないわけではありません。 あくまでクリエイティブコーディングの入りとして最適だと思った、ということを言いたく、 そこからの可能性は無限大です!! 次の章は アドベントカレンダー の感想になるので、あまりp5は関係ありません。 興味がある方は読んでみてください。 今年の11月下旬、Qiita アドベントカレンダーの熱気が徐々に増す中、「カレンダーになんか投稿してみよっかな」という軽い気持ちで「p5.js アドベントカレンダー ...