About those Colored Bars

December 10, 2009

You might be wondering what those colored bars on top of my content are. And you’re right to wonder, because it’s kind of strange and out of place. While I was redesigning my site, I ran into a problem–I wanted to be able to add a little visual flare to my site, but I kept running into a dead end. I tried a featured photo thing from my vast collection of photography, but that ended up being too hard to maintain. Eventually, I settled on what you see now - a series of 9 colored bars, but I gave it a twist.

You see, the colors change everyday, and I don’t have to do anything to make it happen. I just defined 4 sets of colors, one for winter, spring, summer, and fall, and then wrote up some code to calculate the gradient between each set, and then I show the color set for any given day based on where today is on the line from season to season.

My base scheme looks like this (HSV values):

$this->schemes = array(
	$this->starts['winter'] => array(
		array(223, 58, 26), array(202, 53, 75), array(209, 11, 98)
	),
	$this->starts['spring'] => array(
		array(0, 33, 69), array(83, 31, 84), array(187, 64, 66)
	),
	$this->starts['summer'] => array(
		array(93, 87, 100), array(349, 95, 100), array(33, 100, 100)
	),
	$this->starts['fall'] => array(
		array(0, 80, 85), array(35, 80, 85), array(45, 95, 60)
	)
);

I expand those sets of 3 into sets of nine by rotating the H value 36° to the left and right. Then I convert the values to RGB, and for each set I calculate the median values like this, with a distance of .5 (meaning half the distance between each point). This is done for each of the R, G, and B values.

foreach($from_vars as $i => $value) {
	if($value > $to_vars[$i]) {
		$diff = $value - $to_vars[$i];
		$from_vars[$i] = $to_vars[$i] + ($diff * $distance);
	}
	else {
		$diff = $to_vars[$i] - $value;
		$from_vars[$i] = $value + ($diff * $distance);
	}

	$from_vars[$i] = round($from_vars[$i], 0);
}

Basically, it just averages the two colors and applies those values to the date in between the start and end. It’s actually a lot more complicated than that, but that wouldn’t fit in one post.