Color Jumps From Blue To Violette

I'm implementing a color screensaver. There is a colorrange and a slider. The colors are in (HSB). There are 6 colors. blue (230, S,B) green (130, S,B) yellow (55, S,B) orange (40,

Solution 1:

To get from one color to another on shortest path Joel's answer is fine, I can't make it better. So I make another approach staying as close as possible to the code you have already since you say first part works fine.

In function setValue() the beforelast line is else c = 360 - m * 15;. Change it to:

elsec= m *-15;

Now when the sliderValue goes from 12 to 15 the function returns a negative hue from 0 to -45. That way you remove the 'jump' from 0 to 315 and get continously decreasing values when sliderValue increases (and contrarywise). Since now value can be < 0 use adjustValue() each time you set a value to the canvas (adjustValue() internally checks for < 0 so you need no extra check). Then all the code you posted could look like this:

var cur = top.fillColor.hue;
if (cur > 300) cur -= 360;
var dif = cur - setValue();
if (Math.abs(dif) > 41) cur -= Math.round(dif / 1.05);
else {
    cur += top.counter_dsg < 20 ? -0.5 : 0.5; 
    top.counter_dsg += 0.5
}
if (top.counter_dsg > 39) top.counter_dsg = 0;
top.fillColor.hue = adjustValue(cur);

Solution 2:

I hope I correctly answer, but I'm not really sure to understand what you're trying to do. If I understand, you want to have some transitioning effect over a color change, right?

I propose a radically different approach, more "mathematical", fluent. Let's say you want to achieve the color transition within 1 second, regardless how big is the jump from old color to new color. You would just have to determinate a "transition vector", that would be the shortest possible: if the scale goes from 0 to 360, the vector is: (540 + new - old) % 360 - 180.

Why that? The "naive" vector is just (new-old). By adding 360 then modulo 360, we make sure we have a positive number. And by adding 180 (540=180+360) BEFORE modulo, then removing 180 AFTER modulo, we make sure we have a number in range [-180, 180] => which is what we want to get the shortest path.

For instance, with this formula:

• if old=5, new=10 => vector is +5
• if old=350, new=10 => vector is +20
• if old=350, new=340 => vector is -10

Then once you've calculated that vector, you just have to apply it to your color value at each time frame, multiplied by the time factor. For instance:

var v = (540 + newColor - oldColor) % 360 - 180;
var currentColor = oldColor;
var delta = 200; // millisecondsvar timeElapsed = 0;
var timeFrame = 1000; // 1svar hInt = setInterval(function() {
    if (timeElapsed >= timeFrame) {
       clearInterval(hInt);
       currentColor = newColor;
    } else {
       timeElapsed += delta;
       currentColor += v * delta / timeFrame;
    }
}, delta);

"currentColor" will give you the right color over time.