Remove weird Solver code.

[Robotino04]

Also checks if the lamp is reachable and uses random colors otherwise.

[remiliacn]

Your code does not look AI generated, I do not recommend approve this PR.

[wolfschaf]

Finally something sane, but I would like to bikeshed a bit more:

• Color change error
  The shifting does not always lerp flawlessly to the target value.
  I noticed it when it changed colors from yellow to blue, but I think on some other color combination it also sometimes does it.
  Don't know what causes it though, either the lerping over RGB or an error when calculating the hue shift. So I would just directly lerp over the hue shift and hope that fixes it.
• Save hue shift instead of RGB
  I would also just directly calc the hue shift when fetching and storing it later for lerping. Then we don't have to calc hue2rgb in generateRandomSaturatedColor() and can just return the hue shift.

[wolfschaf]

Would clean this up:

if (isRunningOnVedalsPC){
    fetch("http://localhost:8000/lamp")
        .then(response => response.text().trim()) //toLowerCase() not needed anymore
        .then(hexColor => {targetColor = hexToRgb(hexColor);}) //or just calc the hue shift here
        .catch(error => {
            isRunningOnVedalsPC = false;
            console.error("Failed to fetch lamp color:", error);
        });
}

[wolfschaf]

Why divide by 6?
Couldn't we just multiply by 60 and then remove the *360 below?

But I would just restructure this whole thing, since we only need to calc the hue value.

function calculateHueShift(r, g, b) {
    function rgbToHue(r, g, b) {
        r /= 255;
        g /= 255;
        b /= 255;

        const cMax  = Math.max(r,g,b);
        const cMin  = Math.min(r,g,b);
        const delta = cMax - cMin;
    
        if (!delta) return 0;
        
        let hue;
        switch (cMax) {
            case r: hue = (g - b) / delta + (g < b ? 6 : 0); break;
            case g: hue = (b - r) / delta + 2; break;
            case b: hue = (r - g) / delta + 4; break;
        }
        return hue * 60;
    }

    // Convert yellow RGB(255, 255, 0) and target color to hue
    const yellowHue = rgbToHue(255, 255, 0);
    const targetHue = rgbToHue(r, g, b);

    // Calculate hue shift
    let hueShift = targetHue - yellowHue;
    if (hueShift < 0) hueShift += 360;

    return hueShift;
}

[wolfschaf]

Like mentioned, just return hue if we lerp over hue shift

[Robotino04]

Your code does not look AI generated, I do not recommend approve this PR.

Then you didn't look hard enough. ChatGPT wrote all the color conversions.

[Robotino04]

Finally something sane, but I would like to bikeshed a bit more:

* **Color change error**
  The shifting does not always lerp flawlessly to the target value.
  I noticed it when it changed colors from yellow to blue, but I think on some other color combination it also sometimes does it.
  Don't know what causes it though, either the lerping over RGB or an error when calculating the hue shift. So I would just directly lerp over the hue shift and hope that fixes it.

This probably happens because yellow and blue are complementary colors so RGB-lerping them will be gray for some time. And gray doesn't have a real hue so it's just random.
I didn't lerp over the hue shift because that would show all the colors in between as well. So yellow to blue would still show orange and violet before reaching blue. It would probably still look better so I'll try it anyways.

[wolfschaf]

This probably happens because yellow and blue are complementary colors so RGB-lerping them will be gray for some time. And gray doesn't have a real hue so it's just random. I didn't lerp over the hue shift because that would show all the colors in between as well. So yellow to blue would still show orange and violet before reaching blue. It would probably still look better so I'll try it anyways.

Ahh, yes, I see. It's because we don't change the saturation and the brightness, so after B>(RG) it jumps directly to the blue hue. In other words, the lerp is never linear and in this case it is instant.

Hmm, one solution would to reduce the sepia, so use the saturation value as sepia, I think?
Or just try and see how good the hue shift lerping looks.

[Robotino04]

Ahh, yes, I see. It's because we don't change the saturation and the brightness, so after B>(RG) it jumps directly to the blue hue. In other words, the lerp is never linear and in this case it is instant.

Hmm, one solution would to reduce the sepia, so use the saturation value as sepia, I think? Or just try and see how good the hue shift lerping looks.

Lerping the hue looks fine imo. The only case where it looks weird to show all colors in between is still complementary colors. But those would just be white for a while if we set the sepia using saturation, so idk which is better.

[Robotino04]

Nevermind all this. I found a pure css solution so we can just transition: background-color now.

[wolfschaf]

Looks good otherwise, glad you found a simple solution 👍

[wolfschaf]

This can be removed

[wolfschaf]

I would reduce this to:

#lavalamp {
    cursor: pointer;
    mix-blend-mode: luminosity;
}

#lamp-container {
    animation: pulse 2s ease-in-out infinite;
    transition: background-color 1.5s;

    mask-image: url(lavalamp.png);
    mask-size: 98%;  /*avoid artifacts*/
    mask-repeat: no-repeat;
    mask-position: center;
}