Remap or Map function in Javascript

后端 未结 5 1972
小鲜肉
小鲜肉 2020-12-08 11:26

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

相关标签:
5条回答
  • 2020-12-08 11:37

    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);
    }
    
    0 讨论(0)
  • 2020-12-08 11:38

    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 Victor N. wwww.victorborges.com
     * @see https://gist.github.com/victornpb/51b0c17241ea483dee2c3a20d0f710eb/
     */
    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
    
    0 讨论(0)
  • 2020-12-08 11:44

    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/

    0 讨论(0)
  • 2020-12-08 11:45

    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.

    0 讨论(0)
  • 2020-12-08 11:48

    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.)

    0 讨论(0)
提交回复
热议问题