CODEWITHSUNDEEP
javascriptcsshtml5-canvasweb-audio-api
Akash
Akash

Reputation: 35

HSL colour logic for JS and canvas

I am using spectrogram and its working fine within my ctx.

As over all color i am using css filter: hue-rotate(160);

Can someone please explain me how he is suggesting colours for the waveform or the energy plot within the spectrogram and how the background is decided ?

I mean the background colour and the colour of the energy plot ?

I tried random changing of values but it seems to break the spectrogram plot. Clearly I am not understanding how the colours are derived ? All I am able to do is use a universal filter for the canvas.

It would be great if I can control the background color and energy plot colour.

JS line on 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);
  }

Thank you :)

EDIT: added relevant colour section from the js.

Upvotes: 1

Views: 3982

Answers (1)

Michael Radionov
Michael Radionov

Reputation: 13309

HSL color model uses three components to compose a color - Hue, Saturation and Lightness. In the code saturation is hard-coded to 100%, which means that the color will be most saturated; as you decrease the value it will transition more to grayscale. The lightness regulates the value of grayscale (from black to white), 50% sets is right in the middle between full black and full white. Hue represents the "color" itself i.e. red, blue, purple, etc. By applying different saturation and lightness to a color, we can create different versions of it (dark red, light red, etc).

HSL model can be visualized as a cylinder, where lightness maps to it's height, saturation maps to radius and the colors (or hue) are distributed around the circle from 0 to 360 degrees.

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) for the image.

Update:

The original function can be modified to allow changing the ranges for saturation and lightness as well. The background you are aiming for #2a2c2d in HSL is hls(200°, 3%, 17%). If you want to keep the color as a basis, you could play around with saturation and lightness ranges.

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

You can just google your color "#2a2c2d", you will see a google search color picker. It displays an HSL value as well. By moving the color selector you can find the color you want for the max value and see it's HLS value.

enter image description here

Basically "#2a2c2d" is you background color and it is composed from fromXXX variables. What is left is to find the brightest color for max frequency value, it's components should be set to toXXX variables. The function will give you a smooth transition between two colors.

Upvotes: 3

Related Questions