backIn

ease-in function that overshoots before settling.

Parameters

NameTypeDescription
tf32Input parameter (0-1).

Returns

f32value with back effect.

WGSL Code

fn backIn(t: f32) -> f32 {
let s = 1.70158;
let tt = clamp(t, 0.0, 1.0);
return tt * tt * ((s + 1.0) * tt - s);
}

backOut

ease-out function that overshoots before settling.

Parameters

NameTypeDescription
tf32Input parameter (0-1).

Returns

f32value with back effect.

WGSL Code

fn backOut(t: f32) -> f32 {
let s = 1.70158;
let tt = clamp(t, 0.0, 1.0);
let tMinus = tt - 1.0;
return tMinus * tMinus * ((s + 1.0) * tMinus + s) + 1.0;
}
Showing 5/6 lines

bezierCubic

a cubic Bezier curve and returns both value and derivative.

Parameters

NameTypeDescription
tf32Parameter along the curve (0-1).
p0f32First control point.
p1f32Second control point.
p2f32Third control point.
p3f32Fourth control point.

Returns

vec2<f32>value and derivative (tangent).

WGSL Code

fn bezierCubic(t: f32, p0: f32, p1: f32, p2: f32, p3: f32) -> vec2<f32> {
// Clamp t to [0,1]
let tt = clamp(t, 0.0, 1.0);
// Calculate curve value using cubic Bezier formula
// P(t) = (1-t)³P₀ + 3(1-t)²tP₁ + 3(1-t)t²P₂ + t³P₃
let t1 = 1.0 - tt;
let t1Squared = t1 * t1;
let t1Cubed = t1Squared * t1;
let tSquared = tt * tt;
let tCubed = tSquared * tt;
let value = t1Cubed * p0 +
3.0 * t1Squared * tt * p1 +
3.0 * t1 * tSquared * p2 +
tCubed * p3;
// Calculate derivative for tangent information
// P'(t) = 3(1-t)²(P₁-P₀) + 6(1-t)t(P₂-P₁) + 3t²(P₃-P₂)
let derivative = 3.0 * t1Squared * (p1 - p0) +
6.0 * t1 * tt * (p2 - p1) +
3.0 * tSquared * (p3 - p2);
return vec2<f32>(value, derivative);
}
Showing 5/25 lines

easeIn

ease-in function for smooth acceleration.

Parameters

NameTypeDescription
tf32Input parameter (0-1).
powerf32Easing power (higher = more pronounced curve).

Returns

f32value.

WGSL Code

fn easeIn(t: f32, power: f32) -> f32 {
return pow(clamp(t, 0.0, 1.0), power);
}

easeInOut

ease-in-out function for smooth acceleration and deceleration.

Parameters

NameTypeDescription
tf32Input parameter (0-1).
powerf32Easing power (higher = more pronounced curve).

Returns

f32value.

WGSL Code

fn easeInOut(t: f32, power: f32) -> f32 {
let tt = clamp(t, 0.0, 1.0);
if (tt < 0.5) {
return 0.5 * pow(2.0 * tt, power);
} else {
return 0.5 + 0.5 * (1.0 - pow(2.0 * (1.0 - tt), power));
}
}
Showing 5/8 lines

easeOut

ease-out function for smooth deceleration.

Parameters

NameTypeDescription
tf32Input parameter (0-1).
powerf32Easing power (higher = more pronounced curve).

Returns

f32value.

WGSL Code

fn easeOut(t: f32, power: f32) -> f32 {
return 1.0 - pow(1.0 - clamp(t, 0.0, 1.0), power);
}

elasticIn

ease-in function with oscillating motion.

Parameters

NameTypeDescription
tf32Input parameter (0-1).

Returns

f32value with elastic effect.

WGSL Code

fn elasticIn(t: f32) -> f32 {
let tt = clamp(t, 0.0, 1.0);
return sin(13.0 * 3.14159 * tt) * pow(2.0, 10.0 * (tt - 1.0));
}

elasticOut

ease-out function with oscillating motion.

Parameters

NameTypeDescription
tf32Input parameter (0-1).

Returns

f32value with elastic effect.

WGSL Code

fn elasticOut(t: f32) -> f32 {
let tt = clamp(t, 0.0, 1.0);
return sin(-13.0 * 3.14159 * (tt + 1.0)) * pow(2.0, -10.0 * tt) + 1.0;
}

springPhysics

spring animation with configurable parameters.

Parameters

NameTypeDescription
tf32Time parameter.
targetPositionf32Target position for the spring.
initialPosf32Initial position.
initialVelf32Initial velocity.
stiffnessf32Spring stiffness coefficient.
dampingf32Damping coefficient.
massf32Mass of the spring system.

Returns

vec2<f32>and velocity at time t.

WGSL Code

fn springPhysics(t: f32, targetPosition: f32, initialPos: f32, initialVel: f32, stiffness: f32, damping: f32, mass: f32) -> vec2<f32> {
// Ensure positive values for stiffness, damping, and mass
let k = max(0.0001, stiffness);
let d = max(0.0, damping);
let m = max(0.0001, mass);
// Calculate the angular frequency and damping ratio
let omega = sqrt(k / m);
let zeta = d / (2.0 * sqrt(k * m));
// Initial displacement from targetPosition position
let x0 = initialPos - targetPosition;
let v0 = initialVel;
var position: f32 = 0.0;
var velocity: f32 = 0.0;
if (zeta < 1.0) {
// Underdamped case
let omega_d = omega * sqrt(1.0 - zeta * zeta);
let A = x0;
let B = (v0 + zeta * omega * x0) / omega_d;
// Calculate exponential decay term
let expTerm = exp(-zeta * omega * t);
// Calculate position and velocity
position = targetPosition + expTerm * (A * cos(omega_d * t) + B * sin(omega_d * t));
velocity = expTerm * (
-zeta * omega * A * cos(omega_d * t) - omega_d * A * sin(omega_d * t) +
-zeta * omega * B * sin(omega_d * t) + omega_d * B * cos(omega_d * t)
);
} else if (zeta == 1.0) {
// Critically damped case
let A = x0;
let B = v0 + omega * x0;
// Calculate exponential decay term
let expTerm = exp(-omega * t);
// Calculate position and velocity
position = targetPosition + expTerm * (A + B * t);
velocity = expTerm * (B - omega * (A + B * t));
} else {
// Overdamped case
let omega1 = -omega * (zeta + sqrt(zeta * zeta - 1.0));
let omega2 = -omega * (zeta - sqrt(zeta * zeta - 1.0));
let A = (v0 - omega2 * x0) / (omega1 - omega2);
let B = x0 - A;
// Calculate position and velocity
position = targetPosition + A * exp(omega1 * t) + B * exp(omega2 * t);
velocity = A * omega1 * exp(omega1 * t) + B * omega2 * exp(omega2 * t);
}
return vec2<f32>(position, velocity);
}
Showing 5/58 lines