Creating Colors Gradients With ImageUtils.cfc ColdFusion Component : Kinky Solutions : A Student's Perspective by Ben Nadel

Creating Colors Gradients With ImageUtils.cfc ColdFusion Component

Posted February 19, 2008 at 8:32 AM

This morning, I updated the ImageUtils.cfc image manipulation component for ColdFusion 8. I gave it the ability to create gradients; well, not really create them just yet, but rather to calculate them. Creating them in rectangles will probably come in the next update. Right now, you can use the CalculateGradient() method to find all the color steps (including the alpha channel) between a From color and a To color over a given number of steps. To demonstrate this, let's calculate the color gradient between black and dark blue and then output each of those color steps in an HTML Div:

Launch code in new window » Download code as text file »

<!---
Transition from black to meidum blue. In order to do this,
we are going to need to get the RGB values for each hex
color value.
--->
<cfset objFromColor = HexToRGB( "##000000" ) />
<cfset objToColor = HexToRGB( "##3300CC" ) />
<!---
Calculate color gradient based on 400 steps. This will
return an array of length 400 in which each index holds the
given color of that step of the gradient.
--->
<cfset arrGradient = CalculateGradient(
objFromColor,
objToColor,
400
) />
<cfloop
index="objColor"
array="#arrGradient#">
<div style="height: 1px ; background-color: rgb( #objColor.Red#, #objColor.Green#, #objColor.Blue# );">
<br />
</div>
</cfloop>

As you can see, we get the array of color gradient steps. Then, we loop over that array and output a Div with the given RGB background color of the given current gradient step. Running this code, we get the following HTML output:

Now, in order to do this, we are using two functions (both of which have been added to the ImageUtils.cfc). The first is HexToRGB(). This function simply takes your 6 digit HEX color value and returns a struct that contains a Red, Green, and Blue key with the equivalent decimal values for the different color channels. This is just going to be a utility function that is used by other methods of the ImageUtils.cfc (I probably have to go back and factor this into some other methods). This method is really small:

Launch code in new window » Download code as text file »

<cffunction
name="HexToRGB"
access="public"
returntype="struct"
output="false"
hint="Takes a 6 digit hex value and returns a struct with Red, Green, and Blue keys.">
<cfargument
name="Hex"
type="string"
required="true"
hint="The 6 digit hex color value."
/>
<cfset var LOCAL = {} />
<cfset ARGUMENTS.Hex = REReplace(
ARGUMENTS.Hex,
"(?i)[^0-9A-F]+",
"",
"all"
) />
<cfset LOCAL.DecimalColor = InputBaseN( ARGUMENTS.Hex, "16" ) />
<cfset LOCAL.Return = {
Red = BitSHRN(
BitAnd( LOCAL.DecimalColor, InputBaseN( "FF0000", 16 ) ),
16
),
Green = BitSHRN(
BitAnd( LOCAL.DecimalColor, InputBaseN( "00FF00", 16 ) ),
8
),
Blue = BitAnd( LOCAL.DecimalColor, InputBaseN( "0000FF", 16 ) )
} />
<cfreturn LOCAL.Return />
</cffunction>

Then, the primary method for this example is the CalculateGradient() method. This takes the From color in RGBA struct format, the To color also in RGBA struct format, and the number of steps over which to create the gradient. Right now, the gradient is a linear gradient; perhaps in the future, there will be more of an "easing" gradient available. In order to make this utility function as reusable as possible, is simply calculates the color at each step of the gradient and returns an array containing every single one of those colors (one color/step per array index). This way, the gradient calculation can be used by many other methods that require gradient work.

Launch code in new window » Download code as text file »

