ピクセルの崩落Pixel Fall
ドット絵の図形がブロックごとに下へ崩れ落ち、画面の上から降ってきて元の位置に積み上がる動きです。
どう計算しているか
- マス目の中心が図形の内側にあるかを式で判定し、内側のマスだけをドットにします。ハートは (x² + y² − 1)³ − x²y³ < 0、ひし形は |x| + |y| < 定数 のような不等式です。
- 各ドットの遅れは、下の行ほど小さくなる値×「崩れる順のばらつき」に、疑似乱数×「ランダムさ」を足したものです。下の行から先に崩れます。
- 時刻 u = fract(t − 遅れ) を「止まっている時間」・落ちる区間・戻る区間に分けます。落ちる区間は y = 元の位置 + D·k² で、加速しながら画面の下へ出ていきます。
- 戻る区間は y = 元の位置 − D·(1 − k²) で、画面の上から加速しながら降りてきます。止まっている時間の最初に、減衰する sin で小さく跳ねて着地を表します（「着地の跳ね」）。
fall: y = y0 + D·k², return: y = y0 − D·(1 − k²)ループがつながる理由
落ちる区間の終わりではドットは画面の下の外、戻る区間の始まりでは上の外にいるので、位置が飛んでも見えません。戻る区間の終わりと止まっている時間の始まりは元の位置で一致し、u は fract で1ループに1回巡ります。
調整できるパラメータ
形
| 図形 | ハート・丸・星・リング・ひし形・全面 |
|---|---|
| ドットの数 | 6 〜 60（初期値 22） |
| 大きさ | 0.3 〜 1.2（初期値 0.85） |
| すき間 | 0 〜 0.4（初期値 0.08） |
動き
| 止まっている時間 | 0.1 〜 0.8（初期値 0.4） |
|---|---|
| 崩れる順のばらつき | 0 〜 0.5（初期値 0.18） |
| ランダムさ | 0 〜 0.3（初期値 0.06） |
| 着地の跳ね | 0 〜 40（初期値 10） |
同じ分類のシーン（タイル・格子）
- グリッド × 位相Ripple Grid格子に並んだ図形が、中心からの距離などで決まる時間差をもって伸縮・回転・公転し、波紋のような動きを作ります。
- 図と地の反転Flip Tiles市松模様の正方形が90°回転し、回り終えるたびに図と地が入れ替わって、同じ模様が続いていく反転タイルです。
- 十字・図と地Cross Tiles平面をすき間なく埋める十字形が90°回転し、前半と後半で図と地が入れ替わって模様が途切れずに続きます。
- 三角・六角タイルTri / Hex Tiling三角形や六角形の敷き詰めが位置ごとの時間差で回転し、重なった部分をXOR合成で抜いて模様を作ります。
- トルシェ・タイルTruchet Flow四分円や対角線を描いた正方形タイルが波のように90°ずつ回転し、つながった曲線の迷路が組み替わり続けます。
- スライドパズルSlide Grid格子の行が左右に1マス、続いて列が上下に1マスずれる動きを交互の向きで繰り返す、スライドパズルのような模様です。
- 網点Halftone Waves印刷の網点のように並んだ点の大きさを、円軌道を回る波源から広がる波の重ね合わせで変化させます。
- 歪む市松Warp Checker市松模様の上を見えないレンズが円軌道で周回し、模様を膨らませたりへこませたりするオプアートです。
- ドミノ倒しDomino Wave並んだ板が端から順に倒れて隣の板にもたれかかり、しばらく止まったあと逆の順で起き上がるドミノの動きです。
- 折り紙Origami Foldマスごとの正方形が対角線で半分に折れて裏の色を見せ、また開いて元に戻る、折り紙のような動きです。
- ヘリンボーンHerringbone杉綾模様に組んだ長方形のレンガが、長い辺を軸に1枚ずつ裏返って色が入れ替わっていく動きです。
- 菱形・5回対称Rhombus Rosette太い菱形と細い菱形を同心円状のリングに並べ、リングごとに時間差をつけて半回転させる回転対称の模様です。
- SDF・ドメイン反復GLGoo Grid格子状に繰り返した距離関数の図形が、隣同士で溶け合いながら伸縮・回転・公転するシェーダーの模様です。
- 反応拡散風・シェーダーGLTuring Pattern複数方向の波を重ねてしきい値で切り分け、豹柄やサンゴ、迷路のような斑点や縞をうごめかせるシェーダーの模様です。