6 Simple JS Math Functions You Can Use Everyday.

By Kelly Milligan

Here at Thinkingbox we often need to break outside of normal browser conventions. HTML and CSS provide a great foundation, but when the goal is to create something a bit more bespoke we must turn to JavaScript.

We love these simple math functions that make things a whole lot easier; they enable us to organize complex systems into simple rules. Once you’re used to using them, you can turn to them increasingly often when solving a math or visual problem. Aces!

Sign

A useful tool for discovering the “direction” of a number. Is it positive, negative or zero?

function sign( val ) {
 return val === 0 ? 0 : val > 0 ? 1 : -1
}
// Example:
const scrollDelta = ( currentScrollY — prevScrollY )
const scrollDirection = sign( scrollDelta )

Note: There’s a native browser method for sign, however it is not supported in Internet Explorer (Edge has support though thankfully).

Clamp

Trim a value to be within the min and max values. Combines a Math.min() and Math.max() into a single method.

function clamp( val, min, max ) {
 return Math.min( Math.max( val, min ), max )
}
// Example:
const MAX_VELOCITY = 10
const clampedVelocity = clamp( velocity, -MAX_VELOCITY, MAX_VELOCITY )

Within Range

Check whether the supplied number is within the min and max numbers. Returns a boolean value

function withinRange( val, min, max ) {
 return ( val >= min && val <= max )
}
// Example: 
const isMouseOnLeft = withinRange(mouseX, 0, window.innerWidth / 2)

Lerp (Linear intERPolation)

Calculates a value between two different values, based on the alpha or ratio value. Super useful for animation and tweening.

function lerp( a, b, alpha ) {
 return a + alpha * ( b — a )
}
// Example: 
const alpha = Math.sin( performance.now() ) * 0.5 + 0.5 // cycle between 0 and 1
const positionX = lerp( 0, window.innerWidth, alpha )

Note: There are also versions of lerp that calculate 2D and 3D point interpolations, which are very useful in canvas or WebGL animation.

Degrees to Radians, Radians to Degrees

When dealing with angles in Javascript (or many other math systems) it’s assumed that they are defined in Radians: where one 360 degree revolution is equal to 2π radians (6.283 radians).

It can be much easier to reason about angles in degrees for us, so having a quick way to convert between the different angle units is helpful!

function degToRad( degrees ) {
 return degrees * ( Math.PI / 180 )
}
function radToDeg( radians ) {
 return radians * ( 180 / Math.PI )
}
// Example: 
const progress = Math.sin( performance.now() ) * 0.5 + 0.5 // cycle between 0 and 1
const progressAroundCircle = degToRad( 360 * progress )

Note: These conversions become very useful when working with canvas or WebGL contexts, as many of their native functions for angle-based operations use radians.

Distance

Calculate the total distance (the “hypotenuse”) between two points using the Pythagorean Theorem. Particularly useful for mouse coordinate calculations.

function distance( x1, y1, x2, y2 ) {
 const dx = x2 — x1
 const dy = y2 — y1
 return Math.sqrt( dx * dx + dy * dy )
}
// Example:
const proximity = distance( 0, 0, mouseX, mouseY )
if ( proximity < 200 ) console.log( ‘mouse is in upper left corner!’ );