canvasで作ってみました。中村勇吾さんは、私が最もリスペクトするクリエーターで、初めてこのサイトを見たとき、どうやって処理しているんだろうという好奇心とその動きの気持ち良さに暫く没頭して操作していたのを覚えています。慣性の処理サンプル下記のリンクよりサンプルをご覧頂けます。Androidの各ブラウザで動作確認しています。以下、このサンプルの処理について解説していきますが、実際に中村勇吾さんの作られたソースを見た訳ではないので、間違いが多々あると思います。CreateJS、Pointクラスを拡張するpoint-ex.jsを使用しています。Sampleドラッグ時の処理まず、画像のドラッグ時の処理を見てみましょう。下記は、画像のドラッグ時に実行されるメソッドです。画像の座標currentPosition、現在のマウス座標currentMouse、直前のマウス座標lastMouseから力のモーメントを算出し、そこから回転の加速度accelerationを求めています。この加速度の値を角速度angularSpeedに反映させますが、目標としたサイトの動きに近づけるため、加速度や角速度などの状況に応じて色々と処理を分岐させています。試行錯誤を重ねたことがソースからも伺えると思いますが、それでも目標としたサイトの動きとは違うと自覚しています。画像の中央付近をドラッグしたときの回転方向の正確さが雲泥の差です。悔しいですが、現在の私の実力と受け止めて、日々精進していきたいと思います。次にドラッグ終了時の処理を見てみましょう。この処理では主に慣性力を求めています。角速度angularSpeedから作用点workingPointにおける遠心力のベクトルcentrifugalForceを求めます。ドラッグ終了後は、画像の中央を軸に回転させるので、遠心力のベクトルの始点を画像の中央に変更して、さらにマウスの動きforceを加算することにより、慣性力のベクトルinertiaForceを求めています。次はドラッグ終了後の慣性の処理です。前述の処理で求めた角速度angularSpeedと慣性力inertiaForceをインスタンスに反映させた後、徐々に減衰するようにしています。角速度と慣性力が微小な値になったら、インスタンスを休止状態とし、処理を行わないようにしています。