Javascript / jQuery - map a range of numbers to another range of numbers

Question

In other programming languages such as processing, there is a function which allows you to convert a number that falls within a range of numbers into a number within a diffe

Answer 1

You can implement this as a pure Javascript function:

const scale = (num, in_min, in_max, out_min, out_max) => {
  return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

Use the function, like this:

const num = 5;
console.log(scale(num, 0, 10, -50, 50)); // 0
console.log(scale(num, -20, 0, -100, 100)); // 150

I'm using scale for the function name, because map is frequently associated with iterating over arrays and objects.

---

Below is the original answer. I can no longer recommend modification of native prototypes.

If you'd like to have access to this in the Number class, you can add it as…

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;
}

…wherein you specify in the "minimum" and "maximum" values of expected input and the "minimum" and "maximum" values to be output. This can and will produce out-of-range values if the incoming value itself is not between in_min and in_max.

Use it like this:

var num = 5;
console.log(num.map(0, 10, -50, 50)); // 0
console.log(num.map(-20, 0, -100, 100)); // 150

Edit: I've made this available as a Gist, so you don't have to look this up, in the future.

Answer 2

If your range always starts from 0 then all you have to do is

mouseValue * range.max / screen.max

---

A more involved any-range to any-range conversion would require

function convertToRange(value, srcRange, dstRange){
  // value is outside source range return
  if (value < srcRange[0] || value > srcRange[1]){
    return NaN; 
  }

  var srcMax = srcRange[1] - srcRange[0],
      dstMax = dstRange[1] - dstRange[0],
      adjValue = value - srcRange[0];

  return (adjValue * dstMax / srcMax) + dstRange[0];

}

Use like convertToRange(20,[10,50],[5,10]);

Answer 3

Let's say you have 6 variables :

• minRange (0 in your example)
• maxRange (15 in your example)
• x
• y
• browserWidth
• browserHeight

To have the range :

interval = maxRange - minRange;
rangeX = interval * x / browserWidth + minRange
rangeY = interval * y / browserHeight + minRange

Answer 4

function proportion(value,max,minrange,maxrange) {
    return Math.round(((max-value)/(max))*(maxrange-minrange))+minrange;
}

In your case, use this as proportion(screencoord,screensize,0,15)

You'd also presumably want to get the Client size, not the screen size, as the Screen size refers to the maximum dimensions of the monitor, and not all users maximise their screen.

Answer 5

This is simple math.

var screenWidth = $(window).width();
var mousePosition = e.pageX;
var max = 15;
var value = (mousePosition / screenWidth) * max;

Note that this can return a decimal number; if you don't want that, you can use Math.round on the result.

Live example

Answer 6

I've taken August Miller's idea and added limits to them (value can't go outside the range of in_min and in_max and if it does it returns out_min and out_max respectively) and minified it for those who want a copy paste function for their scripts:

function map(n,i,o,r,t){return i>o?i>n?(n-i)*(t-r)/(o-i)+r:r:o>i?o>n?(n-i)*(t-r)/(o-i)+r:t:void 0}

params are like map(value, in_min, in_max, out_in, out_max)