loop-animation

ニュートンのゆりかごNewton's Cradle

端の玉が振り下ろされてぶつかると反対側の玉が跳ね上がる、ニュートンのゆりかごを周期関数で再現したループです。

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

端の玉がぶつかると反対側の玉が跳ね上がる。運動が端から端へ伝わり続ける

このシーンで作る

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

どう計算しているか

  1. 「玉の数」の振り子を横に並べ、時間 u を前半と後半に分けます。前半は右端から「動く玉の数」の玉だけが、後半は左端の同じ数の玉だけが振れます。
  2. 各半分の中では進み具合 k を 0 から 1 に動かし、振れ角を θ = 「振れ角(度)」·sin(πk) とします。k が 0 と 1 のときに角度が 0 になり、そこで衝突して反対側に運動が受け渡されたように見えます。
  3. 玉の位置は支点から糸の長さ L の先を sin・cos で求めます。「玉のハイライト」をオンにすると、玉の左上に白を混ぜた小さな円を重ねます。
  4. 「台の数」で台を縦に並べ、台ごとに「台ごとの時間差」だけ時刻をずらして動かします。
u = fract((t − r·lag)·hits/2),  θ = θmax·sin(π·fract(2u))

ループがつながる理由

時間は u = fract((t − 時間差)·衝突回数/2) で求めます。「1ループの衝突回数」は偶数しか選べないので、1 ループで往復がちょうど整数回終わり、どの台も t = 0 と同じ状態に戻ります。

調整できるパラメータ

形

玉の数3 〜 9(初期値 5)
動く玉の数1 〜 3(初期値 1)
台の数1 〜 5(初期値 1)
大きさ0.3 〜 1.2(初期値 0.8)
枠オン/オフ(初期値 オン)
玉のハイライトオン/オフ(初期値 オン)

動き

振れ角(度)10 〜 80(初期値 42)
台ごとの時間差0 〜 0.5(初期値 0.25)
1ループの衝突回数2 〜 6(初期値 2)

同じ分類のシーン(点・軌道)