LoginSignup
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@70ki8suda(70ki 8suda)

P5.jsで過去に書いたクリエイティブコーディングを供養します

Last updated at Posted at 2021-07-23

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

注意

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

Loading Hex Grid

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

Subways

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

Mud Honey

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

Miletus

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

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

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

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

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

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?