Skip to content

Instantly share code, notes, and snippets.

@xposedbones
Last active June 17, 2024 02:30
Show Gist options
  • Save xposedbones/75ebaef3c10060a3ee3b246166caab56 to your computer and use it in GitHub Desktop.
Save xposedbones/75ebaef3c10060a3ee3b246166caab56 to your computer and use it in GitHub Desktop.
Javascript Map range of number to another range
Number.prototype.map = function (in_min, in_max, out_min, out_max) {
return (this - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
export function clamp(input: number, min: number, max: number): number {
return input < min ? min : input > max ? max : input;
}
export function map(current: number, in_min: number, in_max: number, out_min: number, out_max: number): number {
const mapped: number = ((current - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
return clamp(mapped, out_min, out_max);
}
@nwazuo
Copy link

nwazuo commented Jun 27, 2022

If you use GSAP, it has this as one of its utility methods as gsap.utils.mapRange. I haven't quite tested out how it deals with cases like floats. Also, I like that GSAP's mapRange has a handy feature that makes it return a function that 'remembers' the in_min, in_max, etc., values so that you can pass in any number input to repeat calculations with the same ranges.

@mekb-turtle
Copy link

simpler version:

const lerp = (a, b, t) => (b-a)*t+a;
const unlerp = (a, b, t) => (t-a)/(b-a);
const map = (a1, b1, a2, b2, t) => lerp(a2, b2, unlerp(a1, b1, t));

@LeoniePhiline
Copy link

@mekb-turtle What does lerp mean?

@mekb-turtle
Copy link

@mekb-turtle What does lerp mean?

Linear Interpolation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment