HTML5 Canvas : Motion And Trajectory
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>
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>
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>
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):
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>
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>
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>
- Link : https://www.zdyla.com/en/post/html5-canvas-motion-trajectory.html
- Copyright Notice : Unless otherwise stated, please contact the author for authorization and indicate the source!