// bgFade function
// Analysis

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);
	}
}

steps: the steps variable is used to determine how many steps to traverse between the two colours. Thinking in terms of a motion picture analogy, the number of steps would be equivalent to the number of frames in the film. The greater the steps variable, the slower the fade.

red, green and blue: These three variables hold the initial values for each colour.

rSteps, gSteps, bSteps: the three colour step variables control how much each colour varies for each step of the fade. As the value for any of the variables increases, the rate of change for that colour will increase correspondingly.

This code is controlled by a for loop. The steps variable is used to control the exit point, and for each iteration of the loop, each of the colours is increased or decreased by the corresponding value in the colour steps variables. The code then calls the toHex function for each of the colours. The return values are then concatenated into a string prefaced by the hash symbol (#). Finally, this string is assigned to the bgColor property of the document object.

In the final code, the main function will have already called functions to determine the number of steps for the fade, calculated the original bgColors, and calculated each colour's increment amount. Because all of this information is going to be available inside the function, and each function call is going to correspond to only one fade, it is not necessary to encapsulate this code inside a function. The code was put inside a function in this instance so that multiple tests could easily be called upon it.

Close Window