dev.enekoalonso.com » deceleration http://dev.enekoalonso.com having fun with code Wed, 12 Oct 2011 21:40:17 +0000 en hourly 1 Acceleration: slow down problem http://dev.enekoalonso.com/2009/01/20/acceleration-slow-down-problem/ http://dev.enekoalonso.com/2009/01/20/acceleration-slow-down-problem/#comments Wed, 21 Jan 2009 06:34:54 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=264 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:

a=\frac{v^2 - v_0^2}{2*s}

a=\frac{-50^2}{2*400}=-3.13

In Javascript:

  1. 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

  1. var Brake = new Class({
  2.   Extends: Thread,
  3.  
  4.   initialize: function(options) {
  5.     this.parent(options);
  6.     this.item = $('item');
  7.     this.speed = 50;
  8.     this.finalSpeed = 0;
  9.     this.brakingSpace = 400;
  10.     this.currentPos = 0;
  11.  
  12.     this.acceleration = (Math.pow(this.finalSpeed,2) – Math.pow(this.speed,2)) / (2*this.brakingSpace);
  13.     $('acceleration').set('html', 'Acceleration: ' + this.acceleration.toFixed(2) + ' px/s<sup>2</sup>');
  14.   },
  15.  
  16.   execute: function() {
  17.     if (this.speed < 0) {
  18.       this.stop();
  19.       return;
  20.     }
  21.     this.item.setStyles({left: this.currentPos});
  22.     $('position').set('text', 'Position: ' + this.currentPos.toFixed(2) + ' px');
  23.     $('speed').set('text', 'Speed: ' + this.speed.toFixed(2) + ' px/s');
  24.  
  25.     this.speed      += this.acceleration;
  26.     this.currentPos += this.speed;
  27.   }
  28.  
  29. });

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:

s=v - \frac{1}{2}a

Or in Javascript:

  1. this.currentPos += this.speed – 0.5*this.acceleration;

Here is the modified code:

  1. execute: function() {
  2.   this.speed += this.acceleration;
  3.   this.currentPos += this.speed – 0.5*this.acceleration;
  4.  
  5.   if (this.speed < 0) {
  6.     this.stop();
  7.     return;
  8.   }
  9.   this.item.setStyles({left: this.currentPos});
  10.   $('position').set('text', 'Position: ' + this.currentPos.toFixed(2) + ' px');
  11.   $('speed').set('text', 'Speed: ' + this.speed.toFixed(2) + ' px/s');
  12. }

Of course, now the demo is accurate :) Thanks Jacob.

Related Posts:

  • No Related Post
]]> http://dev.enekoalonso.com/2009/01/20/acceleration-slow-down-problem/feed/ 2