Change (RGBA) values to (HSl) after loading the pixels array in p5js

Question

Hello all :) I am struggeling to change (RGBA) values to (HSL) after loading the pixels array. I have loaded an image and want to change the colors on a HSL base, not RGBA.I have tried lots of approach but still no results... This color change must be on the fly... Maybe my approach is compleatly wrong please help.

        let img;
    let r,g,b;
    let h,s,l;
    let maxRGB;
    let minRGB;
        function preload() {
          img = loadImage('https://media.istockphoto.com/id/1130743520/photo/branch-in-blossom-isolated-on-white-background-plum.jpg?s=1024x1024&w=is&k=20&c=XyQOr40sUU0xodn7zk-sNaMR-85_mRDImRPL4o4GvPY=');
        }
        
        function setup() {
          createCanvas(400, 400);
        }
        
        function draw() {
          background(220);
          image(img, 0, 0, width, height);
         let d = pixelDensity();
            loadPixels();
              for (let i = 0; i < height*d; i++) {
              for (let j = 0; j < width*d; j++) {
                var index = 4*(i+j*width*d);
          
                   r = pixels[index+0];
                   g = pixels[index+1];
                   b = pixels[index+2];
                
              
               maxRGB = Math.max(Math.max(r, g), b);
               minRGB = Math.min(Math.min(r, g), b);
                
                s = (maxRGB - minRGB) / maxRGB;
                l = maxRGB;
                
                var dr = (maxRGB - r) /
                    maxRGB - minRGB;
    
                var dg = (maxRGB - g) /
                    maxRGB - minRGB;
    
                var db = (maxRGB - b) /
                    maxRGB - minRGB;
    
    
      if (s == 0) {
        h = 0;
      } else if (r == maxRGB && g == minRGB ){
        h = 5 + db;
      } else if (r == maxRGB && g != minRGB ){
        h = 1 - dg;
      } else if (g == maxRGB && b == minRGB ){
        h = dr + 1;
      } else if (g == maxRGB && b != minRGB ){
        h = 3 - db;
      } else if (r == maxRGB ){
        h = 3 + dg;
      } else {
        h = 5 - dr;
      }
    
      h = h * 60;
    
STRUGGLING WITH PART TO CHANGE PIXELS FROM RGBA TO HSL
          

    }}
         
                updatePixels()
        }

Answer 1

Inside the loop, you have the rgb color of each pixel. you can use a function to convert rgb to hsl. I found this one.

let img;
let r, g, b;
function preload() {
  img = loadImage(
    "https://media.istockphoto.com/id/1130743520/photo/branch-in-blossom-isolated-on-white-background-plum.jpg?s=1024x1024&w=is&k=20&c=XyQOr40sUU0xodn7zk-sNaMR-85_mRDImRPL4o4GvPY="
  );
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  image(img, 0, 0, width, height);
  const d = pixelDensity();
  loadPixels();
  for (let i = 0; i < height * d; i++) {
    for (let j = 0; j < width * d; j++) {
      const index = 4 * (i + j * width * d);

      r = pixels[index + 0];
      g = pixels[index + 1];
      b = pixels[index + 2];

      const [h, s, l] = rgbToHsl(r, g, b);
      pixels[index + 0] = h;
      pixels[index + 1] = s;
      pixels[index + 2] = l;
    }
  }

  updatePixels();
  noLoop();
}

function rgbToHsl(r, g, b) {
  r /= 255;
  g /= 255;
  b /= 255;
  const l = Math.max(r, g, b);
  const s = l - Math.min(r, g, b);
  const h = s
    ? l === r
      ? (g - b) / s
      : l === g
      ? 2 + (b - r) / s
      : 4 + (r - g) / s
    : 0;
  return [
    60 * h < 0 ? 60 * h + 360 : 60 * h,
    100 * (s ? (l <= 0.5 ? s / (2 * l - s) : s / (2 - (2 * l - s))) : 0),
    (100 * (2 * l - s)) / 2,
  ];
}