Method to map a number from an input domain to an output range. Useful for animations based on userinput.

clamp.js

// This clamp function does not need left to be smaller than right, making it better suited for animations

const clamp = (input, left, right) => {
  if (left > right) {
    [left, right] = [right, left]
  }
  return Math.min(Math.max(input, left), right)
}

export default clamp

linear-interpolate.js

const lerp = (a, b, weight) => a + weight * (b - a)

export default lerp

map-number.js

import clamp from 'clamp'
import lerp from 'linear-interpolate'

const mapNumber = (input, inFrom, inTo, outFrom, outTo) => {
  input = clamp(input, inFrom, inTo)
  const t = (input - inFrom) / (inTo - inFrom)
  return lerp(outFrom, outTo, t)
}

export default mapNumber

// mapNumber(1, 0, 10, 10, 30) outputs 12
// mapNumber(5, 0, 10, 10, 30) outputs 20