<html>
<head>
<title>Color fade test</title>
</head>
<script language="JavaScript">
<!--
// Analysis
/*****************************************************************
* *
* This script adapted from the original written by Travis Simon *
* for apcmag. You can find the JavaScript tutorial online at *
* http://apcmag.com. *
* *
* Feel free to use any portion of the script, but please *
* include this header so that others may benefit from the *
* material as well. *
* *
*****************************************************************/
// toHex converts from decimal to Hex
function toHex(number)
{
var temp=0;
var hexNumber = "";
var hexString = "0123456789ABCDEF";
hexNumber += hexString.charAt(Math.floor(number/16));
hexNumber += hexString.charAt(Math.floor(number%16));
return hexNumber;
}
// toDec assumes the Hex number is between 0 & 255
function toDec(number)
{
var hexString = "0123456789ABCDEF";
var dec = 0;
dec = hexString.indexOf(number.charAt(0)) * 16 +
hexString.indexOf(number.charAt(1));
return dec;
}
// minDif finds the min value > 0
// function assumes values in order (ie. difRed, difGreen, difBlue)
function minDif(a, b, c)
{
var min = "";
if(Math.abs(a)>=Math.abs(b))
if(Math.abs(a)>=Math.abs(c))
if(Math.abs(b==0) && Math.abs(c==0))
min = "red";
else if(Math.abs(b==0) || (Math.abs(b)>Math.abs(c) && Math.abs(c)!=0))
min = "blue";
else
min = "green";
else
if(Math.abs(a)==0 && Math.abs(b) ==0)
min= "blue";
else if(Math.abs(b)==0)
min= "red";
else
min = "green";
else
if(Math.abs(b)>=Math.abs(c))
if(Math.abs(a==0) && Math.abs(c==0))
min = "green";
else if(Math.abs(a==0) || (Math.abs(a)>Math.abs(c) && Math.abs(c)!=0))
min= "blue";
else
min = "red";
else
if(Math.abs(a)==0)
min = "green";
else
min = "red";
return min;
}
// bgFade function
function bgFade(steps, red, green, blue, rSteps, gSteps, bSteps)
{
for(var x=0; x < steps; x++)
{
red += rSteps;
green += gSteps;
blue += bSteps;
document.bgColor = "#" + toHex(red) + toHex(green) + toHex(blue);
}
}
// Fade function
function fade(newRed, newGreen, newBlue)
{
var steps;
var Rsteps;
var Gsteps;
var Bsteps;
// separate and convert hex RGB to decimal values
// bgcolor is in form of "#FFFFFF", so first char
// must be skipped
var oldBG = document.bgColor;
var oldRed = toDec(oldBG.charAt(1).toUpperCase() +
oldBG.charAt(2).toUpperCase());
var oldGreen = toDec(oldBG.charAt(3).toUpperCase() +
oldBG.charAt(4).toUpperCase());
var oldBlue = toDec(oldBG.charAt(5).toUpperCase() +
oldBG.charAt(6).toUpperCase());
// calculate the difference btw new and old RGB values
var difRed = newRed - oldRed;
var difGreen = newGreen - oldGreen;
var difBlue = newBlue - oldBlue;
var min = minDif(difRed, difGreen, difBlue);
// calculate # of increment steps and individual increments
if(min == "red")
{
steps = Math.abs(difRed);
if(difRed > 0)
Rsteps = 1;
else
Rsteps = -1;
Gsteps = difGreen / Math.abs(difRed);
Bsteps = difBlue / Math.abs(difRed);
}
else if(min == "green")
{
steps = Math.abs(difGreen);
Rsteps = difRed / Math.abs(difGreen);
if(difGreen > 0)
Gsteps = 1;
else
Gsteps = -1;
Bsteps = difBlue / Math.abs(difGreen);
}
else
{
steps = Math.abs(difBlue);
Rsteps = difRed / Math.abs(difBlue);
Gsteps = difGreen / Math.abs(difBlue);
if(difBlue > 0)
Bsteps = 1;
else
Bsteps = -1;
}
bgFade(steps, oldRed, oldGreen, oldBlue, Rsteps, Gsteps, Bsteps);
document.bgColor = "#" + toHex(newRed) + toHex(newGreen) + toHex(newBlue);
document.fgColor = "#" + toHex(newBlue) + toHex(newRed) + toHex(newGreen);
}
var fadeToR;
var fadeToG;
var fadeToB;
document.bgColor ="#FFFFFF";
while(true)
{
fadeToR = prompt("Enter value for Red between 0 and 255 ('Quit' exits).", "0");
if(fadeToR == null || fadeToR.toLowerCase() == "quit" || fadeToR > 255 || fadeToR < 0)
break;
fadeToG = prompt("Enter value for Green between 0 and 255 ('Quit' exits).", "0");
if(fadeToG == null || fadeToG.toLowerCase() == "quit" || fadeToG > 255 || fadeToG < 0)
break;
fadeToB = prompt("Enter value for Blue between 0 and 255 ('Quit' exits).", "0");
if(fadeToB.toLowerCase() == "quit" || fadeToB.toLowerCase() == "quit" ||fadeToB > 255 || fadeToB < 0)
break;
fade(fadeToR, fadeToG, fadeToB);
}
// -->
</script>
<body>
</body>
</html>
|