Making a Clock, a Couple of Questions

Patterns and Code
1

Ok, so I am really beginning to understand this thing better. I have two questions today. I am making a simple clock that lights LED in three different colors for the hours, minutes, and seconds.

(1) When the minutes and second are the same I want to mix the two colors seconds = hsv(0, 1, 1), minutes = hsv(0.333, 1, 1). I mix them by averaging the hue values (0 + 0.333)/2 = 0.167. This looks like it should be the yellow-ish color, but it is not. When I set a pixel directly to that value it looks right. Any ideas here?

(2) I eventually want the LEDs to light smoothly between second, minutes, and hours not like they are now. How do I go about figuring partial seconds in this scenario?

Code is posted below.

Thanks again,
RH

var sec = 0;
var min = 0;
var hour = 0;

export function render(index) {

var secColor = 0
minColor = 0.333
var hrColor = 0.666;

var pixelSet = false;

sec = clockSecond();
min = clockMinute();
hour = clockHour();

// Set the pixel for the hour, minute, and second
if (index == sec){
hsv(secColor, 1, 1);
pixelSet = true;
} else if (index == min){
hsv(minColor, 1, 1);
pixelSet = true;
} else if (index == (5 * hour)){
hsv(hrColor, 1, 1);
pixelSet = true;
}

// What to do if two pixels line up.
if ( (index == sec) && (index == min)){
hsv( (secColor + minColor)/2, 0, 1.0);
pixelSet = true;
}

if ( (index == sec) && (index == (5 * hour))){
hsv( ((secColor + hrColor) / 2), 0, 1.0);
pixelSet = true;
}

if ( (index == min) && (index == (5 * hour))){
hsv( ((minColor + hrColor) / 2), 0, 1.0);
pixelSet = true;
}

// Turn the pixel off if it is not supposed to be on
if (!pixelSet)
hsv(1, 1, 0);

}

2

Hi @robhixkg,

A alternative: it looks like you are using straight red, green, and blue. Since that is the case, you could use the rgb() function instead of hsv(). Since that is additive, it will mix. If all 3 “hands” overlapped, you’d easily get white, which otherwise you’d have to check for in an hsv blend.

On the hsv path, the thing that you are probably running in to is that the hsv used isn’t adjusted for perception. Green will dominate, so a yellow/orange actually has a lot less green in it. Take a look at this thread for some ways to transform a hue into something that favors orange/yellow a bit more:

You can also hop over to the pattern site and grab “Utility: perceptual hue” for some code!

Either way, I would love to see the result and your clock!