javascript - 如何线性插值 (lerp) 范围输入到范围输出？

Question

我想在一系列输入值(例如，A 和 B 之间)之间进行一般插值，并获得一系列输出值(例如，C 和 D 之间)。有时我想限制值(以便 B+10000 仍然输出 D)，有时我不想。我该怎么做？

例如，给定输入速度在 20 mph 和 80 mph 之间，我想将 map 的缩放级别调整在 17 到 15 之间:

无夹紧

     | \ 
     |  \
 17  |   \
     |    \
     |     \
     |      \
     |       \
 15  |        \
     |         \
     +----------\-
        20  80   \

带夹紧

     |
 17  |----
     |    \
     |     \
     |      \
     |       \
 15  |        ----
     |
     +------------
        20  80    

我找到了 this utility function ，但是 (a) 它本身不支持钳位，需要第二次函数调用，并且 (b) 它只支持 0 和 1 之间的输入。

Answer 1

您想要的一般(未固定)方程是:

var unclamped = (x-minX) * (maxY-minY)/(maxX-minX) + minY;

对于钳位，您可以在计算结果后钳位输出:

var clamped = Math.max( minY, Math.min( maxY, unclamped ) );

或者您可以在使用之前限制输入:

x = Math.max( minX, Math.min( maxX, x ) )
var clamped = (x-minX) * (maxY-minY)/(maxX-minX) + minY;

如果直线的斜率不变，并且您的钳位期望不变，您可以通过预先计算一次并生成适合您的输入和需求的函数来提高性能:

// Generate a lerp function for a specific set of input/output,
// with or without clamping to the output range.
function lerp(minX, maxX, minY, maxY, clampFlag) {
  var slope = (maxY-minY)/(maxX-minX);
  return clampFlag ?
    function(x){ return ((x<minX?minX:x>maxX?maxX:x) - minX) * slope + minY }
    :
    function(x){ return (x-minX)*slope + minY }
}

在行动中:

prepPlotter(); // Get ready to draw a pretty graph of the results

// Make a simple input/output function
var zoomForSpeed = lerp(20, 80, 17, 15, true);

for (var speed=0; speed<=99; speed++) {
  var zoom = zoomForSpeed(speed); // Bam! Lerp'd!
  plot(speed,zoom);               // Proof of the goodness
}

// Show the min/max input and output
ctx.fillStyle = 'red';
plot(20,17,2);
plot(80,15,2);

function plot(speed,zoom,scale) {
  ctx.fillRect(speed,zoom,0.5*(scale||1),0.03*(scale||1));
}

function prepPlotter() {
  ctx = document.querySelector('canvas').getContext('2d');
  ctx.translate(0,875);
  ctx.scale(3,-50);
}

function lerp(minX, maxX, minY, maxY, clampFlag) {
  var slope = (maxY-minY)/(maxX-minX);
  return clampFlag ? function(x){ return ((x<minX?minX:x>maxX?maxX:x) - minX) * slope + minY } : function(x){ return (x-minX)*slope + minY }
}

<canvas>Press "Run code snippet" for a graph of zoomForSpeed</canvas>