レガシーなアーカイブ | ビガクブトーキョー

bigakubu.tokyo

UNIQUE ART STORE

BY SOICHI TSUKAMOTO

💾

レガシーなアーカイブ

過去に勉強や実験のために書いたJavaScriptのアーカイブです。 作る過程がとにかく楽しい反面、ある程度完成すると自分で飽きてしまい、お蔵入りさせていたものですが、別の制作場面で、 コードを再利用したくなることがたびたびあったので、自分用のインデックスもかねてここに整理してみます。 ピュアなJavaScriptなので、ブラウザでほぼすべてのコードを閲覧できます。少しでも同じような取り組みをしている方の参考になれば幸いです。 なお、コードはお世辞にも美しくなく、たいへん散らかっていますし、いわゆる車輪の再発明的なものも多くありますが、それらも含めてほほえましいレガシーとして。

1. Box Wave

不等角投影法で描いた立方体を波打たせるGIFアニメーションを生成

2. ループシークエンス

トーフドッグのループシークエンスGIFアニメーションを生成(しばらく待つ)

3. サインカーブ

トーフドッグがサインカーブを描くGIFアニメーションを生成(しばらく待つ)

4. 図法の使い分け

不等角投影図法と二点透視図法を簡単に使い分けられるライブラリbgkb.js

5. モチーフエディタ

自分用に作ったモチーフエディタ&ダッシュボード、JSON大活躍

6. 猫を連れた人たち

モチーフエディターで作ったパーツをJSで色付け、レイアウト

7. デジタル生花

generative flower arrangement ランダムに生成するデジタル生花

8. 色セロファン

色セロファンのような減色混合の表現、globalCompositeOperation

9. 無限に地形

リロードするたびにランダムな地形を描く、パーリンノイズ風

10. 不等角投影図法

様々な角度の不等角投影図法で描いたステーキのポスター、角度も表示

11. チョコレート

味と形状をランダムに組み合わせたチョコレート、角度を大きく俯瞰風

12. 紙バッグ風デザイン

モチーフを紙バッグ風に見せる実験、別canvasの画像を読み込む

13. サンドイッチ屋

リロードするたびランダムな具材、サンドイッチショップのポスター

14. たまに浮くトラック

不等角投影図法を使って小さなトラックのイラスト、たまに浮いている

15. ミッドセンチュリー

不等角投影図法を使ってミッドセンチュリーモダン風ソファのイラスト

16. 波のミニマル表現

不等角投影図法を使って「波」を表現、三角関数

17. ペラペラな牛

手描きの絵を傾斜させてペラペラな立体ぽく配置

18. 牛のテキスタイル

手描きの牛をランダムに回転させてテキスタイル風に配置

19. バグった集合住宅

手描きのパーツをランダムに構成、リロードするたび新しい絵

20. 額装風ジェネレータ

画像読み込み、ドロップシャドウ

21. 回転するマップ

カーソルキーでマップが旋回、座標変換、rotate() ※スマホ非対応

22. 色分け意識

色ごとに少しずつ固まりながら浮遊する顔つきのボールのアニメーション

23. オレンジパッキング

「自律」の発想でオレンジの輪切りを敷き詰めるアニメーション

24. かしこい猫

「お互いに間隔を調整するかしこいネコたち」クリックしたところにネコが追加されてぬるぬる動く

25. 増殖とカオス

ボールが増殖して混乱して減少して落ち着くアニメーション ※閲覧注意

26. フィボナッチ数列

フィボナッチ数列とヤギのアニメーション

27. 冷やしヤギ

冷やしヤギ(アナログ、手作業、実写)※プログラミング要素なし…

28. 猫のしっぽ

猫のしっぽがぎこちなく揺れるアニメーション、関節ごとに再帰処理

29. ぐるぐる猫

たくさんの猫がぐるぐる回転するアニメーション

30. 有機的なデザイン

CSSフィルター、ノイズ螺旋 ※スマホ非対応

31. ネオンメタボール

メタボールのバリエーション、ネオン風、CSSフィルタ ※スマホ、一部ブラウザ非対応

32. 美術館風エフェクト

ドロップシャドウやグラデーションでスポットライトやパネル感を描写

33. FLAPPYBIRD風

ミニマルなFLAPPYBIRD、キーを押して鳥(白い正方形)を浮上させ土管(赤い長方形)を避ける

34. ノイズ螺旋の星

ノイズらせんをスライダーでパラメータ調整でできる

35. 猫の集合

8方向から撮影した猫、三角関数で配置

36. 迷路っぽいデザイン

棒倒し法アルゴリズムを使って迷路を描く、リロードするたび新しいパターンに

37. box2D使ってみた

box2Dのダンシングドールに人物の画像を貼り付け、頭をドラッグ ※スマホ非対応

38. ドラムのイメージ

ハイハット、スネア、キックのイメージをミニマルに表現。PLAYボタン押してください。音もでます。808系。

39. 200種類の肖像画

同じモチーフをベースに200通りのランダムなイラストを描く実験