Moving objects in computing can be handled easily keeping a speed variable, let’s say in pixels per second (object.speed.x = 10). Then, on every step of the animation, we change the object position with this amount divided by the number of frames per second we are processing (object.x += object.speed.x / fps). Acceleration can be achieved easily to. On every step of the animation we can modify the speed with an acceleration factor (object.speed.x += object.acceleration.x).
Slow down problem
Today at work I’ve been trying to solve this problem: Giving an object moving at 50 px/s I want it to slow down to 0 px/s in exactly 400px. How can we calculate the acceleration for this? I need an amount to subtract to the speed on every step, so by the time the object has moved 400px the speed is 0.
There are a few equations of motion that could be applied. In this case, we don’t care about how much time does it take to stop the object. So the formula is:
In Javascript:
-
this.acceleration = (Math.pow(this.finalSpeed,2) – Math.pow(this.speed,2)) / (2*this.brakingSpace);
Well, still it doesn’t work perfectly on my demo. The object, a 10px square div, decelerates properly, but stops at 375px instead of 400px. I’ll keep working on it.
The code
-
var Brake = new Class({
-
Extends: Thread,
-
-
initialize: function(options) {
-
this.parent(options);
-
this.item = $('item');
-
this.speed = 50;
-
this.finalSpeed = 0;
-
this.brakingSpace = 400;
-
this.currentPos = 0;
-
-
this.acceleration = (Math.pow(this.finalSpeed,2) – Math.pow(this.speed,2)) / (2*this.brakingSpace);
-
$('acceleration').set('html', 'Acceleration: ' + this.acceleration.toFixed(2) + ' px/s<sup>2</sup>');
-
},
-
-
execute: function() {
-
if (this.speed < 0) {
-
this.stop();
-
return;
-
}
-
this.item.setStyles({left: this.currentPos});
-
$('position').set('text', 'Position: ' + this.currentPos.toFixed(2) + ' px');
-
$('speed').set('text', 'Speed: ' + this.speed.toFixed(2) + ' px/s');
-
-
this.speed += this.acceleration;
-
this.currentPos += this.speed;
-
}
-
-
});
If I modify the position before adjusting the speed, the object goes farther than 400px. If I update the speed first (like above), the object stops before reaching 400px.
Problem solved
Turns out I wasn’t calculating the new position properly. The formula to calculate the new position is:
Or in Javascript:
-
this.currentPos += this.speed – 0.5*this.acceleration;
Here is the modified code:
-
execute: function() {
-
this.speed += this.acceleration;
-
this.currentPos += this.speed – 0.5*this.acceleration;
-
-
if (this.speed < 0) {
-
this.stop();
-
return;
-
}
-
this.item.setStyles({left: this.currentPos});
-
$('position').set('text', 'Position: ' + this.currentPos.toFixed(2) + ' px');
-
$('speed').set('text', 'Speed: ' + this.speed.toFixed(2) + ' px/s');
-
}
Of course, now the demo is accurate :) Thanks Jacob.
When calculating the new position you need to take the acceleration into account, as it is not constant over the small distance you’re moving the object. Take a look at equation 5 on the Wiki page you linked.
Try something like
this.currentPos += this.speed – 0.5 * this.acceleration;
Thanks Jacob! You were right. I was calculating the acceleration properly, but I wasn’t updating the position right.
I’ve updated the code (show above) and now it works like a charm.