4-точечная цветовая интерполяция в пространстве HCL - PullRequest
Новая
       31

4-точечная цветовая интерполяция в пространстве HCL

1 голос
/ 12 июля 2019

Я генерирую 4 точечных градиента (каждый угол). Для этого у меня есть заданный цвет для каждого угла, который интерполируется в пространстве HCL. Поскольку это довольно сложно сделать самостоятельно, я использую библиотеку (chroma.js) и ее интегрированную функцию scale (). Поскольку нет способа интерполировать между более чем двумя цветами, я использую подход, который заключается в том, чтобы сначала интерполировать по оси x, а затем по y. Проблема этого подхода заключается в том, что в середине появляются артефакты, когда путь, выбранный для интерполяции, меняется:

HCL interpolation

Как вы можете видеть на этом рисунке, это не происходит с RGB-интерполяцией, но выглядит не так хорошо (цвета могут быть немного скучными):

rgb interpolation

Теперь у меня вопрос: Есть ли лучший способ интерполировать, чтобы убрать это разбиение в середине?

Это код, который я использую для создания этого изображения (это грязно, так как это просто подтверждение концепции): 

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();
}
...