Animación y aceleración

facebook-svg gplus-svg twitter-svg

Esta es una continuación de animación y velocidad

Animación y aceleración

En Física se conoce como aceleración el cambio que sufre la velocidad de un cuerpo en determinado tiempo.  En animación en lugar de tiempo hablamos de fotogramas, y la aceleración  representa la variación que sufre la velocidad de un objeto con cada fotograma.

Movimiento rectilíneo acelerado

Básicamente al inicio el objeto tiene una velocidad 0 y la aceleración es, en este ejemplo, 0.01.

pelota.vx = 0; 
pelota.aceleracionX =.01;

Con cada fotograma la aceleración produce un cambio ( aumento en este caso ) de la velocidad. La fórmula a recordar es:

pelota.vx += pelota.aceleracionX;
pelota.x += pelota.vx;

See the Pen Aceleración #1* by Gabi (@enxaneta) on CodePen.

Movimiento en ángulo

En el siguiente ejemplo la pelota tiene una aceleración diferente en x y en y, y el código lo dice todo.

pelota.vx += pelota.aceleracionX;
pelota.vy += pelota.aceleracionY;

pelota.x += pelota.vx;
pelota.y += pelota.vy;

See the Pen Aceleración #2* by Gabi (@enxaneta) on CodePen.

Finalmente en este ejemplo no conocemos el valor de la aceleración en x o y, pero conocemos la aceleración de la partícula, y el ángulo de la trayectoria.
En este caso tenemos que calcular la aceleración en x e y. Todo lo demás queda igual. La fórmula a recordar es:

this.aceleracionX = this.aceleracion * Math.cos(this.angulo);
this.aceleracionY = this.aceleracion * Math.sin(this.angulo);

Para recordar esta fórmula fácilmente piense que la aceleracion ( this.aceleracion ) es la hipotenusa de un triangulo cuyos catetos son la aceleración en x ( this.aceleracionX ) y la aceleración en y ( this.aceleracionY )

See the Pen Aceleración #3* by Gabi (@enxaneta) on CodePen.