図と地の反転Flip Tiles

どう計算しているか

1. ループを前半と後半に分けます。前半は背景色の上に前景色の正方形を市松の片側だけ描き、後半は色を入れ替えて反対側のマスに描きます。
2. 各正方形は中心のまわりで90°回転します。前景色の正方形が市松に並んだ絵と、背景色の正方形が残りのマスに並んだ絵は同じ模様なので、回り終えた瞬間に色を入れ替えても見た目は変わりません。
3. 「位相のずれ方」で求めた値を0〜1に正規化して d とし、u = clamp(lt·(1 + 時間差) − 時間差·d) で各マスの進み具合を決めます。d が大きいマスほど遅れて回り始めます。
4. 「回転中の大きさ」は sin(πe) を使って回転の途中だけ辺の長さを変えます。始まりと終わりでは元の大きさに戻ります。「交互に逆回転」をオンにすると奇数行が逆向きに回ります。

u = clamp(lt·(1 + s) − s·d),  θ = ease(u)·90°

ループがつながる理由

進み具合を clamp で0〜1に収めているので、どのマスも半ループの中で必ず回転を終えます。正方形は90°回すと元と同じ形になり、前半の終わりと後半の始まり、後半の終わりとループの始まりはどちらも図と地を入れ替えた同じ模様になります。

調整できるパラメータ

形

動き

同じ分類のシーン（タイル・格子）

• グリッド × 位相Ripple Grid格子に並んだ図形が、中心からの距離などで決まる時間差をもって伸縮・回転・公転し、波紋のような動きを作ります。
• 十字・図と地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複数方向の波を重ねてしきい値で切り分け、豹柄やサンゴ、迷路のような斑点や縞をうごめかせるシェーダーの模様です。