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(); $docum…

Accepted Answer

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.

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

Solution

Problem