How can I accurately reverse this HSL formula using JavaScript?

Question

This formula works perfectly for obtaining Lightness and Saturation from an X/Y position within a rectangle. (Thanks to Collin Henderson.)

let hsv_value = 1 - (posy / 100);
let hsv_saturation = posx / 100;
let lightness = (hsv_value / 2) * (2 - hsv_saturation);
let saturation = (hsv_value * hsv_saturation) / (1 - Math.abs(2 * lightness - 1));

However, when I try to plot the value within the rectangle based on existing values I fail trying to reverse the above. I am currently of the opinion the formula is only good one way, but how would I set the value?

My original plan was to use the Saturation and Lightness values as the X and Y but clearly this is wrong. Based on the formula it shouldn't be difficult to create but I have spent far too long on this problem

Original post Get HSL value, given x,y, and hue

What does "_reverse the above_" mean? Are you trying to get `posx` and `posy` as a function of `lightness` and `saturation`? — M0nst3R, Jul 21 '23 at 19:56
Set the posx and posy values, sorry, my question wasn't clear. — atat, Jul 21 '23 at 19:57
If you got this formula from a Stack Overflow post, you should reference the post as well as the author. — Heretic Monkey, Jul 21 '23 at 19:57
Is it expected that when both x and y are zero that you have a division by zero? 0 / 0 is undefined... — trincot, Jul 21 '23 at 20:17
So that really means there will be no lightness and saturation combination that can lead to x and y being 0. — trincot, Jul 21 '23 at 20:20

score 1 · Answer 1 · answered Jul 21 '23 at 21:58

Using Mathematica I get the following solution to the system of two equations:

if 2 * lightness - 1 < 0: posx = (200 * saturation)/(1 + saturation), posy = 100 * (1 - lightness * (1 + saturation))
else: posx = -200 * (lightness - 1) * saturation / (lightness + saturation - lightness * saturation), posy = 100 * (lightness - 1) * (saturation - 1).

In javascript, with testing:

function test(posx, posy){
   //OP direct formula
   let hsv_value = 1 - (posy / 100);
   let hsv_saturation = posx / 100;
   let lightness = (hsv_value / 2) * (2 - hsv_saturation);
   let saturation = (hsv_value * hsv_saturation) / (1 - Math.abs(2 * lightness - 1));
   
   //inverse formula:
   const [posx_inv, posy_inv] = (2 * lightness - 1 < 0) ?
      [ (200 * saturation) / (1 + saturation), 
      100 * (1 - lightness * (1 + saturation))] :
      [ -200 * (lightness - 1) * saturation / (lightness + saturation - lightness * saturation),
        100 * (lightness - 1) * (saturation - 1)];
   
   console.log('initial data:', {posx, posy});
   //console.log({lightness, saturation});
   console.log('solution:', {posx_inv, posy_inv});
}

//test(10, 40)
test(100*Math.random(), 100*Math.random())

Thanks again Kikon! Seriously, I would have never solved this without your help. — atat, Jul 21 '23 at 22:06

How can I accurately reverse this HSL formula using JavaScript?

1 Answers1

Linked