5.8 La técnica Easing

Easing es una técnica que se utiliza para suavizar los movimientos de los objetos que siguen al ratón y que sea más fluidos. Se necesitan dos valores, el valor actual y el valor hacia el cual avanzar.

float x;
float easing = 0.1;

void setup(){
  size(580, 580);
}

void draw(){
  float targetX = mouseX;
  x += (targetX - x) * easing;
  
  ellipse(x, height/2, 25, 25);
  println(targetX + " :" + x);
} 

El código de arriba, consigue que una elipse siga los movimientos del ratón en horizontal, modificando el valor de la variable easing conseguiremos que ese seguimiento sea más o menos rápido.

Todo el secreto de esta técnica se encuentra en la línea:

 x += (targetX - x) * easing;

Lo que le decimos a Processing es que la variable global x es igual a x + targetX (la posición actual del ratón) - x por easing (0.1 en este caso). Como la variable x cambia su valor cada frame, este se re-calcula y actualiza constantemente creando este efecto de movimiento suavizado.

Recuerda que += es una manera de ahorrar código, en lugar de escribir x = x + y, puedes escribir x += y, que hace lo mismo, pero escribimos menos código. De la misma manera sirve para una resta. x = x - y, es igual que x -= y.

Easing siempre debe tener un valor entre 0 y 1, donde 0 no existe movimiento y 1 no tiene ningún retraso. Prueba a modificar el valor de la variable easing para que compruebes su efecto.

En la derecha de la imagen superior tienes un ejemplo con los cálculos de lo que está sucediendo en la variable x a medida que avanzamos frame a frame.

Esta técnica es muy utilizada para suavizar los movimientos de los programas de muy diferentes maneras, vamos a ver otro ejemplo.

En este caso, para que el efecto pueda ser horizontal y vertical, necesitamos cuatro variables más la variable easing para hacer que nuestro programa funcione. En este caso una línea seguirá los movimientos del ratón. También estamos utilizando la función dist para calcular la distancia y darle un grosor diferente a la línea, dependiendo de la velocidad a la que muevas el ratón por la pantalla.

float x;
float y;
float px;
float py;
float easing = 0.05;

void setup(){
  size(580, 580);
  stroke(0, 102);
}

void draw(){
  float targetX = mouseX;
  x +=(targetX -x)* easing;
  float targetY = mouseY;
  y +=(targetY -y) * easing;
  float grosor = dist(x, y, px, py);
  strokeWeight(grosor);
  line(x, y, px, py);
  px = x;
  py = y;
}