Simple harmonic motion

Simple harmonic motion is the most basic and simple mechanical vibration. When an object moves in simple harmonic motion, the force it receives is proportional to the displacement, and the force always points to the equilibrium position.

The realization of simple harmonic motion can be realized by sine curve, which is a kind of sine proportion curve from mathematical trigonometric function. It's shaped like a perfect sea wave, changing in proportion to the sine of a trigonometric function.

The application of sine curve in canvas makes the figure smooth in the process of movement or change, and the increasing radian produces values only in the range of - 1 and 1 in the characteristics of sine curve, thus forming a natural circulation effect.

For example:

<html>
<body>
    <canvas id="myCanvas" width="200" height="200" style="border: 1px solid">
        Your browser does not support canvas, please upgrade your browser
    </canvas>
</body>
</html>
<script>
    //Prepare canvas
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    var angle = -1;

    setInterval(function(){
        var x = 100 +  Math.sin(angle) * 50;
        var y = 100;
        var r = 20;

        ctx.clearRect(0,0,200,200);
        ctx.beginPath();
        ctx.arc(x,y,r,0,2 * Math.PI);
        ctx.fill();

        angle += 0.1;
    },100)
</script>
Your browser does not support canvas, please upgrade your browser

Changing the r value smoothes the size change of the circle:

<html>
<body>
    <canvas id="myCanvas" width="200" height="200" style="border: 1px solid">
        Your browser does not support canvas, please upgrade your browser
    </canvas>
</body>
</html>
<script>
    //Prepare canvas
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    var angle = -1

    setInterval(function(){
        var x = 100
        var y = 100
        var r = 20 +  Math.sin(angle) * 20

        ctx.clearRect(0,0,200,200)
        ctx.beginPath();
        ctx.arc(x,y,r,0,2 * Math.PI);
        ctx.fill();

        angle += 0.1;
    },100)
</script>
Your browser does not support canvas, please upgrade your browser

Circular motion

In physics, circular motion refers to a motion whose trajectory is a circle or a part of a circle.

Main calculation method:

x =  centerX + Math.sin(angle) * radius
y =  centerY + Math.cos(angle) * radius

For example:

<html>
<body>
    <canvas id="myCanvas" width="200" height="200" style="border: 1px solid">
        Your browser does not support canvas, please upgrade your browser
    </canvas>
</body>
</html>
<script>
    // Prepare canvas
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var angle = - 1; 
    // the angle of movement. Control the angle to make things move
    var centerx = 100; 
    // set the center coordinate of the circle track
    var centerY = 100;
    var radius = 50; 
    // path radius
    setInterval(function () {
        ctx.clearRect(0, 0, 200, 200)
        // every coordinate of the circle track
        var x = centerX + Math.sin(angle) * radius;
        var y = centerY + Math.cos(angle) * radius;
        // ball
        ctx.beginPath();
        ctx.arc(x, y, 10, 0, 2 * Math.PI);
        ctx.fill();
        // progressive angle
        angle += 0.1;
    }, 100)
</script>
Your browser does not support canvas, please upgrade your browser

Elliptical motion

The only difference between an ellipse and a positive circle is that the distance from any point on the positive circle to the center of the circle is the same, but the ellipse is not the same.

Main calculation method:

x =  centerX + Math.sin(angle) * radiusX  
y =  centerY + Math.cos(angle) * radiusY

For example:

<html>
<body>
    <canvas id="myCanvas" width="200" height="200" style="border: 1px solid">
        Your browser does not support canvas, please upgrade your browser
    </canvas>
</body>
</html>
<script>
    //Prepare canvas
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    // the angle of movement. Control the angle to make things move
    var angle = - 1; 
    // set the center coordinate of the circle track
    var centerX = 100; 
    var centerY = 100;
    // radius of track horizontal axis
    var radiusX = 80;
    // the longitudinal radius of the track
    var radiusY = 50;
    setInterval(function () {
        ctx.clearRect(0, 0, 200, 200)
        //every coordinate of the circle track
        var x = centerX + Math.sin(angle) * radiusX;
        var y = centerY + Math.cos(angle) * radiusY;
        //ball
        ctx.beginPath();
        ctx.arc(x, y, 10, 0, 2 * Math.PI);
        ctx.fill();
        //Progressive angle
        angle += 0.1;
    }, 100)
</script>

Unlike circular motion, elliptical motion is calculated based on two radius values (radiusX = 80, radiusY = 50):

Your browser does not support canvas, please upgrade your browser

Uniform linear motion

If the moving distance of an object is equal in each same period of time, then we call this phenomenon equal velocity linear motion, which is called equal velocity motion for short.

Main calculation method:

//Lateral movement
x =  x + v

//Longitudinal movement
y =  y + v

//Oblique movement
x =  x + vx
y =  y + vy

//Move to an angle
x =  x + v * Math.cos(angle)
y =  y + v * Math.sin(angle)

For example:

<html>
<body>
    <canvas id="myCanvas" width="200" height="200" style="border: 1px solid">
        Your browser does not support canvas, please upgrade your browser
    </canvas>
