У меня есть одна точка (а), которая с ускорением движется к другой точке (б). В середине пути мне нужно инвертировать a
ускорение, поэтому в конце этого пути оно должно иметь те же координаты, что и b
. Не могу понять, что я делаю не так, пожалуйста, помогите:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="id" width="1000" height="1000" style="border: 1px solid black;"></canvas>
<script>
(function(){
var canvas = document.getElementById('id');
var ctx = canvas.getContext('2d');
var fps = 10;
var p = {x:10, y: 10, force: {x: 0, y:0}, acceleration: 2};
var p2 = {x: 200, y:20};
function distance(p1, p2) {
return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
}
function length(p1) {
return Math.sqrt(Math.pow(p1.x, 2) + Math.pow(p1.y, 2));
}
function canStop(p1, p2) {
var dist = distance(p1, p2);
var v0 = length(p1.force);
var vx = 0;
var ax = (v0 * v0) / (dist);
return ax < p1.acceleration;
}
function step(timestamp) {
ctx.clearRect(0, 0, 1000, 1000);
var dist = distance(p, p2);
var vector = {x: p2.x - p.x, y: p2.y - p.y};
var len = length(vector);
var acceleration = dist > p.acceleration ? p.acceleration : dist;
var vStep = (len === 0 ? 0 : ( acceleration / len)) * (canStop(p, p2) ? 1 : -1);
p.force.x += vector.x * vStep;
p.force.y += vector.y * vStep;
p.x += p.force.x;
p.y += p.force.y;
draw(p);
draw(p2);
}
setInterval(function(){
window.requestAnimationFrame(step);
}, 1000 / fps)
function draw(p) {
ctx.beginPath();
ctx.arc(p.x, p.y, 10, 0, Math.PI * 2, false); // Earth orbit
ctx.stroke();
}
})()
</script>
</body>
</html>