w3.unpo<code>todo

Cuando utilizamos curvas de velocidad (easing) la velocidad de la pelota es proporcional con la distancia. En el caso de los resortes (springs) la aceleración es proporcional con la distancia.

Resortes en una sola dimensión

A continuación utilizamos la misma pelota de siempre:

function Pelota(r) {
   this.r = r;
   this.x = 2 * r;
   this.y = cy;
   this.destino_x = cx; 
   this.destino_y = this.y; 
   this.vx = 0;
   this.color = "#6ab150";
}

Necesitamos establecer un valor para el resorte

var resorte = .01;// spring

Calculamos la distancia entre el centro de la pelota this.x y el punto de destino this.destino_x:

var distancia = (this.destino_x - this.x);

En el caso de los resortes (springs) la aceleración es proporcional con la distancia.

var aceleracion = distancia * resorte;

Después todo va como antes: a la velocidad de la pelota this.vx le sumamos la aceleración:

this.vx += aceleration;

y a la posición de la pelota this.x le sumamos la velocidad.

this.x += this.vx;

See the Pen resortes* #1 by Gabi (@enxaneta) on CodePen.

Resortes y fricción

Lo que hemos visto hasta ahorra es muy interesante pero las cosas no pasan así en realidad. Para que las cosas parezcan reales tenemos que tener en cuenta la fricción. En el siguiente ejemplo la función actualizar se ocupa de este aspecto. Esta vez trabajamos en dos dimensiones.

Pelota.prototype.actualizar = function() {
  var distanciaX = (this.destino_x - this.x);
  var distanciaY = (this.destino_y - this.y);
  var accelerationX = distanciaX * resorte;
  var accelerationY = distanciaY * resorte;
  this.vx += accelerationX;
  this.vy += accelerationY;
  
  this.vx *= friccion;
  this.vy *= friccion;
      
  this.x += this.vx;
  this.y += this.vy;
}

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

Siguiendo al ratón

También podemos utilizar el easing para crear un movimiento un poco extraño siguiendo el ratón. Para esto primero hemos de añadir una función que nos ayuda obtener la posición del ratón encima del canvas

function oMousePos(canvas, evt) {
    var ClientRect = canvas.getBoundingClientRect();
    return { 
      x: Math.round(evt.clientX - ClientRect.left),
      y: Math.round(evt.clientY - ClientRect.top)
	}
}

Queremos detectar la posición del ratón encima del canvas, cuando el ratón pase por encima (on "mousemove",):

canvas.addEventListener("mousemove", function(evt) {
   m = oMousePos(canvas, evt); 
},false);

También queremos que la pelota vuelva en el centro del canvas (cx,cy) cuando el ratón salga del canvas (on "mouseleave"):

canvas.addEventListener("mouseleave", function() {
   m = {x:cx,y:cy}; 
  },false);

Y aquí viene la parte importante: en el código de antes reemplazamos las coordenadas del punto de destino (this.destino_x, this.destino_y) con las coordenadas del ratón (m.x,m.y). Y ya está.

See the Pen resortes + fricción + ratón* #3 by Gabi (@enxaneta) on CodePen.