⇪

Animación y fricción

facebook-svg gplus-svg twitter-svg

En Física se conoce como fuerza de fricción a la que realiza una oposición al desplazamiento de una superficie sobre otra, o a aquélla opuesta al comienzo de un movimiento.
En canvas podemos simular la fricción haciendo que la velocidad de la pelota disminuya, con cada fotograma, en un tan porciento.

pelota.vx *= pelota.friccion;

donde pelota.friccion = 0.98; Esto quiere decir que la velocidad de la pelota se queda en un 98% de su valor anterior. Prácticamente esto significa que la pelota no llegará a pararse nunca. ( Zenón y la piedra )

Para que esto no pase podemos añadir esta línea de código: 

if(pelota.vx < .01){pelota.vx = 0;}

Alternativamente podemos parrar la animación: 

if(pelota.vx < .01){ window.cancelAnimationFrame(el_Id);}
Su navegador no soporta canvas :( 

var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width = 300;
var ch = canvas.height = 300;
var rad = Math.PI / 180;

var r = 25;

function Pelota(r) {
  this.r = r;
  this.x = r;
  this.y = r;
  this.vx = 2;
  this.vy = 3;
  this.color = "#6ab150";
  this.friccion = .98;  
}

Pelota.prototype.dibujar = function(ctx) {
  ctx.save();
  ctx.fillStyle = this.color;
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
  ctx.fill();
  ctx.restore();
}

Pelota.prototype.actualizar = function() {
  this.x += this.vx;
  this.y += this.vy;
}

var pelota = new Pelota(r);


function Animar() {
  el_Id = window.requestAnimationFrame(Animar);
  ctx.clearRect(0, 0, cw, ch);
  
  //////////////////////////////
  pelota.vx *= pelota.friccion;
  pelota.vy *= pelota.friccion;
  if(pelota.vx < .01){pelota.vx = 0;}
  /////////////////////////////
 
  pelota.actualizar();
  pelota.dibujar(ctx);
  //if(pelota.vx < .01){ window.cancelAnimationFrame(el_Id);}
}
el_Id = window.requestAnimationFrame(Animar);
Su navegador no soporta canvas :(

Vealo en codepen.io