</body>
</html>
<script>
    //Prepare canvas
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    var v = 1
    var x1 = 0
    var y1 = 0

    var x2 = 0
    var y2 = 0
    var vx = 1
    var vy = 1.5

    var v3 = 1
    var x3 = 0
    var y3 = 0
    // 30 degree angle
    var angle = 30 

    setInterval(function () {
        ctx.clearRect(0, 0, 200, 200);

        //Lateral movement (red)
        x1 = x1 + v;
        ctx.beginPath();
        ctx.fillStyle = "red";
        ctx.arc(x1, 100, 10, 0, 2 * Math.PI);
        ctx.fill();

        //Vertical motion (blue)
        y1 = y1 + v;
        ctx.beginPath();
        ctx.fillStyle = "blue";
        ctx.arc(100, y1, 10, 0, 2 * Math.PI);
        ctx.fill();

        //Diagonal movement (green)
        x2 = x2 + vx
        y2 = y2 + vy
        ctx.beginPath();
        ctx.fillStyle = "green";
        ctx.arc(x2, y2, 10, 0, 2 * Math.PI);
        ctx.fill();

        //Move to an angle (black)
        var radians = angle * Math.PI / 180;
        x3 = x3 + v3 * Math.cos(radians)
        y3 = y3 + v3 * Math.sin(radians)
        ctx.beginPath();
        ctx.fillStyle = "black";
        ctx.arc(x3, y3, 10, 0, 2 * Math.PI);
        ctx.fill();

        if (x1 > 200) x1 = 0;
        if (y1 > 200) y1 = 0;
        if (x2 > 200 || y2 > 200) x2 = y2 = 0;
        if (x3 > 200 || y3 > 200) x3 = y3 = 0;
    }, 10)
</script>
Your browser does not support canvas, please upgrade your browser

Uniform acceleration linear motion

If an object moves along a straight line and the acceleration remains constant during the motion, it is said that the object is moving in a straight line with uniform acceleration.

In the process of motion, the ratio of the change of the speed of an object to the time taken for the change is called acceleration (expressed with a). Its meaning is to express the physical quantity of the change of the speed of a particle, which belongs to a vector and has both size and direction. From a computational point of view, acceleration is the value added to the velocity vector.

Calculation method:

//Acceleration speed
v = v + av
<html>
<body>
    <canvas id="myCanvas" width="200" height="200" style="border: 1px solid">
        Your browser does not support canvas, please upgrade your browser
    </canvas>
</body>
</html>
<script>
    //Prepare canvas
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    // acceleration
    var av = 0.01

    var v = 1
    var x = 0
    var y = 0

    setInterval(function () {
        ctx.clearRect(0, 0, 200, 200);

        //Acceleration speed
        v = v + av;

        //Lateral movement (red)
        x = x + v;
        ctx.beginPath();
        ctx.fillStyle = "red";
        ctx.arc(x, 100, 10, 0, 2 * Math.PI);
        ctx.fill();

        //Vertical motion (blue)
        y = y + v;
        ctx.beginPath();
        ctx.fillStyle = "blue";
        ctx.arc(100, y, 10, 0, 2 * Math.PI);
        ctx.fill();

        if (x > 200) x = 0;
        if (y > 200) y = 0;
        if (v > 10) v = 0.01;
    }, 10)
</script>
Your browser does not support canvas, please upgrade your browser

The motion of free falling body belongs to the vertical downward linear motion with uniform acceleration. The acceleration of free falling body is called the acceleration of gravity, which is expressed in G.


Flat throw motion

When an object has a certain initial velocity and is thrown horizontally, and the air resistance is ignored, the motion only under the action of gravity is called the horizontal throwing motion.

The essence of flat throwing is the joint motion of uniform linear motion and free falling body motion, so the flat throwing motion follows the law of these two separate motions.

Calculation method:

//Uniform linear motion
x = x + vx;

//Uniform acceleration linear motion
vy = vy + g;
y = y + vy;

For example:

<html>
<body>
    <canvas id="myCanvas" width="200" height="200" style="border: 1px solid">
        Your browser does not support canvas, please upgrade your browser
    </canvas>
</body>
</html>
<script>
    //Prepare canvas
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    var x = 0, y = 0
    var g = 0.1
    var vx = 5
    var vy = 0

    setInterval(function () {
        //Uniform linear motion
        x = x + vx;

        //Uniform acceleration linear motion
        vy = vy + g;
        y = y + vy;


        ctx.clearRect(x, y, 200, 200);
        ctx.beginPath();
        ctx.arc(x, y, 5, 0, 2 * Math.PI);
        ctx.fill();

        if (x > 200) {
            x = y = 0;
            g = 0.1
            vy = 0
        }
    }, 100)
</script>
Your browser does not support canvas, please upgrade your browser
Like The Article To View All

All Comments

Leave a Reply Cancel Reply

Tips: Your email address will not be disclosed!

If you can't see clearly,please click to change...