グリッド × 位相Ripple Grid
格子に並んだ図形が、中心からの距離などで決まる時間差をもって伸縮・回転・公転し、波紋のような動きを作ります。
どう計算しているか
- 「配置」で正方格子か六方格子を選びます。六方格子では奇数行を半マスずらし、行の間隔を√3/2倍に詰めています。
- 各図形の位置 (x, y) から「位相のずれ方」に応じた値（放射なら中心からの距離、角度なら極座標の角度など）を求め、「ずれ量」を掛けて時間のずれにします。
- ずらした時刻 u = fract(t − ずれ) にイージングを掛けた値 e で動きを決めます。伸縮は 0.5 − 0.5·cos(2πe) で大きさを変え、公転は (cos 2πe, sin 2πe) の円軌道で位置をずらします。
- 回転は図形の対称角（四角なら90°、三角なら120°）に「回転数」を掛けた角度だけ回します。反転は横方向の倍率を cos(2πe·回転数) にして、裏返るように見せます。
- 「色分け」を位相にすると、時間のずれの小数部分でパレットの色を選ぶので、同じタイミングで動く図形が同じ色になります。
u = fract(t − phase(x, y)·spread), θ = ease(u)·sym·turnsループがつながる理由
どの動きも e = 0 と e = 1 で同じ姿になるように作られています。伸縮と公転は cos・sin の1周期、回転は図形の対称角の整数倍なので、ずらした時刻が1周して戻ったときに見た目がそろいます。
調整できるパラメータ
形
| 図形 | 丸・四角・三角・六角形・ひし形・十字・星・リング・線・半円 |
|---|---|
| 配置 | 正方格子・六方格子 |
| 分割数 | 3 〜 40（初期値 11） |
| サイズ | 0.1 〜 2（初期値 0.9） |
| 塗り | 塗り・線 |
| 線幅 | 1 〜 30（初期値 4） |
動き
| 動き | 伸縮・回転・公転・反転・回転+伸縮 |
|---|---|
| 強さ | 0 〜 1（初期値 0.85） |
| 回転数 | 1 〜 4（初期値 1） |
| 位相のずれ方 | 同時・放射・角度・渦巻き・斜め・横・縦・市松・ランダム |
| ずれ量 | 0 〜 4（初期値 1） |
| イージング | linear・sine・quad・cubic・quint・expo・back・elastic |
色
| 色分け | 位置・位相 |
|---|
同じ分類のシーン（タイル・格子）
- 図と地の反転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太い菱形と細い菱形を同心円状のリングに並べ、リングごとに時間差をつけて半回転させる回転対称の模様です。
- ピクセルの崩落Pixel Fallドット絵の図形がブロックごとに下へ崩れ落ち、画面の上から降ってきて元の位置に積み上がる動きです。
- SDF・ドメイン反復GLGoo Grid格子状に繰り返した距離関数の図形が、隣同士で溶け合いながら伸縮・回転・公転するシェーダーの模様です。
- 反応拡散風・シェーダーGLTuring Pattern複数方向の波を重ねてしきい値で切り分け、豹柄やサンゴ、迷路のような斑点や縞をうごめかせるシェーダーの模様です。