スマホ3分砂時計

端末を上下逆さまにするか、砂時計をドラッグしてください。

砂時計をタップすると残り時間を表示します。PCではドラッグ方向が重力になります。

これは何？

スマートフォンを上下逆さまにすると動き始める、3分間の砂時計です。PCでは砂時計の上をドラッグすると、その方向へ重力を変更できます。

砂粒は Canvas 上の円として扱い、重力、壁との反射、粒同士の衝突を毎フレーム計算しています。端末を横向きにすると時計が一時停止し、反対方向へ戻すと、その時点で反対側にある砂の量に応じた時間で流れます。

砂粒を完全に物理計算だけで落とすと、端末の処理速度や偶然できた詰まりによって終了時刻が変わります。この砂時計では粒子の動き自体は物理計算に任せつつ、中央を通過できる粒子数を1秒あたり2粒に制限しています。

粒子数は360個なので、すべての砂が反対側へ移るまでの時間は次のようになります。

\[\frac{360\ {\rm particles}}{2\ {\rm particles/s}}=180\ {\rm s}=3\ {\rm min}\]

最後に残った粒子が壁際で止まった場合だけ、中央へ少しずつ誘導しています。見た目の自然さを残しながら、時計としての時間も大きくずれないようにするためです。

360個の粒子をすべて総当たりで比較すると、1回の更新で約6万5千組を調べることになります。そこで画面を小さな格子に分け、同じ格子と周囲8格子にいる粒子だけを比較しています。

この空間分割により、スマートフォンでも粒子同士の衝突を計算しやすくしています。計算は画面の描画周期とは分離し、1秒を120分割した固定時間ステップで進めています。

「傾きセンサーを使う」ボタンを押すと、devicemotion から重力を含む加速度を受け取ります。端末の画面方向を考慮して Canvas 上の重力ベクトルへ変換し、急な値の変化はローパスフィルターで滑らかにしています。

モーションセンサーはプライバシーに関わる機能なので、対応ブラウザでは安全な接続とユーザーの許可が必要です。詳しい仕様は W3C Device Orientation and Motion にあります。