Remap or Map function in Javascript

Question

Of late, most of my programming experience has been in Processing, and more recently I have been wanting to branch out a little deeper in to some JavaScript, since they are slightly related.

I was just wondering, as my recent searching has turned up nothing, if JavaScript had a similar function to Processing's "map" function, in which a value and it's range is taken and remapped to a new range?

More info here: http://processing.org/reference/map_.html

PS: Yes, I also know that www.processingjs.org exists, but I was just wondering if JS had such a function natively.

Gumshoe

no there aro no native function like this. But you can write your own easily. – Subito

For future reference, the source for most Processing functions are available here: github.com/processing/processing/blob/master/core/src/… – Paraffinic

May be unrelated: some references of the implementations in different frameworks/languages: gist.github.com/nkint/077b6deccdf61351f016dee5b83a2021 – Tempura

Answer 1

The function below produces the same behaviour as the original Processing function:

function map_range(value, low1, high1, low2, high2) {
    return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
}

Alienor

Thanks a lot! This was mighty useful! Appreciate it. – Gumshoe

@jlmakes your edits were neither useful nor necessary. I've reverted them. – Alienor

Answer 2

Here's an implementation of the Processing Math convenience methods in Javascript. It's a straight conversion of the original Processing Java source.

p5.sq()
p5.constrain()
p5.degrees()
p5.mag()
p5.dist()
p5.lerp()
p5.norm()
p5.map()

Get the code from here: https://github.com/trembl/p5.Math.js/

Brainwork

Answer 3

Reusable remap

If you want to remap more than one value to a defined range, you may want to use this version instead.

/**
 * Create a function that maps a value to a range
 * @param  {Number}   inMin    Input range minimun value
 * @param  {Number}   inMax    Input range maximun value
 * @param  {Number}   outMin   Output range minimun value
 * @param  {Number}   outMax   Output range maximun value
 * @return {function}          A function that converts a value
 * 
 * @author github.com/victornpb
 * @see https://mcmap.net/q/593218/-remap-or-map-function-in-javascript
 */
function createRemap(inMin, inMax, outMin, outMax) {
    return function remaper(x) {
        return (x - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
    };
}

Usage examples

var f2c = createRemap(32,212, 0,100); //fahrenheit to celsius
var c2f = createRemap(0,100, 32,212); //celsius to fahrenheit

f2c(-459.67) //-273.15
c2f(-273.15) //-459.6699999999999
c2f(96)      //204.8
f2c(96)      //35.55555555555556
f2c(60)      //15.555555555555555
f2c(90)      //32.22222222222222
c2f(70)      //158
c2f(-30)     //-22
c2f(0)       //32
f2c(32)      //0


var p = createRemap(0,1, 0,100);    

p(0)    //0
p(0.33) //33
p(0.5)  //50
p(0.99) //99
p(1)    //100
p(1.5)  //150
p(-0.1) //-10

    
var map8b10b = createRemap(0,255, 0,1023);

map8b10b(0)   //0
map8b10b(32)  //128.3764705882353
map8b10b(64)  //256.7529411764706
map8b10b(128) //513.5058823529412
map8b10b(255) //1023

Potentiate

Answer 4

Not natively. Javascript core is really minimal (See see for details). Mathematical functions are limited to what you find in the Math object. So for such a function to be widely available, you need an implementation in Javascript itself.

Tennison

Answer 5

edit Use @Alnitak's code; that version is correct.

No, it doesn't, but you could write one pretty easily:

function adjust(value, r0, r1, r2, r3) {
  var mag = Math.abs(value - r0), sgn = value < 0 ? -1 : 1;
  return sgn * mag * (r3 - r2) / (r1 - r0);
}

I wouldn't call it "map", personally, because of the (well, my) association of "map" with a list processing mechanism.

(Note that you might want to check for range reversal errors, I guess; I'm not familiar with the exact semantics of "map" from Processing.)

Fireplace

also the sign detection shouldn't depend on value - the function should be independent of the sign of the values supplied. – Alienor

@Alienor - ah you're right ... I'll let your answer stand and edit mine. – Fireplace

Appreciate everyone's help on this! Cheers. – Gumshoe