loop-animation

折り紙Origami Fold

マスごとの正方形が対角線で半分に折れて裏の色を見せ、また開いて元に戻る、折り紙のような動きです。

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

正方形が対角線で半分に折れて裏の色を見せ、また開く。折る向きはマスごとに変わる

このシーンで作る

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

どう計算しているか

  1. 正方形を対角線で2つの三角形に分け、片方は固定し、もう片方を折り返す部分にします。
  2. 折り返す三角形の頂点を、対角線に垂直な方向に cos(πk) 倍して動かします。対角線を軸に回る板を真上から見た位置(正射影)にあたり、k が0から1に進むと頂点が反対側まで移って折り重なります。
  3. cos(πk) が負になると裏面が見えている状態なので、裏の色で塗ります。「折り目の陰影」は 1 − |cos(πk)| に比例する暗さを重ね、板が立っている途中ほど暗くします。
  4. k は 0.5 − 0.5·cos(2π·ease(u)) で、0から1へ進んで0へ戻ります。折る向きはマスの番号から決める90°単位の回転で変え、「1ループの折り回数」が2のときは2回目で向きを変えます。
k = wave(ease(u)),  apex = −s·cos(πk)·(1, 1)

ループがつながる理由

k は1回の折りの最初と最後で0になり、正方形は開いた状態に戻ります。ずらした時刻は fract で1ループに1回巡るので、どのマスもループの境目では開いた同じ姿です。

調整できるパラメータ

形

分割数2 〜 30(初期値 8)
大きさ0.4 〜 1(初期値 0.92)
折り目の陰影0 〜 1(初期値 0.45)

動き

1ループの折り回数1 〜 2(初期値 1)
位相のずれ方同時・放射・角度・渦巻き・斜め・横・縦・市松・ランダム
ずれ量0 〜 4(初期値 0.7)
イージングlinear・sine・quad・cubic・quint・expo・back・elastic

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