😆

デイリーコーディングイベント「minacoding」を完走した

2023/07/04に公開

自己紹介

初めまして。からくれ178と申します。
普段は新卒のフロントエンドエンジニアとして日々働いています。
本記事ではデイリーコーディングイベント「minacoding」に参加して、どのような作品を作っていったか紹介するとともに、イベントに参加することでどのような心境変化があったかを綴ろうと思います。

minacodingってなーに?

minacodingというデイリーコーディングイベントをご存じでしょうか?
たこやきさんが考案され6/1から6/30まで実施されたクリエイティブコーディングのためのデイリーコーディングイベントです。
https://twitter.com/kim___megane/status/1661356431868825602?s=20

私は去年2日だけ参加して終わってしまったのですが、今年は完走したいと思い毎日作品を作り続けました。

6/1-6/10までの10日間

6/1:円を組み合わせた作品を作る

楽しみすぎて2つ出しましたw
https://twitter.com/Plo2Ky/status/1663929362574639104?s=20
https://twitter.com/Plo2Ky/status/1664278394954186756?s=20
ちょうど会社でLT会があったのでそこで発表するための資料としてと、資料として作った作品を改変して2つ作品を作りました。

6/2:赤をテーマに作品を作る

https://twitter.com/Plo2Ky/status/1664607553521876992?s=20
赤色がテーマだったので、赤色ならバラでしょというバイアスからバラが咲くような作品を作りました。思った以上に花びらが開かなかったのでそこが今後の課題です。

6/3:いつもと違った場所で作品を作る

https://twitter.com/Plo2Ky/status/1664963420968329217?s=20
病院の帰り道で商店街をぼーっとしながら歩いていた時に西武ライオンズのチラシが飾ってあり、そのときこの作品を思いつきました。
この作品は後にPCD Tokyo 2023で提出したポスターの種となりました。

6/4:遊び要素のある作品を作る

https://twitter.com/Plo2Ky/status/1665361883153547264?s=20
ちょうどモーフィングを知ったところだったので早速利用してみた作品です。
速度調整中思った以上にイージングが効かなくてやきもきしながら作りました。

6/5:感謝をテーマに作品を作る

https://twitter.com/Plo2Ky/status/1665729514230661120?s=20
イベント中1番頭を抱えた作品です。
テーマである感謝というものがどういった作品を作ればよいかわからず無理やり花言葉と紐づけて作りました。

6/6:食べ物をテーマに作品を作る

https://twitter.com/Plo2Ky/status/1666087463914450947?s=20
食べ物がテーマだったので、最近はまった三角と円の中間をモーフィングで作りだしておにぎり🍙を作りました。本当は海老天おにぎりも作りたかったのですがシンプルに時間が足りませんでした...

6/7:時間をテーマに作品を作る

https://twitter.com/Plo2Ky/status/1666456100227493891?s=20
テーマが時間だったのでシンプルにサインとコサインを使って時計っぽいなにかを作りました。
この辺からPCD Tokyo 2023ポスターデザイン用の作品を作り始めたので時間が足りないながらに無理やり作り出して制作を行っていました。

6/8:可愛いコードを描く

https://twitter.com/Plo2Ky/status/1666824437042388992?s=20
自分の中にアイデアとして可愛いは存在しなかったので思った以上にゴツイ作品が出来上がりました...最後の悪あがきとしてカラーだけでも可愛くを目指しました。

6/9:青をテーマに作品を作る

https://twitter.com/Plo2Ky/status/1667207895455522816?s=20
青色がテーマだったので、下から噴き出る泡を作るつもりがタンパク質が折りたたまれたかのような構造になりました。作品をアップした際、噴き出る泡の作り方などアドバイスをいただけて非常にうれしかったです!
またこの作品を通して、いつかp5js上でPDBなどのタンパク質構造を扱いたいと思いました。

6/10:最近見た景色をコードで再現する

https://twitter.com/Plo2Ky/status/1667545904809922561?s=20
ちょうど浅草に行った際に見たビルの窓を再現しました。
思った以上に時間が足りず中途半端な形になりましたが、普段使わないシンプルな四角の配置も面白いと学ぶことができました。

6/11-6/20までの10日間

6/11:コードを書かずにイメージを共有する

https://twitter.com/Plo2Ky/status/1667862014826536960?s=20
この日はコードを書かず、コードのアイデアを共有するというものだったので、作りたい作品イメージを共有しました。

6/12:コードで人を動かす

https://twitter.com/Plo2Ky/status/1668234370027753472?s=20
人を使った作品がテーマだったので文字通り人を使って作品を作りました。

6/13:新しい技術を使ってコードを描く

https://twitter.com/Plo2Ky/status/1668623814517997569?s=20
極座標がよくわからなかったので復習がてら作品を作りました。
しかし記事を書いている現時点ですでに極座標について忘れていますw 復習は重要ですね。

6/14:画像を用いて作品を作る

https://twitter.com/Plo2Ky/status/1668965712470368257?s=20
画像を使う作品を作ることがテーマだったので、駅で撮影した鳩の画像を使ってランダムに表示される作品を作りました。
また、この作品は田所先生の以下のサイトを参考にして制作しました。
https://yoppa.org/geidai-media1-23/13306.html

6/15:文字を使って作品を作る

https://twitter.com/Plo2Ky/status/1669380453839835136?s=20
文字を使った作品がテーマだったので、アルファベットのHを回転させました。これはのちに出てくるテーマ、人で1週間作り続けることに対応するためにあえてHを選びました。
この日は帰宅が0時過ぎたこともあり、作成する時間が取れそうになかったため電車でコードを作成しましたw

