去年に、PCを新しいものに買い替えたのですが、3,4年前に趣味でp5.jsでクリエイティブコーディングを書いていたときのデータが旧PCの中に眠っており、このままゴミ集積場送りになるのもちょっと勿体ない気がしたので、連休ということもあって、データをサルベージしてOpenProcessingにまとめてアップロードしましたので、供養も兼ねてご紹介させてください。

注意

今となってはもう作った当時の記憶も定かではない過去の話なのですが、当時の私はソースコードを公開することをひどく躊躇しておりました。
というのも、クライアントサイドで実行されるjsというのは仕様上、ソースコードを簡単に丸パクリすることができるので、悪意のある人にコピペで丸パクリされてそのままweb制作の仕事やポートフォリオに利用されるというリスクが怖かったのです。
とはいえ、私の書いた制作物も過去の様々な制作物から学び模倣しアレンジしたものでしかありません。
パクリとオリジナルの境界線はかなり微妙なところにあるといえるでしょう。だからこそ、良心とモラルを試される界隈だと思います。
p5.jsによるクリエイティブコーディングなどは、それなりにクリエイティブな頭の使い方を必要とするわりに、悪意のある人に一瞬で丸パクリされるリスクを持った非常に繊細なものです。
良心のある、健全なコミュニティであることを私は祈っています。

Loading Hex Grid

3,4年前に趣味で描いていたP5.jsのCreative Codingを旧パソコンからサルベージしてOpenProcessingに投稿しました。
当時は丸パクりされるのが怖くてソースコードは秘匿していたのですが、もう時間も経ったので、すべて公開します。https://t.co/eFvQHc1LKk
②Loading Hex Grid#p5js pic.twitter.com/DR3ZM00Y0d
— 70ki8suda (@70ki8suda) July 23, 2021

これはp5.jsを書き始めてすぐの頃につくった作品、下手したら最初につくった作品かもしれません。
エヴァとかSF系のアニメでよくあるような、六角形でしきつめられた画面にComplete!とかWarning!とか表示されるような絵をつくりたかったんだと思います。Loadingとかで使えそうですよね、こういうの。

Subways

3,4年前に趣味で描いていたP5.jsのCreative Codingを旧パソコンからサルベージしてOpenProcessingに投稿しました。
当時は丸パクりされるのが怖くてソースコードは秘匿していたのですが、もう時間も経ったので、すべて公開します。https://t.co/wiIBM9Pdvk
③subways#p5js pic.twitter.com/3yucFCq9NT
— 70ki8suda (@70ki8suda) July 23, 2021

こういう動きも結構クリエイティブコーディングの定番かもしれませんね。
数ステップ進んだら確率で45度進路変更するみたいな直線を描いてるだけで、かなりシンプルな実装だったはずです。
シンプルながら地下鉄の路線図みたいでかっこいいですよね。

Mud Honey

3,4年前に趣味で描いていたP5.jsのCreative Codingを旧パソコンからサルベージしてOpenProcessingに投稿しました。
当時は丸パクりされるのが怖くてソースコードは秘匿していたのですが、もう時間も経ったので、すべて公開します。https://t.co/KjBLIUydkg
④Mud Honey pic.twitter.com/cTK7sJryJM
— 70ki8suda (@70ki8suda) July 23, 2021

これはスイスデザインのシンプルだけどモダンな絵作りにインスピレーションを得てつくったのを記憶しております。
たしか菱形のグリッドシステムから、ランダムで三点を選択し、透明度70%くらいの黄色、灰色、黒などの色の三角形を高速に重ねていくことで抽象的な現代アートみたいな絵ができあがるというようなプログラムになっています。
けっこう偶然の産物としていい感じにできたのを記憶しています。ただ、三角形の描画をなめらかにアニメーションさせて行えればよかったのですが、当時はそれをする技術力と体力がなかったことも記憶しています。

Miletus

3,4年前に趣味で描いていたP5.jsのCreative Codingを旧パソコンからサルベージしてOpenProcessingに投稿しました。
当時は丸パクりされるのが怖くてソースコードは秘匿していたのですが、もう時間も経ったので、すべて公開します。https://t.co/8185XlWFy7
⑤Miletus pic.twitter.com/9ZUc4MpfJh
— 70ki8suda (@70ki8suda) July 23, 2021

このプログラムはBeautiful Geometryという書籍に載っていた、円周上の任意の3点を結んでできる三角形のほにゃららな角度は必ず90°になるみたいな数学的な定理をかっこよく見せてみるみたいな感じで書いたのを覚えています。
もうちょっと頑張れば、いい感じになりそうですね。。。

今回、ご紹介するのは以上になります。
これらのコードは全てopen processingの私のページからソースコードも見れますので、よろしければご参考にされてください。

ただ、割と年季が入っていますので、変数の宣言がvarだったりとか、色々古臭いところはあるかと思いますが、そこらへんはご容赦ください。

個人的に今年は、数年ぶり何度目かのWebGLへの挑戦をしてみたいと思っているので、また、クリエイティブコーディング的なことを再会できればいいなぁと思っています。

最後まで、お読みいただき、ありがとうございました。