エネルギー保存とアニメーション
- 2023/09/30
- 22:57
運動エネルギーとエネルギー保存の法則運動をしている物体はその運動に用いられているエネルギーを持っています。そのエネルギーは運動エネルギーといいます。運動エネルギーは通常は摩擦や衝突などで減っていきますが、もし運動エネルギーが減らない状態で物体が運動していればその運動は永続的に続きます。その法則をエネルギー保存の法則といいます。今回はエネルギー保存の法則に基づく永続的なアニメーションを作ってみたいと...
単位時間によるアニメーションの描写
- 2023/08/31
- 22:27
JavaScriptのCanvasによるアニメーションはrequestAnimationFrameを利用した場合、60fps（１秒間に60回描写）のアニメーションになりますfps自体を変えてアニメーションの描写の速度を変更したりすることができますが、それは処理が増えてブラウザでの描写が重くなったりすることもありますそこでアニメーションの動きを表すコードに時間に相当する変数があれば、その時間の単位を変えることでfpsを変えずにスムーズにアニメーショ...
透明度を利用したアニメーション
- 2023/07/31
- 22:58
JavaScriptのCnvas上アニメーションはclearRectメソッドを利用して描写をリセットして断続的なアニメーション描写を行うことができますが、Canvasの背景色と同じ色と同じサイズのfillRectメソッドを用いることで同じような描写ができます。ここでfillRectメソッドを用いる利点はfillRectメソッドの描写をアニメーションの表現に利用できることです。半透明の矩形を重ねる描写通常fillRectメソッドは塗りつぶした矩形を描写するメソ...
反射するアニメーション
- 2023/06/30
- 22:25
アニメーションは初期条件に沿って描写されるだけではなく、様々な要素によって動きを変えるように設定できます。それによりアニメーションの動きにバリエーションを持たせることができます。今回はCanvasの枠に接することを条件に動きを変える反射するアニメーションを作りたいと思います。反射の処理と条件ここでの反射とは単純に逆方向へと向かう動きと考えます。今回のスクリプトは描写t毎に横方向にvx、縦方向にvyだけアニメ...
放物運動のアニメーション
- 2023/05/31
- 22:17
地球上で斜め方向に物体を投げると、そのまま斜め方向に飛び続けるのではなく山なりに飛んで行って地上に落下します。それは地球上であれば物体には常に重力がかかる、地球の中心へと引っ張られるからです。このような運動を放物運動といいます。放物運動の速度の成分放物運動は鉛直方向（縦方向）と水平方向（横方向）の速度からなる運動です。ですので鉛直方向と水平方向の運動を合わせれば放物運動を表すことができます。鉛直方...
