Processing Advent Calendar 12/11

最初に

　こんにちは。独楽回しeddyです。
　Processing Advent Calendarの11日目を担当させていただきます。今回は一応は技術的な内容を用意いたしましたが、その資料の作り方が自身がこれまでやったことがない形を取ったのでその補足、後は少しでも検索しやすくするためにnoteの記事としても用意することにしました。

Processing Advent Calendar 2021 : https://adventar.org/calendars/6163

記事

URL : https://spinnereddy.github.io/pac_2021_slide/#/

テーマについて

　これまで過去何度か参加させていただいていて全てProcessing関係だったのですが、今回は初めてp5.jsについての記事を書きました。ここ最近はコードを書く上でp5.jsの利用率がこれまでより上がっていたのでそうなりました。内容としましては下記になります。

主テーマ : p5.js上で描画して得られた画像をメッシュに貼り付けて旗みたいなものを作る。
1. createGraphicsを使って元の画像を作ってみる。
2. 画像を貼り付けるためのメッシュを作る。
3. メッシュに画像を貼り付ける。
4. メッシュに揺れの動きを付ける。
5. シェーダーを使って揺れの動きを付ける。

　p5.jsとシェーダーの扱いについての詳しい解説が検索してもあまりヒットしなかったことからあると良いのではないかと思ったこと、何気に画像を貼り付ける部分が思ったより苦戦したのでその備忘録としてまとめておきたかったことがテーマ選定の理由です。

今回の記事作成に当たって

　これまでQiitaで記事を作成していたのですが、ちょっと今回は違う方法でやってみたいなと思い下記の方法を取りました。
方法 : reveal.js を使ったスライド & github pages にそのスライドを置くようにして展開

　今回はスライドという形でまとめることに挑戦したかったこと、reveal.jsを使ってみたかったこと、openprocessingで書いて投稿したものを図として使う説明をやってみたかったことなどからこの方法としました。

最後に

　少しでも記事がお役に立てれると幸いです。読んでくださった皆様、ありがとうございました！

参考文献

座標変換の行列について : http://www.sousakuba.com/Programming/d3d_camera.html