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 different range. What I want to do is convert the mouse's X coordinate into a range between, say, 0 and 15. So the browser's window dimensions, while different for every user, might be, say, 1394px wide, and the current X coordinate might be 563px, and I want to convert that to the range of 0 to 15.

I'm hoping to find a function of jquery and javascript that has this ability built in. I can figure out the math to do this by myself, but I'd rather do this in a more concise and dynamic way.

I'm already capturing the screen dimensions and mouse dimensions with this code:

var $window = $(window); var $document = $(document);   $document.ready(function() {     var mouseX, mouseY; //capture current mouse coordinates     var screenW, screenH; //capture the current width and height of the window     var maxMove = 10;     windowSize();      $document.mousemove( function(e) {         mouseX = e.pageX;          mouseY = e.pageY;      });      $window.resize(function() {         windowSize();     });      function windowSize(){         screenW = $window.width();         screenH = $window.height();     }  }); 

Thanks for any help you can provide.

Answer 1

You can implement this as a pure Javascript function:

function scale (number, inMin, inMax, outMin, outMax) {     return (number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin; } 

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.

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]);