Easing Functions

Easing functions are mathematical transformations that map linear input values to non-linear output values, fundamentally changing how values progress from a start state to an end state. While commonly associated with animation timing, these functions are essential tools in generative art for controlling any parameter that changes over a domain—whether that domain is time, space, or any other continuous variable.

Linear vs. Non-Linear Interpolation

Linear interpolation (lerp) produces constant rate of change. Given a normalized input t ranging from 0 to 1, linear interpolation simply returns t. The output progresses at a uniform pace, creating mechanical, predictable motion that often feels unnatural to human perception.

Non-linear easing functions transform this relationship by applying mathematical curves to the input value. An easing function takes a normalized time value t (typically 0 to 1) and returns a modified progress value, also typically in the 0 to 1 range. This transformation creates acceleration, deceleration, or more complex motion patterns that mirror natural physics and feel more organic.

Common Easing Types

Easing functions are typically categorized by their acceleration characteristics, which determine how the rate of change evolves over the input domain.

Ease-In

Ease-in functions start slowly and accelerate toward the end. The derivative of the function increases as t approaches 1. These functions create a sense of gathering momentum, useful for objects starting from rest or values emerging from a baseline state.

Ease-Out

Ease-out functions start quickly and decelerate toward the end. The derivative decreases as t approaches 1. These create a settling effect, as if an object is coming to rest or a value is approaching its final state with diminishing energy.

Ease-In-Out

Ease-in-out functions combine both behaviors: they accelerate in the first half and decelerate in the second half. These create smooth, symmetrical transitions that feel balanced and natural, particularly effective for cyclic or reversible motions.

Mathematical Formulations

Different mathematical functions produce distinct easing curves, each with characteristic acceleration profiles and aesthetic qualities.

Polynomial Easing

Polynomial functions raise the input to a power, creating smooth curves with controllable steepness. Quadratic (t²), cubic (t³), quartic (t⁴), and quintic (t⁵) are common choices. Higher powers create more dramatic acceleration curves with longer periods of slow change followed by rapid transitions.

// Quadratic ease-in
const easeInQuad = t => t * t;

// Cubic ease-in
const easeInCubic = t => t * t * t;

// Quartic ease-in
const easeInQuart = t => t * t * t * t;

// Generic polynomial ease-in
const easeInPower = (t, power) => Math.pow(t, power);

Sine-Based Easing

Trigonometric functions provide smooth, wave-like easing curves. Sine-based easing creates gentle acceleration and deceleration that feels particularly organic. These functions are derived from portions of the sine wave, typically using the range from -π/2 to π/2 or 0 to π.

// Sine ease-in
const easeInSine = t => 1 - Math.cos((t * Math.PI) / 2);

// Sine ease-out
const easeOutSine = t => Math.sin((t * Math.PI) / 2);

// Sine ease-in-out
const easeInOutSine = t => -(Math.cos(Math.PI * t) - 1) / 2;

Exponential Easing

Exponential functions create dramatic acceleration curves with very slow starts or endings. These are based on powers of 2 and produce the most extreme easing effects, useful when you need pronounced contrast between slow and fast phases of change.

// Exponential ease-in
const easeInExpo = t => t === 0 ? 0 : Math.pow(2, 10 * (t - 1));

// Exponential ease-out
const easeOutExpo = t => t === 1 ? 1 : 1 - Math.pow(2, -10 * t);

// Exponential ease-in-out
const easeInOutExpo = t => {
  if (t === 0) return 0;
  if (t === 1) return 1;
  if (t < 0.5) return Math.pow(2, 20 * t - 10) / 2;
  return (2 - Math.pow(2, -20 * t + 10)) / 2;
};

Circular Easing

Circular easing is derived from the equation of a circle (x² + y² = 1) and creates smooth curves with moderate acceleration. These functions produce easing that falls between polynomial and exponential in terms of intensity.

// Circular ease-in
const easeInCirc = t => 1 - Math.sqrt(1 - t * t);

// Circular ease-out
const easeOutCirc = t => Math.sqrt(1 - Math.pow(t - 1, 2));

// Circular ease-in-out
const easeInOutCirc = t => {
  if (t < 0.5) return (1 - Math.sqrt(1 - 4 * t * t)) / 2;
  return (Math.sqrt(1 - Math.pow(-2 * t + 2, 2)) + 1) / 2;
};