6/16:緑をテーマに作品を作る

https://twitter.com/Plo2Ky/status/1669761182130143232?s=20
緑がテーマだったのでアステロイド曲線を使ってはっぱを描きました。

6/17:エディタを使わず紙で表現する

https://twitter.com/Plo2Ky/status/1670076962822590466?s=20
エディタを使わずコードを表現することがテーマだったので、実際に紙に書いて表現しました。
まだコード上に落としていないのでそのうち動かしてみたいです。

6/18:一週間かけて「人」をテーマに作品を作る1日目

https://twitter.com/Plo2Ky/status/1670440160390176770?s=20
この日から人をテーマに1週間作成していきます。
1日目の今日は6/15に作成したコードを流用し作品を改造しました。

6/19:一週間かけて「人」をテーマに作品を作る2日目

https://twitter.com/Plo2Ky/status/1670808008933163008?s=20
アニメーションを追加し、真ん中に回転するhを追加しました。
真ん中のhは立体っぽく見せていますが、実態はscaleを使って圧縮しているだけだったりします。

6/20:一週間かけて「人」をテーマに作品を作る3日目

https://twitter.com/Plo2Ky/status/1671164219256115200?s=20
背景に人を雪のように降らせるエフェクトを追加しました。
この辺からどんどんとカオスな方向に突き進んでいきます。

6/21-6/30までの10日間

6/21:一週間かけて「人」をテーマに作品を作る4日目

https://twitter.com/Plo2Ky/status/1671469817948434432?s=20
雪の後ろにさらに背景を用意し、ひらがなでひとを敷き詰めました。
drawで敷き詰めているためこの日を境に画面がどんどんと重くなっていきます。

6/22:一週間かけて「人」をテーマに作品を作る5日目

https://twitter.com/Plo2Ky/status/1671887884260114433?s=20
6/12に書いたコードを流用して、背景に極大な人がアニメーションするようにしました。
フレームレートがかなり下がってしまったので、frameRate関数の数値をいじって書き出しを行ったところ、指定した数値のフレームレートで書き出されて驚きました。
どうやらsaveGif関数を使って書き出すと指定した数値のフレームレートで書き出せるようです。

6/23:一週間かけて「人」をテーマに作品を作る6日目

https://twitter.com/Plo2Ky/status/1672263054833364992?s=20
絵文字を使って、合いの手を追加しました。

6/24:一週間かけて「人」をテーマに作品を作る7日目

https://twitter.com/Plo2Ky/status/1672644943641444354?s=20
人をテーマに最終日は終日外出して帰宅が0時を過ぎたため、コードを書く時間はもちろん取れず電車の中で追加作業をしていましたw
実行が重かったり、追加したかった記述が書けなかったりと不満は残る形でしたが、インパクトある作品が作れたのでとりあえず満足しています。

6/25:他の人が一週間かけて作った作品を見る

この日は1週間かけて他の人が作った作品をみるというテーマで、様々な作品を見た感想としては、意外とみなさん人というテーマを抽象的にとらえているのだなと思いました。
私が作ったような"人"という文字に囚われて全力でふざけている人がいなかったのが意外でした。

6/26:randomを使って作品を作る

https://twitter.com/Plo2Ky/status/1673342942184894471?s=20
24日に作成した効果線を流用して作品を作りました。

6/27:3Dなコードを描く

https://twitter.com/Plo2Ky/status/1673703002333646848?s=20
3Dっぽく作るというテーマで時間が全く足りなかったので、前回社内勉強会用に作成したコードをcodepen上で公開できる形に修正しました。

6/28:誰かの作品を真似してみる

https://twitter.com/Plo2Ky/status/1674072363539808256?s=20
誰かの作品を真似してみるというテーマでレオナさんのコードを参考にさせてもらい作品を作りました。

6/29:1年前に作った作品をリメイクする

https://twitter.com/Plo2Ky/status/1674431985715122177?s=20
一年前に作った作品をリメイクするというテーマだったので去年の2月に開催されたデイリーコーディングチャレンジAltEdu2022に出した作品をリメイクしました。
アニメーションにはイージング関数ではなくベジェ曲線を描いたときに出力した軌跡の変化を使用しています。

6/30:フリーテーマ

https://twitter.com/Plo2Ky/status/1674824005549957121?s=20
minacoding最終日はフリーテーマだったので、からくれというアカウントで活動を始めた一番最初の作品をリメイクする形で終わりました。
この30日で学んだことを生かしつつ、当時の作品にも寄り添えたかと思います。

このイベントを通して感じたこと・心境の変化など

このイベントと通じて感じたことは、やっぱりクリエイティブコーディングは楽しい!ということでした。最初の10日間こそ続けるのが面倒だったり、きつかったりしたのですが、それ以降はコードを触らないとソワソワする状態になり、ちょっとした空き時間にコードを考えることが週間付いていきました。結果としてどういう作品を作ろうかなと常にわくわくした状態で、非常に楽しい30日間でした。
また、普段であれば触らないであろう文字であったり、グラデーションだったり新しい作品の作り方を見つけるきっかけになりました。その他にも、普段作成されない方も作品を作られたり、イベントを通して様々な作品が見れたり非常に楽しく参考になる時間でした。

最後にこのイベントを考え、主催してくれたたこやきさんに感謝を込めて記事を終わらせていただきます。楽しいイベントありがとうございました!

Discussion