colorMode

[ovomatik]

Hello. I try to test q5.js in replacement of p5.js for a website (only some small colors image conversion). On p5js, I manage to do it with a HSL colorMode.

On q5js, there are only RGB mode and HSB mode. It is true?

[quinton-ashley]

Yup that's true, because HSL is not as commonly used. One of the design goals for q5 is to trim the fat from p5 for typical users.

For reference here's p5's HSLA to RGBA conversion method. Not much code required! If you could get this working with q5's color implementation then I'd be fine with including it in q5. Submit a pull request.

/**
   * Convert an HSLA array to RGBA.
   *
   * We need to change basis from HSLA to something that can be more easily be
   * projected onto RGBA. We will choose hue and brightness as our first two
   * components, and pick a convenient third one ('zest') so that we don't need
   * to calculate formal HSBA saturation.
   */
_hslaToRGBA: function _hslaToRGBA(hsla) {
  var hue = hsla[0] * 6; // We will split hue into 6 sectors.
  var sat = hsla[1];
  var li = hsla[2];
  var RGBA = [
  ];
  if (sat === 0) {
    RGBA = [
      li,
      li,
      li,
      hsla[3]
    ]; // Return early if grayscale.
  } else {
    // Calculate brightness.
    var val;
    if (li < 0.5) {
      val = (1 + sat) * li;
    } else {
      val = li + sat - li * sat;
    }              // Define zest.

    var zest = 2 * li - val;
    // Implement projection (project onto green by default).
    var hzvToRGB = function hzvToRGB(hue, zest, val) {
      if (hue < 0) {
        // Hue must wrap to allow projection onto red and blue.
        hue += 6;
      } else if (hue >= 6) {
        hue -= 6;
      }
      if (hue < 1) {
        // Red to yellow (increasing green).
        return zest + (val - zest) * hue;
      } else if (hue < 3) {
        // Yellow to cyan (greatest green).
        return val;
      } else if (hue < 4) {
        // Cyan to blue (decreasing green).
        return zest + (val - zest) * (4 - hue);
      } else {
        // Blue to red (least green).
        return zest;
      }
    };
    // Perform projections, offsetting hue as necessary.
    RGBA = [
      hzvToRGB(hue + 2, zest, val),
      hzvToRGB(hue, zest, val),
      hzvToRGB(hue - 2, zest, val),
      hsla[3]
    ];
  }
  return RGBA;
}

[ovomatik]

Thanks for your answer. I did the color conversion with the colorjs.io library. It was ok. But in the end I have to find another solution than p5js to work on images, it's too long for a website. I thought maybe with q5. It's lighter, but in the end it still takes 2 sec to process.

[quinton-ashley]

ok!