HCL空间中的4点颜色插值

Question

我正在生成4个点渐变（每个角）。为此，我为HCL空间中插值的每个角设置了颜色。由于这很难自己完成，因此我正在使用一个库（chroma.js），它是集成的scale（）函数。因为无法在两种以上的颜色之间进行插值，所以我使用的方法是先在x轴上插值，然后在y上插值。这种方法的问题在于，当选择用于插值的路径更改时，中间会出现伪影：

正如您在这张图片中看到的那样，RGB插值法不会发生这种情况，但是它看起来并不好（颜色可能会有些暗淡：]

我的问题是，是否有更好的插值方法来移除中间的拆分？

这是我用来生成此图像的代码（这很混乱，因为这只是概念证明）：

var colors = ["#EC0000","#4D0277","#E8F600","#00A2EE"];
function makeGradientAlt(pix, colors){
  var div = 32;
  var wid = pix.data.width / div;
  var hei = pix.data.height / div;

  var mode = "hcl";
  //var tscale = chroma.bezier([tl, tr]).scale().correctLightness();
  //var bscale = chroma.bezier([bl, br]).scale().correctLightness();
  var tscale = chroma.scale([colors[0], colors[1]]).mode(mode);//.correctLightness();
  var bscale = chroma.scale([colors[2], colors[3]]).mode(mode);//.correctLightness();


  for(let cx = 0; cx < wid; cx++){
    let fac = cx / wid;
    let scale = chroma.scale([tscale(fac), bscale(fac)]).mode(mode);
    for(let cy = 0; cy < hei; cy++){
      let col = scale(cy / hei).hex();
      pix.ctx.fillStyle = col;
      pix.ctx.fillRect(cx * div, cy * div, div, div);
      //pix.setPixel(cx, cy, col[0], col[1], col[2]);
    }
  }
  //pix.updateCanvas();
}

Answer 1

最新贡献。我相信您根本不会在矩阵中间遇到混合伪像。仅仅在黄色和蓝色点之间的底部x轴颜色渐变上您的源插值非常不均匀，在第五步和第六步之间非常明显，这污染了上面所有行中的4点混合。注意底部的第五个绿色步骤和第六个蓝色步骤之间的巨大对比。这种失真仅反映在其上方的所有行上，因为使用两个源X轴渐变上的上下颜色在Y轴上进行插值生成它们。在较高的源坡道上不会发生相同的伪像，但是底部的那个是如此明显，足以影响所有其他混合。

我相信在较低的斜率上出现此伪像可能是由于HCL颜色空间转换本身的实现不正确，因为它应该由您的代码正确生成。