Как преобразовать цветовую схему изображения, загруженного в p5. js, из RGB (который я считаю по умолчанию) в любое другое, например, HSL? - PullRequest
Новая
       17

Как преобразовать цветовую схему изображения, загруженного в p5. js, из RGB (который я считаю по умолчанию) в любое другое, например, HSL?

0 голосов
/ 03 апреля 2020

Я попытался добавить эту строку // colorMode (HSL, 255); но это меняет исходные цвета на изображении. Я хочу сохранить те же цвета в RGB, но настроить их значения HSL с помощью ползунков.

1 Ответ

0 голосов
/ 05 апреля 2020

Вопрос немного сложен для понимания, но я понимаю следующее:

Вы загрузили изображение и хотите изменить цвета на основе HSL, а не RGB.

А вы загрузить массив пикселей из изображения, и вы меняете эти значения? Это действительно ценности RGB. (строго RGBA). Мой подход заключается в том, чтобы l oop по всем пикселям и извлечь их значение оттенка (https://p5js.org/reference/# / p5 / hue ), а затем изменить его и применить это значение к массиву пикселей.

Я сделал пример того, как конвертировать rgb в значения hsl без изменения colorMode здесь: https://editor.p5js.org/EthanHermsey/sketches/YozzL8y18

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

  //fill left half of canvas with RGB color
  let c = color(0, 126, 255);
  fill(c);
  rect(0, 0, width/2, height);

  //extract Hue, Saturation and Lightness
  let hueValue = floor( hue(c) );
  let saturationValue = saturation(c);
  let lightnessValue = lightness(c);  

  //Change hueValue? For example: add a random amount to it [-10 to 10]. 
  //The constraint helps to keep the value between 0 and 255;    
  //uncomment this next line;
  //hueValue = constrain( hueValue + floor(random(-10, 10)), 0, 255);

  //log new color
  console.log( `hsl(${ hueValue }, ${ saturationValue }%, ${ lightnessValue }%)` );

  //fill the right halve of the canvas with the new HSL color
  fill( `hsl(${ hueValue }, ${ saturationValue }%, ${ lightnessValue }%)` );
  rect(width/2, 0, width/2, height);
}
...