HSL color logi c для JS и холста - PullRequest
Новая
       63

HSL color logi c для JS и холста

0 голосов
/ 12 июля 2020

Я использую спектрограмму , и она отлично работает в моем ctx.

Как и для всех цветов, которые я использую css filter: hue-rotate(160);

Кто-нибудь, пожалуйста, объясните мне, как он предлагает цвета для формы волны или графика энергии в спектрограмме и как определяется фон?

Я имею в виду цвет фона и цвет графика энергии?

Я пробовал случайное изменение значений, но, кажется, нарушает график спектрограммы. Ясно, что я не понимаю, как получаются цвета? Все, что я могу сделать, это использовать универсальный фильтр для холста.

Было бы здорово, если бы я мог контролировать цвет фона и цвет графика энергии.

JS line на Git

getFullColor(value) {
    var fromH = 62;
    var toH = 0;
    var percent = value / 255;
    var delta = percent * (toH - fromH);
    var hue = fromH + delta;
    return 'hsl(H, 100%, 50%)'.replace(/H/g, hue);
  }

Спасибо :)

РЕДАКТИРОВАТЬ: добавлен соответствующий цветовой раздел из js.

1 Ответ

0 голосов
/ 12 июля 2020

Цветовая модель HSL использует три компонента для создания цвета - оттенок, насыщенность и яркость. В коде насыщенность жестко задана как 100%, что означает, что цвет будет наиболее насыщенным; при уменьшении значения он будет больше переходить в оттенки серого. Яркость регулирует значение оттенков серого (от черного к белому), 50% наборов находится прямо посередине между полностью черным и полностью белым. Оттенок представляет собой сам «цвет», т.е. красный, синий, фиолетовый и т. Д. c. Применяя различную насыщенность и яркость к цвету, мы можем создавать разные его версии (темно-красный, светло-красный и т. Д. c).

Модель HSL может быть визуализирована как цилиндр, где ему соответствует яркость высота, насыщенность сопоставляются с радиусом, а цвета (или оттенок) распределяются по кругу от 0 до 360 градусов.

HSL cylinder

To pick a color you need a value from 0 to 360. The order of the colors is well defined. At 0 degrees is pure red, as you increase the value and go around the circle you get to orange, yellow, green and so on. At 360 degrees you come back to red.

enter image description here

Finally, getting back to the code, a hue is the only thing being calculated, and it will define the final color. The library author defined two variables fromH = 62 and toH = 0, which basically tells what sector of the hue circle will be a source of the final color.

enter image description here

Then library author converts the frequency value (0-255) to a hue value between 0 and 62. Lower frequency value will result to hue value close to 62 degrees (yellow-orange color), higher frequency value will be closer to hue value of 0 (closer to the pure red).

if (value == 0)   hue = 62;
if (value == 100) hue = 37.6;
if (value == 255) hue = 0;

If you want to change the color (hue) of the plot, you should adjust the variables fromH and toH to pick a sector of the circle with the color range you want.

Credit to https://science.wikia.org/ru/wiki/HSL_%D0%B8_HSV_ (% D1% 86 % D0% B2% D0% B5% D1% 82% D0% BE% D0% B2% D1% 8B% D0% B5_% D0% BC% D0% BE% D0% B4% D0% B5% D0% BB% D0 % B8) для изображения.

Обновление :

Исходная функция может быть изменена, чтобы также можно было изменять диапазоны для насыщенности и яркости. Фон, на который вы нацеливаетесь #2a2c2d в HSL, - hls(200°, 3%, 17%). Если вы хотите сохранить цвет в качестве основы, вы можете поиграть с диапазонами насыщенности и яркости. 

getFullColor: function(value) {
  var fromH = 200;
  var toH = 200;

  var fromS = 10;
  var toS = 50;

  var fromL = 20;
  var toL = 50;

  var percent = value / 255;

  var hue = fromH + percent * (toH - fromH);
  var saturation = fromS + percent * (toS - fromS);
  var lightness = fromL + percent * (toL - fromL);

  return 'hsl(H, S%, L%)'
    .replace(/H/, hue)
    .replace(/S/, saturation)
    .replace(/L/, lightness);
}

Вы можете просто погуглить свой цвет "# 2a2c2d", вы увидите палитру цветов в поиске Google. Он также отображает значение HSL. Перемещая селектор цвета, вы можете найти нужный цвет для максимального значения и увидеть его значение HLS.

введите описание изображения здесь

В основном "# 2a2c2d" - это цвет вашего фона, и он состоит из fromXXX переменных. Осталось найти самый яркий цвет для максимального значения частоты, его компоненты должны быть установлены в toXXX переменных. Функция предоставит вам плавный переход между двумя цветами.

...