Skip to main content
Version: Phaser v4.0.0

Phaser.Math.Interpolation

Scope: static

Source: src/math/interpolation/index.js#L7

Static functions

Bezier

<static> Bezier(v, k)

Description:

Performs a generalized Bezier interpolation over an arbitrary number of control points. The v array provides the control point values and k (0 to 1) determines the position along the curve. Unlike CubicBezierInterpolation which uses exactly 4 points, this supports any number.

Parameters:

nametypeoptionaldescription
vArray.<number>NoThe input array of values to interpolate between.
knumberNoThe percentage of interpolation, between 0 and 1.

Returns: number - The interpolated value.

Source: src/math/interpolation/BezierInterpolation.js#L9
Since: 3.0.0


CatmullRom

<static> CatmullRom(v, k)

Description:

Performs a Catmull-Rom spline interpolation over an array of values, producing a smooth curve that passes through every control point. The k parameter (0 to 1) determines the position along the full curve.

If the first and last values in v are equal, the curve is treated as closed (looping), and the interpolation wraps around seamlessly. Otherwise, the curve is treated as open, and values of k outside the 0 to 1 range will extrapolate beyond the endpoints.

Parameters:

nametypeoptionaldescription
vArray.<number>NoThe input array of control point values to interpolate between.
knumberNoThe percentage of interpolation, between 0 and 1. Values outside this range extrapolate on an open curve, or wrap on a closed curve.

Returns: number - The interpolated value.

Source: src/math/interpolation/CatmullRomInterpolation.js#L9
Since: 3.0.0


CubicBezier

<static> CubicBezier(t, p0, p1, p2, p3)

Description:

Calculates a cubic bezier interpolated value for a given parameter t, based on four control points. The curve passes through p0 at t=0 and p3 at t=1, while p1 and p2 act as pull points that shape the curve between those endpoints without necessarily being on it. This makes cubic bezier interpolation well-suited for smooth, art-directed transitions in animations, camera paths, and procedural movement.

https://medium.com/@adrian_cooney/bezier-interpolation-13b68563313a

Parameters:

nametypeoptionaldescription
tnumberNoThe percentage of interpolation, between 0 and 1.
p0numberNoThe start point.
p1numberNoThe first control point.
p2numberNoThe second control point.
p3numberNoThe end point.

Returns: number - The interpolated value.

Source: src/math/interpolation/CubicBezierInterpolation.js#L43
Since: 3.0.0


Linear

<static> Linear(v, k)

Description:

Performs linear interpolation across an array of values.

Given an array of values v and a progress factor k in the range 0 to 1, this function maps k to a position along the array and returns the linearly interpolated value between the two nearest array elements. A k of 0 returns a value near the first element, while a k of 1 returns a value near the last. Values of k outside the range 0 to 1 are extrapolated beyond the ends of the array.

Parameters:

nametypeoptionaldescription
vArray.<number>NoThe input array of values to interpolate between.
knumberNoThe percentage of interpolation, between 0 and 1.

Returns: number - The interpolated value.

Source: src/math/interpolation/LinearInterpolation.js#L9
Since: 3.0.0


QuadraticBezier

<static> QuadraticBezier(t, p0, p1, p2)

Description:

Calculates a single point along a quadratic Bezier curve defined by a start point, a control point, and an end point. The value of t determines how far along the curve the returned value sits: 0 returns the start point value, 1 returns the end point value, and values in between are smoothly interpolated. The control point pulls the curve toward it, shaping the arc between the start and end points without the curve passing through it directly.

Parameters:

nametypeoptionaldescription
tnumberNoThe interpolation position along the curve, between 0 (start) and 1 (end).
p0numberNoThe start point value.
p1numberNoThe control point value, which pulls the curve toward it and determines its arc.
p2numberNoThe end point value.

Returns: number - The interpolated value at position t along the quadratic Bezier curve.

Source: src/math/interpolation/QuadraticBezierInterpolation.js#L35
Since: 3.2.0


SmootherStep

<static> SmootherStep(t, min, max)

Description:

An interpolation method based on Ken Perlin's Smoother Step function, which is an improved variant of the standard Smooth Step curve. Unlike Smooth Step, which has zero first derivatives at the endpoints, Smoother Step also has zero second derivatives at the endpoints, resulting in an even smoother S-curve transition between min and max. Use this when you need particularly fluid easing with no perceivable acceleration or deceleration artifacts at the start or end of the transition.

Parameters:

nametypeoptionaldescription
tnumberNoThe percentage of interpolation, between 0 and 1.
minnumberNoThe minimum value, also known as the 'left edge', assumed smaller than the 'right edge'.
maxnumberNoThe maximum value, also known as the 'right edge', assumed greater than the 'left edge'.

Returns: number - The interpolated value.

Source: src/math/interpolation/SmootherStepInterpolation.js#L9
Since: 3.9.0


SmoothStep

<static> SmoothStep(t, min, max)

Description:

A Smooth Step interpolation method that uses the Smoothstep function to produce a smooth, S-shaped transition between the min and max values. Unlike linear interpolation, Smooth Step eases in and out at both edges, resulting in a gradual start and end to the transition. This makes it well-suited for animations and transitions where abrupt changes at the boundaries would look unnatural.

The interpolation parameter t is first remapped via the Smoothstep curve (which clamps and applies a cubic Hermite function), and the result is then used to linearly interpolate between min and max.

Parameters:

nametypeoptionaldescription
tnumberNoThe percentage of interpolation, between 0 and 1.
minnumberNoThe minimum value, also known as the 'left edge', assumed smaller than the 'right edge'.
maxnumberNoThe maximum value, also known as the 'right edge', assumed greater than the 'left edge'.

Returns: number - The interpolated value.

Source: src/math/interpolation/SmoothStepInterpolation.js#L9
Since: 3.9.0