It concerns dynamic colour changing. I noticed that for websites with different colour schemes it's a little bit fiddly and annoying to define all of the colours manually in a database and after seeing Adobe's kuler (http://kuler.adobe.com/) I thought it would be cool to have a PHP implementation of this.
Some source code:
Code: Select all
function getStrongest($r, $g, $b) {
$strongest = max($r, $g, $b);
if ($strongest == $r) {
return 'r';
}
else if ($strongest == $g) {
return 'g';
}
else if ($strongest == $b) {
return 'b';
}
}
function colourChange($colour, $red_change, $green_change, $blue_change) {
$colour = preg_replace("/\#/","",$colour);
if (strlen($colour) != 6) {
return array("colour" => false, "error" => "Invalid colour value.");
}
$red = hexdec(substr($colour,0,2));
$green = hexdec(substr($colour,2,2));
$blue = hexdec(substr($colour,4,2));
$red += intval($red_change);
$green += intval($green_change);
$blue += intval($blue_change);
if ($red > 255) {
$red = 255;
}
if ($red < 0) {
$red = 0;
}
if ($green > 255) {
$green = 255;
}
if ($green < 0) {
$green = 0;
}
if ($blue > 255) {
$blue = 255;
}
if ($blue < 0) {
$blue = 0;
}
if (strlen(dechex($red)) == 1) {
$new_red = "0".dechex($red);
}
else {
$new_red = dechex($red);
}
if (strlen(dechex($green)) == 1) {
$new_green = "0".dechex($green);
}
else {
$new_green = dechex($green);
}
if (strlen(dechex($blue)) == 1) {
$new_blue = "0".dechex($blue);
}
else {
$new_blue = dechex($blue);
}
return array("colour" => "#".$new_red.$new_green.$new_blue, "error" => false);
}
The way it works is quite simple, it breaks down a 3 byte hexidecimal value into its separate red, green and blue bytes and allows you to edit them with parameters passed to the function. I have found this code very useful for doing things such as slight increase/decrease in brightness for mouse overs etc.
I am open to the fact it probably isn't as efficient/well written as it could be which is why I would love some constructive criticism on it to make it a really good, useful function
Example of its usage:
http://lbak.co.uk/experiments/colourchange/
The first box is your initial colour, the following 3 boxes are your red, green and blue increment/decrement values (respectively). Clicking "Go!" gives you a little gradient of your desired changes as well as their output values and the "Colour Square" option is really cool. It was a proof of concept kinda thing I decided to try out that generates a colour square similar to one you would find in Photoshop when selecting a colour. It isn't perfect, I recommend you just try it with solid red, green or blue but the idea is definitely there
Source code for the colour square and colour gradient:
Code: Select all
(CSS)
.r {
width: 4px;
height: 4px;
display: inline-block;
}
(/CSS)
$x = 0;
$y = 0;
$z = 0;
$start = preg_replace("/\#/","",$_POST['colour']);
$strongest = getStrongest(hexdec(substr($start,0,2)),hexdec(substr($start,2,2)),hexdec(substr($start,4,2)));
$cur_red = hexdec(substr($start,0,2));
$cur_green = hexdec(substr($start,2,2));
$cur_blue = hexdec(substr($start,4,2));
$length = 64;
if ($strongest == 'r') {
$r = 0;
$g = 0;
$b = 0;
while ($y < $length) {
$x = 0;
while ($x < $length) {
$g_inc = floor((256 - $cur_green) / $length);
$b_inc = floor((256 - $cur_blue) / $length);
$colour = colourChange($start,$r,$g,$b);
echo '<div class="r" style="background-color: '.$colour['colour'].'"></div>';
$g += $g_inc;
$b += $b_inc;
$x++;
//echo 'r'.$r.'g'.$g.'b'.$b;
}
echo '<br />';
$y++;
$r = -4 * $y;
$g = -4 * $y;
$b = -4 * $y;
}
}
else if ($strongest == 'g') {
$r = 0;
$g = 0;
$b = 0;
while ($y < 64) {
$x = 0;
while ($x < 64) {
$r_inc = floor((256 - $cur_red) / $length);
$b_inc = floor((256 - $cur_blue) / $length);
$colour = colourChange($start,$r,$g,$b);
echo '<div style="width: 4px; height: 4px; background-color: '.$colour['colour'].'; display: inline-block;" onclick="document.getElementById(\'colour\').value = this.style.backgroundColor"></div>';
$r += $r_inc;
$b += $b_inc;
$x++;
//echo 'r'.$r.'g'.$g.'b'.$b;
}
echo '<br />';
$y++;
$r = -4 * $y;
$g = -4 * $y;
$b = -4 * $y;
}
}
else if ($strongest == 'b') {
$r = 0;
$g = 0;
$b = 0;
while ($y < 64) {
$x = 0;
while ($x < 64) {
$g_inc = floor((256 - $cur_green) / $length);
$r_inc = floor((256 - $cur_red) / $length);
$colour = colourChange($start,$r,$g,$b);
echo '<div style="width: 4px; height: 4px; background-color: '.$colour['colour'].'; display: inline-block;" onclick="document.getElementById(\'colour\').value = this.style.backgroundColor"></div>';
$g += $g_inc;
$r += $r_inc;
$x++;
//echo 'r'.$r.'g'.$g.'b'.$b;
}
echo '<br />';
$y++;
$r = -4 * $y;
$g = -4 * $y;
$b = -4 * $y;
}
}
PS: I apologies for the lack of comments on the colour square example but I hope it makes sense to some of the seasoned PHP coders
Thanks,
Sam