loop-animation

歪む市松Warp Checker

市松模様の上を見えないレンズが円軌道で周回し、模様を膨らませたりへこませたりするオプアートです。

Canvas 2D で、図形を 1 つずつ計算して描いています。初期設定で再生しています。

市松模様の上をレンズが周回し、膨らんだりへこんだりするオプアート

このシーンで作る

パラメータ、色、エフェクトを変えて、GIF・APNG・WebP・MP4・WebM で書き出せます。

どう計算しているか

  1. 「レンズの数」だけのレンズを円軌道上に等間隔に置き、t に合わせて回します。偶数番目と奇数番目で回る向きと軌道の半径を変えています。
  2. 模様上の点 p は、各レンズの中心 l から p − l の方向へ、強さ·exp(−|p − l|²/大きさ²) の割合だけ押し出されます。exp の項はレンズの中心で1、離れるほど0に近づく釣り鐘形の重みです。
  3. 「歪みの強さ」が正なら外へ押し出して膨らみ、負なら中心へ引き寄せてへこみます。
  4. マスの辺を細かく区切り、区切った点を一つずつ変形してから結ぶことで、まっすぐな辺もなめらかに曲がって見えます。縞や水玉も同じ方法で輪郭を変形しています。
p' = p + Σ (p − l_k)·a·exp(−|p − l_k|²/r²)

ループがつながる理由

レンズは1ループで「1ループの周回数」という整数回だけ円軌道を回り、元の位置に戻ります。歪みはレンズの位置だけで決まるので、最後のフレームは最初と同じ形になります。

調整できるパラメータ

形

模様市松・縞・水玉
分割数4 〜 40(初期値 14)

動き

レンズの数1 〜 4(初期値 2)
歪みの強さ-1.5 〜 1.5(初期値 0.9)
レンズの大きさ60 〜 600(初期値 260)
軌道の大きさ0 〜 450(初期値 200)
1ループの周回数1 〜 3(初期値 1)

同じ分類のシーン(タイル・格子)