Scramble / Determinism

ランダムに見える順番の解剖

9 個のドットが、予測できない順に弾む。だが乱数はどこにも使われていない。動きはキーフレームで打たれたクリップ 1 本だけ — 9 個全てが同じクリップを 2 フレームずつずらして再生している。順番の正体は、9 マスに 0〜8 を書き込んだ固定の表 1 枚だ。ばねに見えるアンダーシュートまで含めて、その作りを純関数ひとつに収めて解剖する。

Published
2026年6月10日
Topics
Scramble · Determinism · Easing · SVG
弾む順番は毎周おなじ — 90 frames / 3s loop

次に弾むドットを当ててみる

上のループで、次にどのドットが弾むか当ててみる。最初は右下。次は上の段の真ん中、その次は下の段の真ん中 — ばらばらに見えて、順番は毎周まったく同じだ。最後は左下が弾んで、また右下へ戻る。

ばらばらに見える正体は乱数ではない。動きはクリップ 1 本だけで、9 個の複製が同じクリップを 2 フレームずつずらして再生している。どの複製が何番目に始まるかを決めるのは、9 マスに 0〜8 を書き込んだ固定の順番表 — `[[5,1,6],[7,3,4],[8,2,0]]`。「ランダム」の正体は、この表 1 枚だ。

クリップを 1 本だけ作る

  • 静止半径 12.02 から 9 フレームで 26.19 へ弾む
  • 9 フレームで 21.84 まで落としすぎる — 打たれたアンダーシュート
  • 7 フレームで 22.39 に拾い、そのまま 25 フレーム保つ
  • 最後は 18 フレームの単一イーズで静止半径へ戻る

クリップの中身は半径のキーフレーム 6 個と、区間ごとのイージングカーブ 5 本だけ。同じ値に挟まれた区間は、カーブが何であれ値が動かない — 25 フレームの保持はそうやって作られている。

複製の側に個性はない。9 個は約 59px 間隔の 3×3 格子に固定され、振幅もカーブの形も全ドット共通 — 開始を揃えて重ねた実測のばらつきは平均 0.07px に収まる。違うのは開始フレームだけで、そのずれはどのドットも正確に 2 フレーム × 順番だった。

減衰は静止半径へ正確に着地する。元の動画はわずかな尾を引いて 12.02 へ戻りきらないが、最後に弾む複製のクリップは 19 フレーム目に始まり 87 フレーム目に終わる — 90 フレームのループ予算をほぼ使い切っていて、尾を追えば継ぎ目が壊れる。正確な着地は、最終フレームが先頭と一致する継ぎ目のないループと引き換えに選んだ制約だ。

ばねではなくキー打ち

弾んで、行きすぎて、戻って落ち着く — ばねの揺れ(減衰振動)に見える。だが、いちばん良く合わせたばねの式でも 0.252px のずれが残る。キーフレーム 6 個の作りなら 0.034px — 約 7 分の 1 だ。それでも決定打は、当てはまりの良さではなく保持の出口にある。

25 フレームの保持は 0.04px しか漂わない、死んだような平らさだ。その直後、半径の速度はほぼ 0 から 1 フレームあたり −1.07px へ一段で切り替わって減衰が始まる。揺れ続けるばねに、この切り替わりは作れない。アンダーシュートは物理の余韻ではなく、誰かが打ったキーだ。

再現に必要なのは純関数ひとつ

実装は、フレーム番号を渡すと 9 個ぶんの中心と半径を返す純関数ひとつ。順番表は関数に渡す普通のデータで、シャッフルも乱数の種もない — 同じフレームを渡せば、必ず同じ姿が返る。キーフレーム・イージングカーブ・格子座標・順番表の数値は、このページが読み込む JavaScript に定数としてそのまま入っている — ブラウザのソース表示が仕様書を兼ねる。