Color.hsl doesn't function as expected
sudomakecoffee opened this issue · 2 comments
When trying to set the initial background color for a CanvasSpace via Pts.quickstart, I created a Color variable using Color.hsl(268, 0.37, 0.51), which should be purple. However, the color is a vivid red. When logging the value of the color to console, it shows as hsl(127,84,176,1).
Am I misunderstanding how the hsl factory function works? The documentation seems pretty clear on the expected values, but the internal value does not match the expected.
Code sample, modified from guide.op_closest_2:
(function() {
// This should be purple
let bgColor = Color.hsl(268, 0.37, 0.51);
// Creating the same color as RGB works
// let bgColor = Color.rgb(127, 84, 176);
// It also works if you convert to rgb
// let bgColor = Color.hsl(268, 0.37, 0.51).toMode('rgb', true);
let strokeColor = Color.fromHex("FFFFFF");
console.table(bgColor.toString(), strokeColor.toString());
let run = Pts.quickStart( "#pt", bgColor );
let pts;
let count = parseInt(window.innerWidth * 0.2);
run( (time, ftime) => {
if (!pts) pts = Create.distributeRandom( space.innerBound, count );
let t = space.pointer;
pts.sort( (a,b) => a.$subtract(t).magnitudeSq() - b.$subtract(t).magnitudeSq() );
form.strokeOnly(strokeColor, 1);
pts.forEach( (p, i) => form.point( p, 20 - 20*i/pts.length, "circle" ) )
});
//// ----
space.bindMouse().bindTouch().play();
Hi @sudomakecoffee, sorry for the late response. I missed the Github notification.
Since the color is still in HSL mode, it will need to convert back to RGB when you want to use it for rendering. Eg:
let run = Pts.quickStart( "#pt", Color.HSLtoRGB(bgColor) );
The documentation probably needs some improvement to make this clear. I'll keep this issue open. Thanks for reporting!