CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-thi-ng--math

Assorted common math functions & utilities for TypeScript/JavaScript applications

Pending
Overview
Eval results
Files

easing.mddocs/

Easing Functions

Pre-built easing functions for animations and smooth transitions. Includes polynomial, exponential, elastic, and bounce easing curves.

Capabilities

Function Generators

Higher-order functions that create customized easing functions.

/**
 * Creates exponential ease-in function with exponent k
 * @param k - Exponent value (higher = steeper curve)
 * @returns Ease-in function
 */
function defEaseInExp(k: number): (t: number) => number;

/**
 * Creates exponential ease-out function with exponent k
 * @param k - Exponent value (higher = steeper curve)
 * @returns Ease-out function
 */
function defEaseOutExp(k: number): (t: number) => number;

/**
 * Creates exponential ease-in-out function with exponent k
 * @param k - Exponent value (higher = steeper curve)
 * @returns Ease-in-out function
 */
function defEaseInOutExp(k: number): (t: number) => number;

Usage Examples:

import { defEaseInExp, defEaseOutExp } from "@thi.ng/math/easing";

// Create custom exponential easing functions
const strongEaseIn = defEaseInExp(4);
const gentleEaseOut = defEaseOutExp(2);

// Use in animations
const value = strongEaseIn(0.5); // Strong acceleration
const softValue = gentleEaseOut(0.7); // Gentle deceleration

Linear Easing

/**
 * Linear interpolation (no easing)
 * @param t - Time parameter [0,1]
 * @returns Linear value
 */
function easeLinear(t: number): number;

Polynomial Easing

Polynomial easing functions with different degrees for varying curve steepness.

/** Quadratic ease-in: t² */
function easeIn2(t: number): number;

/** Quadratic ease-out: 1-(1-t)² */
function easeOut2(t: number): number;

/** Quadratic ease-in-out: combination of ease-in and ease-out */
function easeInOut2(t: number): number;

/** Cubic ease-in: t³ */
function easeIn3(t: number): number;

/** Cubic ease-out: 1-(1-t)³ */
function easeOut3(t: number): number;

/** Cubic ease-in-out: combination of ease-in and ease-out */
function easeInOut3(t: number): number;

/** Quartic ease-in: t⁴ */
function easeIn4(t: number): number;

/** Quartic ease-out: 1-(1-t)⁴ */
function easeOut4(t: number): number;

/** Quartic ease-in-out: combination of ease-in and ease-out */
function easeInOut4(t: number): number;

/** Quintic ease-in: t⁵ */
function easeIn5(t: number): number;

/** Quintic ease-out: 1-(1-t)⁵ */
function easeOut5(t: number): number;

/** Quintic ease-in-out: combination of ease-in and ease-out */
function easeInOut5(t: number): number;

Usage Examples:

import { easeIn3, easeOut3, easeInOut3 } from "@thi.ng/math/easing";

// Cubic easing variations
const accelerating = easeIn3(0.3); // Slow start, fast end
const decelerating = easeOut3(0.7); // Fast start, slow end
const smooth = easeInOut3(0.5); // Smooth acceleration/deceleration

Back Easing

Back easing functions that overshoot the target before settling.

/** Back ease-in: overshoots backwards before forward motion */
function easeInBack(t: number): number;

/** Back ease-out: overshoots forward past target then returns */
function easeOutBack(t: number): number;

/** Back ease-in-out: combination of back ease-in and ease-out */
function easeInOutBack(t: number): number;

Bounce Easing

Bounce easing functions that simulate bouncing ball physics.

/** Bounce ease-in: bouncing effect at start */
function easeInBounce(t: number): number;

/** Bounce ease-out: bouncing effect at end */
function easeOutBounce(t: number): number;

/** Bounce ease-in-out: bouncing at both start and end */
function easeInOutBounce(t: number): number;

Circular Easing

Circular easing based on quarter-circle curves.

/** Circular ease-in: quarter circle curve */
function easeInCirc(t: number): number;

/** Circular ease-out: inverted quarter circle */
function easeOutCirc(t: number): number;

/** Circular ease-in-out: combination of circular curves */
function easeInOutCirc(t: number): number;

Elastic Easing

Elastic easing functions that simulate elastic/spring behavior.

/** Elastic ease-in: elastic oscillation at start */
function easeInElastic(t: number): number;

/** Elastic ease-out: elastic oscillation at end */
function easeOutElastic(t: number): number;

/** Elastic ease-in-out: elastic oscillation at both ends */
function easeInOutElastic(t: number): number;

Exponential Easing

Exponential easing functions using base-2 exponentials.

/** Exponential ease-in (base 2): 2^(10*(t-1)) */
function easeInExp2(t: number): number;

/** Exponential ease-out (base 2): -(2^(-10*t)) + 1 */
function easeOutExp2(t: number): number;

/** Exponential ease-in-out (base 2): combination of exponential curves */
function easeInOutExp2(t: number): number;

Sinusoidal Easing

Easing functions based on sine wave curves.

/** Sinusoidal ease-in: sine curve acceleration */
function easeInSine(t: number): number;

/** Sinusoidal ease-out: sine curve deceleration */
function easeOutSine(t: number): number;

/** Sinusoidal ease-in-out: smooth sine curve transition */
function easeInOutSine(t: number): number;

Usage Examples:

import { 
  easeOutBounce, easeInBack, easeInElastic, 
  easeInOutCirc, easeOutExp2, easeInOutSine 
} from "@thi.ng/math/easing";

// Different easing effects for animations
const bounceEnd = easeOutBounce(0.8); // Bouncy landing
const overshoot = easeInBack(0.6); // Pull back before moving
const springy = easeInElastic(0.4); // Elastic oscillation
const smooth = easeInOutCirc(0.5); // Smooth circular transition
const explosive = easeOutExp2(0.3); // Fast exponential movement
const gentle = easeInOutSine(0.7); // Gentle sinusoidal curve

// Use in animation frameworks
function animate(startValue: number, endValue: number, progress: number) {
  const easedProgress = easeOutBounce(progress);
  return startValue + (endValue - startValue) * easedProgress;
}

Animation Integration Examples

import { easeInOut3, easeOutBounce, easeInBack } from "@thi.ng/math/easing";
import { mix } from "@thi.ng/math/mix";

// Simple property animation
function animateProperty(
  start: number, 
  end: number, 
  duration: number, 
  easingFn: (t: number) => number
) {
  return (time: number) => {
    const progress = Math.min(time / duration, 1);
    const easedProgress = easingFn(progress);
    return mix(start, end, easedProgress);
  };
}

// Usage examples
const smoothMove = animateProperty(0, 100, 1000, easeInOut3);
const bouncyScale = animateProperty(1, 2, 800, easeOutBounce);
const snapRotation = animateProperty(0, 360, 600, easeInBack);

// At animation time t
const position = smoothMove(500); // At 500ms
const scale = bouncyScale(400); // At 400ms
const rotation = snapRotation(300); // At 300ms

Install with Tessl CLI

npx tessl i tessl/npm-thi-ng--math

docs

angles.md

constants-types.md

easing.md

eqdelta.md

extrema.md

fit.md

index.md

integers.md

interpolation.md

intervals.md

libc.md

precision.md

solvers.md

utilities.md

tile.json