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

see https://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion — blechdavier, Nov 25 '22 at 21:16

score 3 · Accepted Answer · answered Nov 26 '22 at 12:38

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,
  ];
}

Nice answer (+1). A bit of a hack, but [`p5.Color`](https://p5js.org/reference/#/p5.Color) kinda does this already(but it's undocumented), e.g. ```function rgbToHsl(r, g, b){ rgb = color(r, g, b); return [int(rgb._getHue()), int(rgb._getSaturation()), int(rgb._getLightness())]; }```. I think exposing the formula for others to learn (instead of using an undocumented workaround) is better. — George Profenza, Nov 26 '22 at 22:25
Hello @Azadeh Radkianpour Thx for answering my question :) Maybe You know how can I manipulate of this image hue on the mouseX movement ? — Michael, Nov 29 '22 at 12:07
@Michael This library is for making creative code. you can't expect these kind of questions to be answered. If you want to use X Y position of mouse, you should check the p5js official reference: https://p5js.org/reference/#/p5/mouseMoved — Azadeh Radkianpour, Nov 29 '22 at 19:08
Hello @Azadeh First of all, thank you for your comment and hint on how to achieve the desired effect. Second, I know it's a creative coding library, but I wasn't creative at the time :) it's good that today I'm creative and figured out a way to achieve the desired effect ;) BR Michael — Michael, Dec 01 '22 at 12:40

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

1 Answers1