p5.js加载像素数组后RGBA转HSL实现技术求助

原代码的核心问题 #

• 像素索引计算错误：原代码的index = 4*(i+j*width*d)逻辑错误，p5.js的像素数组按行存储，正确索引应为4*(j + i * width * d)（i为行号，j为列号）。
• HSL计算错误：亮度L、饱和度S的公式不符合标准，且RGB未归一化到0-1范围；dr/dg/db的运算括号错误，导致计算逻辑混乱。
• 缺少HSL转RGB步骤：p5.js的pixels数组只能存储RGB(A)值，无法直接写入HSL值，必须将修改后的HSL转回RGB才能更新像素。

修正步骤 #

1. RGB归一化：将0-255的RGB值转换为0-1的浮点数，这是HSL计算的标准前置步骤。
2. 正确计算HSL：使用标准的RGB转HSL公式，处理边界情况（比如maxRGB等于minRGB时饱和度为0）。
3. 修改HSL值：根据需求调整H（色相）、S（饱和度）、L（亮度）。
4. HSL转RGB：将修改后的HSL转换回0-255的RGB值。
5. 更新像素数组：把转换后的RGB值写入pixels对应位置，最后调用updatePixels()生效。

完整修正代码 #

let img;
let r, g, b, a;
let h, s, l;
let maxRGB, 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++) {
      // 修正像素索引计算
      let index = 4 * (j + i * width * d);
      
      // 读取RGB值并归一化到0-1范围
      r = pixels[index + 0] / 255;
      g = pixels[index + 1] / 255;
      b = pixels[index + 2] / 255;
      a = pixels[index + 3]; // 保留原Alpha通道
      
      maxRGB = Math.max(r, g, b);
      minRGB = Math.min(r, g, b);
      let delta = maxRGB - minRGB;
      
      // 计算色相H
      if (delta === 0) {
        h = 0;
      } else if (maxRGB === r) {
        h = ((g - b) / delta) % 6;
      } else if (maxRGB === g) {
        h = (b - r) / delta + 2;
      } else {
        h = (r - g) / delta + 4;
      }
      h = h * 60;
      if (h < 0) h += 360;
      
      // 计算亮度L
      l = (maxRGB + minRGB) / 2;
      
      // 计算饱和度S
      s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
      
      // ----------------------
      // 此处可自定义修改HSL值，示例：色相反转+饱和度提升20%
      h = (h + 180) % 360;
      s = constrain(s * 1.2, 0, 1);
      // l = constrain(l * 0.8, 0, 1); // 可选：调整亮度
      // ----------------------
      
      // 将修改后的HSL转回RGB
      let c = (1 - Math.abs(2 * l - 1)) * s;
      let x = c * (1 - Math.abs((h / 60) % 2 - 1));
      let m = l - c / 2;
      let r_, g_, b_;
      
      if (h >= 0 && h < 60) {
        r_ = c; g_ = x; b_ = 0;
      } else if (h >= 60 && h < 120) {
        r_ = x; g_ = c; b_ = 0;
      } else if (h >= 120 && h < 180) {
        r_ = 0; g_ = c; b_ = x;
      } else if (h >= 180 && h < 240) {
        r_ = 0; g_ = x; b_ = c;
      } else if (h >= 240 && h < 300) {
        r_ = x; g_ = 0; b_ = c;
      } else {
        r_ = c; g_ = 0; b_ = x;
      }
      
      // 转换回0-255的RGB范围
      r_ = Math.round((r_ + m) * 255);
      g_ = Math.round((g_ + m) * 255);
      b_ = Math.round((b_ + m) * 255);
      
      // 更新像素数组
      pixels[index + 0] = r_;
      pixels[index + 1] = g_;
      pixels[index + 2] = b_;
      pixels[index + 3] = a;
    }
  }
  
  updatePixels();
}

关键说明 #

• 归一化RGB到0-1是HSL计算的基础，避免数值范围错误。
• 标准的HSL转RGB公式确保颜色转换准确，无失真。
• 在自定义修改HSL的区域，可根据需求自由调整色相、饱和度或亮度，示例仅作参考。
• 保留了原图像的Alpha通道，避免透明信息丢失。

内容的提问来源于stack exchange，提问作者Michael