Easing

A common way to transition between two states in Processing is to use its lerp() method, which performs a linear interpolation between a start value and end value. A supplied parameter between 0 and 1 determines how near the start (0) or end (1) the interpolated value is. This is typically used in animation to move an object between two positions on the screen.

The problem with linear interpolation is that the speed of animation or other transition is constant. More pleasing and useful effects can be produced by varying the speed depending on how near an object is to its start or end position. Commonly, an animated transition might start slowly, speed up during transition and then slow down again as it approaches its end point. This is known as easing.

Using easing in Processing

To use the Ease class in your sketches, you should import it into your sketch with the line

import org.gicentre.utils.move.Ease;

There are a range of easing functions available that control interpolation behaviour. For a full list, see the Ease API reference. See also, the EaseExample sketch supplied in the examples folder of the giCentre Utilities library.

To use an easing function in your sketch, call one of the Ease methods suppling a number between 0 and 1. The method will return a new number between 0 and 1 that represents the eased transition value. This can then be given to lerp() or some other linear interpolator. For example:

import org.gicentre.utils.move.Ease;    // For easing functions.

// Sketch to demonstrate an easing function to control non-linear animation.
// Version 1.2, 4th November, 2013.
// Author Jo Wood.

static final float RADIUS=15;  // Size of animated disc in pixels.
float t;                       // Time scaled between 0-1.
float tInc;                    // Change in time in each animation frame.

// Initialises the sketch in which animated disc is shown.
void setup()
{
  size(500,80);
  noStroke();
  fill(220,160,160);

  t=0;
  tInc = 0.01;
}

// Animates the disc between the left and right of the sketch.
void draw()
{
  background(255);
  
  // Increment t (time) to oscillate between 0 and 1.
  if (t<=0)
  {
    tInc = abs(tInc);
  }
  else if (t >=1)
  {
    tInc = -abs(tInc);
  }
  
  t+=tInc; 
 
  // The lerp() method is used to animate between the left and right
  // of the window. The Ease method is used to modify t to give a 
  // non-linear value between 0 and 1.
  ellipse(lerp(RADIUS,
               width-RADIUS,Ease.quinticBoth(t)), 
               height/2, RADIUS*2,RADIUS*2);
}

Cyclic transitions

Sometimes you may wish to cycle an animation backwards and fowards between two states. For easing functions that are asymmetrical (i.e. the change in speed at the start of the transition is different to the change in speed at the end), it may be necessary to reverse direction of the function for a 'return journey'. This can be achieved simply by using the two-parameter version of these functions where the second parameter is a number that if positive will ease 'forwards', and if negative, will ease 'backwards'. For example

Ease.sinIn(t,-1);     // Reverse of sinIn equivalent to sinOut(t)
Ease.cubicOut(t,-1);  // Reverse of cubicOut equivalent to cubicIn(t);
Ease.bounceOut(t,1);  // Normal direction of bounceOut equivalent to BounceOut(t)