<cffunction
name="CalculateGradient"
access="public"
returntype="array"
output="false"
hint="Given a From and To structure that contain Red, Green, Blue, and Alpha keys, it will return the equivalent structs for each step of the gradient.">
<cfargument
name="FromColor"
type="struct"
required="true"
hint="A struct containing Red, Green, Blue and an optoinal Alpha key (alpha defaults to 255 if not included)."
/>
<cfargument
name="ToColor"
type="struct"
required="true"
hint="A struct containing Red, Green, Blue and an optoinal Alpha key (alpha defaults to 255 if not included)."
/>
<cfargument
name="Steps"
type="numeric"
required="true"
hint="The number of steps overwhich to calculate the gradient."
/>
<cfset var LOCAL = {} />
<cfparam
name="ARGUMENTS.FromColor.Alpha"
type="numeric"
default="255"
/>
<cfparam
name="ARGUMENTS.ToColor.Alpha"
type="numeric"
default="255"
/>
<!---
Find the differences between the two and from colors.
We will getting this by finding the difference of each
color chanel in RGB format.
--->
<cfset LOCAL.RedDelta = (ARGUMENTS.ToColor.Red - ARGUMENTS.FromColor.Red) />
<cfset LOCAL.GreenDelta = (ARGUMENTS.ToColor.Green - ARGUMENTS.FromColor.Green) />
<cfset LOCAL.BlueDelta = (ARGUMENTS.ToColor.Blue - ARGUMENTS.FromColor.Blue) />
<cfset LOCAL.AlphaDelta = (ARGUMENTS.ToColor.Alpha - ARGUMENTS.FromColor.Alpha) />
<!---
Based on the number of steps that we want to define the
gradient, find the step for each color delta.
--->
<cfset LOCAL.RedStep = (LOCAL.RedDelta / ARGUMENTS.Steps) />
<cfset LOCAL.GreenStep = (LOCAL.GreenDelta / ARGUMENTS.Steps) />
<cfset LOCAL.BlueStep = (LOCAL.BlueDelta / ARGUMENTS.Steps) />
<cfset LOCAL.AlphaStep = (LOCAL.AlphaDelta / ARGUMENTS.Steps) />
<cfset LOCAL.Gradient = [] />
<cfset LOCAL.Color = StructCopy( ARGUMENTS.FromColor ) />
<cfloop
index="LOCAL.StepIndex"
from="1"
to="#ARGUMENTS.Steps#"
step="1">
<cfset ArrayAppend(
LOCAL.Gradient,
StructCopy( LOCAL.Color )
) />
<!---
Increment color. In order to make sure that the
gradient steps get used appropriatly, add the steps
directly the FROM color rather than to the previous
color index. This will prevent the Fix() function
from stopping our gradient if the increment is too
small.
--->
<cfset LOCAL.Color.Red = Fix( ARGUMENTS.FromColor.Red + (LOCAL.RedStep * LOCAL.StepIndex) ) />
<cfset LOCAL.Color.Green = Fix( ARGUMENTS.FromColor.Green + (LOCAL.GreenStep * LOCAL.StepIndex) ) />
<cfset LOCAL.Color.Blue = Fix( ARGUMENTS.FromColor.Blue + (LOCAL.BlueStep * LOCAL.StepIndex) ) />
<cfset LOCAL.Color.Alpha = Fix( ARGUMENTS.FromColor.Alpha + (LOCAL.AlphaStep * LOCAL.StepIndex) ) />
</cfloop>
<cfreturn LOCAL.Gradient />
</cffunction>

Right now, I am concentrating on laying a foundation of small utility functions. Once we get a good base of these, we can start to make some more complex functions.

Download Code Snippet ZIP File

Related Blog Entries

CreateGradient() / DrawGradientRect() Added To ImageUtils.cfc

DreamWeaver CS3 Slows Me Down

Adobe ColdFusion 8.0.1 Update - Helping Programmers To Be Signifanctly Less Girlie - Download ColdFusion 8 Update 8.0.1 Now.

Reader Comments

Ben,

As always, great work!

Posted by Chris on Feb 19, 2008 at 9:48 AM

@Chris,

Thanks man. I think we are gonna get some cool stuff going here.

Posted by Ben Nadel on Feb 19, 2008 at 10:00 AM

Ben, notice the subtle jumps in gradient you get at certain steps. I wonder if you would get an even smoother gradient if you converted RGB to HSV and did all the work there? From what I've done in the past, I don't think it was possible to do a straight Hex-HSV conversion, but had to go through RGB first.

Posted by duncan on Feb 19, 2008 at 10:17 AM

@Duncan,

I definitely notices the gradient steps. However, my monitor doesn't really handle gradients very well for display. I tried creating a gradient in FireWorks and noticed that it had those same steps in the program. As such, I figured that was just the best I could do.

What is this HSV you are talking about? I am not familiar with this?

Posted by Ben Nadel on Feb 19, 2008 at 10:24 AM

Hue, Saturation and Value. I did some work on colour gradients not too long ago (automatically working out different menu colours for dynamically nested menus), and I did it using HSV instead of RGB. So I knew I was going from say light red to dark red, which is very easy to do in HSV. At least I think that was the reasoning...

Posted by duncan on Feb 19, 2008 at 1:39 PM

@Duncan,

Sounds interesting. I will take a look into it. But, the key things here is that since this method encapsulates the gradient calculation, I can definitely swap it out later and not worry about what other parts of the code reference it :)

Posted by Ben Nadel on Feb 19, 2008 at 1:42 PM

Post Comment | Ask Ben

Creating Colors Gradients With ImageUtils.cfc ColdFusion Component : Kinky Solutions : A Student's Perspective by Ben Nadel