loop-animation

菱形・5回対称Rhombus Rosette

太い菱形と細い菱形を同心円状のリングに並べ、リングごとに時間差をつけて半回転させる回転対称の模様です。

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

ペンローズ・タイルを思わせる太い菱形と細い菱形を同心円状に並べ、リングごとに半回転させる

このシーンで作る

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

どう計算しているか

  1. r 番目のリングには「対称数」×r 個の菱形を、半径 r に比例する円周上に等間隔で置きます。奇数番目のリングは半個ぶん角度をずらします。
  2. 奇数リングは頂角 360°÷対称数 の太い菱形、偶数リングは 180°÷対称数 の細い菱形です。菱形の頂点は cos・sin で半頂角から計算します。
  3. 各菱形は自分の中心で180°回ります。進み具合は fract(t − r·「リング間の時間差」) にイージングを掛けた値で、外側のリングほど遅れて回ります。
  4. 「交互に逆回転」をオンにすると奇数リングが逆向きに回ります。「輪郭線」は背景色の線で菱形を縁取ります。
θ = a_k ± ease(fract(t − r·lag))·180°

ループがつながる理由

菱形は180°回すと元と同じ形になるので、1ループで半回転すれば最初の姿に戻ります。リングごとの時間差も fract で包んでいるため、どのリングもループ内で1回だけ半回転します。

調整できるパラメータ

形

対称数3 〜 12(初期値 5)
リングの数2 〜 24(初期値 9)
菱形の大きさ0.4 〜 1.4(初期値 0.95)
輪郭線オン/オフ(初期値 オフ)

動き

リング間の時間差0 〜 0.2(初期値 0.04)
交互に逆回転オン/オフ(初期値 オン)
イージングlinear・sine・quad・cubic・quint・expo・back・elastic

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