sandboxes
最終更新日時: 2025年08月25日 12:57
- nothing
rtpMIDI
Section titled “rtpMIDI”- rtpで受信したMIDIをWeb MIDI API経由でTypescriptで受信、three.jsのアニメーションに反映させるコード

g-sandbox(glsl sandobx)
Section titled “g-sandbox(glsl sandobx)”- html.ts/g-sandbox
branch: uzu01
Section titled “branch: uzu01”- attractor/repellorを作って、そのポテンシャルを作って、ポテンシャル値に応じた背景色をHSVで塗る
- 等高線を白色で作成し、fract(beatTime)で移動させる)。ちゃんとしたビートになっていないが
- UIを表示してパラメータ変更などする
- 等方的なポテンシャルに三角関数+ノイズで非等方的に
- ノイズ関数のutility
- hide/UIのボタンで画面キャプチャできる。ダブルクリックもしくはスマホ2点ポイントでUI再表示。これは再利用が必要




branch: SDF/metal-life
Section titled “branch: SDF/metal-life”- full screen quadのSDF
- 図形を表す関数を作成
- map関数を
branch: SDF/still
Section titled “branch: SDF/still”- 静止画生成に特化
- SDFの基本を
pingpong/boids
Section titled “pingpong/boids”- Boidsとは、同じオブジェクトをまるでその単体がたくさんいるように動かしてモブを作り出す手法をいう
- 並列処理には、GLSLを用いてPing-Pongバッファを利用
- Boidsのアルゴリズムは3つの原則に基づくベクトル加算により個体の運動ベクトルを更新する

Ping-Pong アルゴリズム
Section titled “Ping-Pong アルゴリズム”- GLSLではuniform sampler2Dで入力テクスチャで前フレームを受け取る
- 各ピクセルでBoidの状態を計算し
gl_FragColorに次の状態を書き込む - フレームごとにAとBを入れ替え
Boids アルゴリズム
Section titled “Boids アルゴリズム”- 各Boid は位置ベクトル と速度ベクトル を持つ
- 近傍Boidとの相互作用により加速度ベクトル を更新
- 近傍集合を とする
Cohesion(中心へ向かう)
Section titled “Cohesion(中心へ向かう)”Alignment(方向を合わせる)
Section titled “Alignment(方向を合わせる)”Separation(密集を避ける)
Section titled “Separation(密集を避ける)”- 最終的な加速度と速度・位置更新:
- :各原則の重み係数
- :ゼロ除算防止項
- Reynolds, C. W. (1987). “Flocks, herds and schools: A distributed behavioral model.” SIGGRAPH
- https://www.red3d.com/cwr/boids/