Foreword
After resolving the movement and collision issues, in order to allow more natural movement of our environment, the need for some environmental factor, such as the common acceleration of gravity and simulate friction.
Read this before you are asked to lay in front of the base.
They have limited ability to welcome people to discuss cattle, criticism.
Acceleration of gravity
[Science] is a case where a gravitational acceleration by gravity of the object has an acceleration. Also known as free-fall acceleration, expressed in g. Vertically downward direction. Generally refers to an object near the ground by the action of gravity falling in a vacuum acceleration, denoted by g. For ease of calculation, which is approximately the standard value is usually taken to be 980 cm / sec quadratic or quadratic 9.8 m / sec.
The real object is a quality, so its gravitational acceleration due to gravity, and our computer abstract objects and no quality, there is no gravity all said, we are here to say just borrowed the concept of gravitational acceleration on the physical, It is actually a man defined direction toward the positive y-axis acceleration axle .
In fact, very simple to implement, is to set a positive acceleration, each time are plotted on the y-axis is added to the object speed.
The following example is a ball, it will automatically fall by gravity gravitational acceleration, you can use the keyboard up, down, left and right to change its acceleration in four directions. The core code is as follows:
Complete example: acceleration of gravity demo
(function drawFrame() {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
vx += ax;
vy += ay;
vy += gravity;
ball.x += vx;
ball.y += vy;
ball.draw(context);
}());Analog friction
[Popular Science] force that opposes the relative motion (relative motion or tendency) of an object is called friction. A direction opposite to a direction of friction relative motion of the object (or the tendency of relative movement) of. In a another object the object surface slip occurs between the contact surfaces thereof hinder the relative movement of friction, sliding friction is called. The roughness of the sliding friction contact surface size and the size of the size and pressure. The greater the pressure, the rougher the contacting surfaces, the sliding frictional force is larger.
The previous example, there are some very unnatural scenes, such as follow the mouse's arrow , due to the acceleration is always present, resulting in the movement never stops, but in reality (space exceptions), because of the relationship between a variety of friction, which is impossible happened.
Computer no friction, we just learn from the concept of physics simulation of a simulation of friction , force remember that this is not a physical sense.
DEFINITIONS analog are similar friction anthropogenic predetermined value, and sliding friction defined opposite to the direction of movement, the speed of the object reaches zero cut, it does not change the direction of motion.
Note: The definition of the object can only rate and subtracting the value of a certain size, are not in x, y-axis to reduce the velocity vector. If the object is along an angle of motion, the object will be reduced to zero in a speed of the arbor, strange phenomenon continues movement in another axis.
The right approach
We will simulate friction with variable friction said random examples will demonstrate the speed of the ball from sports to stop the process, the core code is as follows, the basic idea:
Speed and rate of science [] are two different concepts. Velocity is a vector, having a magnitude and direction; refers to the rate of the speed of movement of the object pure, scalar, no direction.
- After summing the squares vx and vy, and then obtains the rate of evolution; obtained by calculating the angle Math.atan2 (vy, vx);
- From the simulation rate minus friction, but do not let the rate becomes negative;
- The sine and cosine function by decomposition rate and the speed of the x and y axes.
Complete example: Analog correct calculation of friction
(function drawFrame() {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
// 先求速率
let speed = Math.sqrt(vx ** 2 + vy ** 2);
// 算出角度
const angle = Math.atan2(vy, vx);
// 判断运动是否停止
if (speed > friction) {
// 没有停止则减去模拟摩擦力
speed -= friction;
} else {
speed = 0;
}
// 重新分解为x轴和y轴上的速度
vx = Math.cos(angle) * speed;
vy = Math.sin(angle) * speed;
ball.x += vx;
ball.y += vy;
ball.draw(context);
}());Simple approach
The correct approach is cumbersome, it is a re-synthesis of synthetic decomposition process, so that the consumption of computing resources is relatively large, but we probably do not need such a precise approach, as long as each is multiplied by the speed in all directions a 0 to 1 between the number can simply simulate the effect of frictional force. So we define simulated friction coefficient .
DEFINITIONS analog value of the coefficient of friction is artificial and will continue to decrease the speed ratio in all directions when the object is moving, the respective directions infinitely close to zero velocity.
The above example of a transformation from the right way, is defined as an analog Friction coefficient of friction, it refers to 0.9, as long as the speed of movement will be the x and y axis direction can be multiplied by this value, reducing the number of operations. The core code is as follows:
Complete example: Analog friction correct calculation
Note: There is one detail, speed and constantly multiplying factor will result in a speed infinitely close to but not equal to 0 , in order to avoid doing meaningless calculations, you can determine whether the speed has little to invisible value, to improve performance.
(function drawFrame() {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
// 判断速度大小以减少不必要的计算
if (Math.abs(vx) > 0.001) {
// 减少速度
vx *= friction;
ball.x += vx;
}
if (Math.abs(vy) > 0.001) {
vy *= friction;
ball.y += vy;
}
ball.draw(context);
}());