跳ね返り運動と反発係数
- 2023/10/30
- 22:35
前回はエネルギーを保存して永久的に跳ね続ける運動のアニメーションを作りましたが、実際の跳ね返り運動はいずれ停止しますそれは空気抵抗や衝突などの影響でエネルギーを失い運動のためのエネルギーがなくなるからです今回は衝突の際のエネルギーの変化を運動に反映させるアニメーションを作成したいと思います反発係数と運動の変化運動している物体がある物体に衝突した際に反発力が発生して運動に変化が起こりますこの反発の前...
エネルギー保存とアニメーション
- 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だけアニメ...