Applications Beyond Animation

While easing functions originated in animation contexts, they are powerful tools for any generative art application involving parameter interpolation or spatial distribution.

Gradient Generation

Easing functions transform linear gradients into perceptually richer color transitions. By applying an easing function to the gradient position parameter, you can create gradients that linger in certain color regions and transition rapidly through others. This is particularly effective for creating focal points or emphasizing specific hues in a color progression.

function createEasedGradient(ctx, x0, y0, x1, y1, color1, color2, easeFn) {
  const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
  
  // Sample the gradient with easing
  const steps = 20;
  for (let i = 0; i <= steps; i++) {
    const t = i / steps;
    const easedT = easeFn(t);
    const color = lerpColor(color1, color2, easedT);
    gradient.addColorStop(t, color);
  }
  
  return gradient;
}

Radial gradients benefit even more from easing, as the non-linear distribution can create more natural-looking light falloff or atmospheric effects that mimic real-world illumination and depth.

Spatial Distribution

When distributing elements across space—whether particles, shapes, or grid points—easing functions control density and clustering. Linear spacing creates uniform distribution, but eased spacing can concentrate elements in specific regions while maintaining smooth transitions.

// Distribute points with easing for non-uniform density
function distributePoints(count, start, end, easeFn) {
  const points = [];
  for (let i = 0; i < count; i++) {
    const t = i / (count - 1);
    const easedT = easeFn(t);
    const position = start + (end - start) * easedT;
    points.push(position);
  }
  return points;
}

// Example: concentrate points toward the end
const points = distributePoints(50, 0, 800, easeInQuad);

This technique is invaluable for creating visual hierarchies, directing viewer attention, or simulating natural phenomena like gravitational clustering or atmospheric density gradients.

Parameter Mapping

Any parameter that varies across a domain can benefit from easing. Size progressions, opacity curves, rotation angles, stroke weights, and noise amplitudes all become more expressive when controlled by easing functions. The key insight is that easing functions are domain-agnostic—they simply transform one continuous range into another with a specific acceleration profile.

Noise Modulation

Easing functions can modulate noise functions to create regions of varying turbulence or detail. By using an eased value to control noise amplitude or frequency, you can create smooth transitions between calm and chaotic regions, or between fine and coarse detail levels.

// Vary noise amplitude across space using easing
function easedNoise(x, y, width, easeFn) {
  const t = x / width;
  const easedT = easeFn(t);
  const amplitude = easedT * 100;
  return noise(x * 0.01, y * 0.01) * amplitude;
}

Implementation Considerations

When implementing easing functions in generative art systems, several practical considerations emerge. Performance is rarely an issue for standard easing functions, as they involve simple mathematical operations. However, when applying easing to thousands of elements or in real-time rendering contexts, consider pre-computing eased values into lookup tables.

Domain mapping requires attention to edge cases. Ensure your easing functions handle t = 0 and t = 1 correctly, returning exactly 0 and 1 respectively when appropriate. Some exponential and circular functions require special handling at these boundaries to avoid numerical instability.

Reversibility is often useful. Many generative systems benefit from being able to reverse an easing function—to go from an eased value back to the original linear value. This is straightforward for simple polynomial functions but may require numerical methods for more complex curves.

Aesthetic Impact

The choice of easing function profoundly affects the aesthetic character of generative work. Linear interpolation creates mechanical, predictable results that can feel cold or computational. Gentle easing (sine, low-power polynomial) creates organic, flowing compositions that feel natural and harmonious. Aggressive easing (exponential, high-power polynomial) creates dramatic, attention-grabbing effects with strong contrast between regions.

The direction of easing matters as much as its intensity. Ease-in creates anticipation and buildup, drawing the eye toward the destination. Ease-out creates resolution and settling, emphasizing the starting point. Ease-in-out creates balance and symmetry, suitable for compositions without a clear directional bias.

Understanding easing functions as general-purpose interpolation tools—not just animation utilities—opens up vast creative possibilities in generative art. They are fundamental building blocks for controlling how any parameter changes across any domain, enabling artists to craft precise perceptual experiences and guide viewer attention through mathematical elegance.