9、摩擦力
? ? 摩擦力是與速度向量相反的力，模擬摩擦力時，沿著速度向量的方向減去與摩擦力相等的大小。這里注意的一點，不能分別在 x、y 軸上減小速度向量，因為如果物體正沿著某個角度運動，就會出現物體在某條軸上的速度降為零，而繼續在另一條軸上運動的奇怪現場。
?
1、將 vx 與 vy 平方后求和，再開平方；再通過計算 Math.atan2(vy, vx) 獲得角度：
let speed = Math.sqrt(vx * vx + vy * vy); let angle = Math.atan2(vy, vx);2、從速度中減去摩擦力大小，判斷速度不能為負值，否則會逆轉速度向量。如果摩擦力大于速度，則速度變為零：
if(speed > friction) {speed -= friction; } else {speed = 0; }3、通過正余弦函數將角速度轉回 vx、vy 的格式：
vx = speed * Math.cos(angle); vy = speed * Math.sin(angle);?
完整代碼如下：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width"><title></title><style>*{margin: 0;padding: 0}body {background-color: #eee}canvas {background-color: #fff}</style> </head> <body><canvas id="canvas" width="600" height="400">Your browser does not support HTML5 Canvas.</canvas><script>(function(){window.addEventListener("load", eventWindowLoaded, false);function eventWindowLoaded(){canvasApp();}function canvasSupport(e){return !!e.getContext;}function canvasApp(){let canvas = document.getElementById("canvas");if(!canvasSupport(canvas)){return ;}// startlet context = canvas.getContext("2d");drawScreen(canvas, context);}// write your codesfunction drawScreen(canvas, context){let ball = new Ball();let vx = Math.random() * 10 - 5,vy = Math.random() * 10 - 5;let friction = 0.1;let speed = Math.sqrt(vx * vx + vy * vy);let angle = Math.atan2(vy, vx);ball.x = canvas.width / 2;ball.y = canvas.height / 2;(function drawFrame() {window.requestAnimationFrame(drawFrame, canvas);context.clearRect(0, 0, canvas.width, canvas.height);if (speed > friction) {speed -= friction} else {speed = 0;}vx = speed * Math.cos(angle);vy = speed * Math.sin(angle);ball.x += vx;ball.y += vy;ball.draw(context);} ())}})();</script><script>function Ball(radius, color) {if (radius === undefined) {radius = 40;}if (color === undefined) {color = "#ff0000";}this.x = 0;this.y = 0;this.color = color;this.radius = radius;}Ball.prototype.draw = function(context) {context.save();context.translate(this.x, this.y);context.fillStyle = this.color;context.beginPath();context.arc(0, 0, this.radius, 0, 360 * Math.PI / 180, false);context.closePath();context.fill();context.restore();}</script> </body> </html>?
? ? 我們可以實現模擬摩擦力的一種簡便方法，該方法只需兩行簡單的乘法組成。將 x、y 軸上的速度向量乘以一個百分數即可，一個接近 0.9 的系數就能夠很好地模擬出摩擦力的效果。
?? ?這樣，在每一幀中，vx 和 vy 的值都會降為上一幀中對應值的 80%或90%。理論上，速度向量會無限接近零，而永遠不會等于零。不過，計算機在表達小數時只會精確到某個特定的精度，所以最終結果也會變為零。
? ? 這一方法的好處是速度向量永遠不會變為負數。可以比較 vx 與一個指定的較小的值從而節省一些不必要的計算。
? ??
if (Math.abs(vx) > 0.001) {vx *= friction;ball.x += vx; }if (Math.abs(vy) > 0.001) {vy *= friction;ball.y += vy; }?
完整代碼如下：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width"><title></title><style>*{margin: 0;padding: 0}body {background-color: #eee}canvas {background-color: #fff}</style> </head> <body><canvas id="canvas" width="600" height="400">Your browser does not support HTML5 Canvas.</canvas><script>(function(){window.addEventListener("load", eventWindowLoaded, false);function eventWindowLoaded(){canvasApp();}function canvasSupport(e){return !!e.getContext;}function canvasApp(){let canvas = document.getElementById("canvas");if(!canvasSupport(canvas)){return ;}// startlet context = canvas.getContext("2d");drawScreen(canvas, context);}// write your codesfunction drawScreen(canvas, context){let ball = new Ball();let vx = Math.random() * 10 - 5,vy = Math.random() * 10 - 5;let friction = 0.95;ball.x = canvas.width / 2;ball.y = canvas.height / 2;(function drawFrame() {window.requestAnimationFrame(drawFrame, canvas);context.clearRect(0, 0, canvas.width, canvas.height);if (Math.abs(vx) > 0.01) {vx *= friction;ball.x += vx;}if (Math.abs(vy) > 0.01) {vy *= friction;ball.y += vy;}ball.draw(context);} ())}})();</script><script>function Ball(radius, color) {if (radius === undefined) {radius = 40;}if (color === undefined) {color = "#ff0000";}this.x = 0;this.y = 0;this.color = color;this.radius = radius;}Ball.prototype.draw = function(context) {context.save();context.translate(this.x, this.y);context.fillStyle = this.color;context.beginPath();context.arc(0, 0, this.radius, 0, 360 * Math.PI / 180, false);context.closePath();context.fill();context.restore();}</script> </body> </html>?
總結
- 上一篇： Qt中添加背景图片的方法
- 下一篇： 直流无刷电机的调试与代码开源（配套资源）