立方的倒數 function

Question

我正在嘗試創建以下 function 的逆變換：

function cubic(x, p1, p2) {

  // coefficients
  const cY = 3 * (p1 - 1);
  const bY = 3 * (p2 - p1) - cY;
  const aY = -1 - cY - bY;

  return 1 - ((aY * pow(x, 3)) + (bY * pow(x, 2)) + (cY * x) + 1);

}

function 期望x在 0-1 的范圍內並返回y 。

我需要找到這個 function 的倒數來創建一條在對角線上鏡像的曲線，以便下面示例中的藍色和紅色曲線產生完美對稱的形狀。

我試圖通過1 - cubic(1 - x, p1, p2)反轉變換，切換 p1 和 p2，否定 p1 和 p2 等，但沒有給我正確的結果。 非常感謝任何幫助！

這是 Javascript 沙盒，用於解決 JS Fiddle 上的問題

 const p1 = 0.65; const p2 = 1.2; draw(cvs.getContext('2d'), { blue: cubic, red: inverse, grey: linear }); function cubic(x) { // coefficients const cY = 3 * (p1 - 1); const bY = 3 * (p2 - p1) - cY; const aY = -1 - cY - bY; return 1 - ((aY * Math.pow(x, 3)) + (bY * Math.pow(x, 2)) + (cY * x) + 1); } // TODO: Correct inverse of the above forward transform function inverse(x) { return 1 - cubic(1 - x, p1, p2); } function linear(x) { return x; } function draw(ctx, fx) { const w = ctx.canvas.width * devicePixelRatio; const h = ctx.canvas.height * devicePixelRatio; ctx.clearRect(0, 0, w, h); ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)'; const blockWidth = w / 10; const blockHeight = h / 10; for (let x = 0; x < w; x += blockWidth) { for (let y = 0; y < h; y += blockHeight) { ctx.strokeRect(x, y, blockWidth, blockHeight); } } for (const color in fx) { ctx.fillStyle = color; for (let i = 0, x, y; i < w; i++) { x = i / (w - 1); y = 1.0 - fx[color](x); ctx.fillRect(Math.round(x * w) - 1, Math.round(y * h) - 1, 2, 2); } } }

 <canvas id="cvs" width="768" height="768" style="background:black;"></canvas>

Answer 1

這種立方體的倒數甚至可能不是 function。

但是你至少可以通過交換坐標來得到 plot

   y = myfunc(x);
   plot(x,y, 'blue');  // your original function
   plot(y,x, 'green'); // this is the inverse of x,y along the line x-y=0