9、摩擦力

最新推荐文章于 2024-03-14 20:15:08 发布

奇遇世界

最新推荐文章于 2024-03-14 20:15:08 发布

阅读量710

点赞数 1

本文链接：https://blog.csdn.net/late_in_autumn/article/details/92735645

版权

摩擦力是与速度向量相反的力，模拟摩擦力时，沿着速度向量的方向减去与摩擦力相等的大小。这里注意的一点，不能分别在 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 ;
                }
                // start
                let context = canvas.getContext("2d");
                drawScreen(canvas, context);
            }
 
            // write your codes
            function 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 ;
                }
                // start
                let context = canvas.getContext("2d");
                drawScreen(canvas, context);
            }
 
            // write your codes
            function 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>