{"id":273,"date":"2008-05-21T04:45:55","date_gmt":"2008-05-21T09:45:55","guid":{"rendered":"http:\/\/www.pixelwit.com\/blog\/?p=273"},"modified":"2009-08-14T20:04:40","modified_gmt":"2009-08-15T01:04:40","slug":"color-fading-array","status":"publish","type":"post","link":"https:\/\/www.pixelwit.com\/blog\/2008\/05\/21\/color-fading-array\/","title":{"rendered":"Hexadecimal Color Fading Array"},"content":{"rendered":"\n\n\t\n\t\n\t\n\t\n\t\t\n\t\n\t<\/object>\n\t\n<\/object>\n

A while ago I wrote a Hexadecimal Color Fading Tutorial<\/a> explaining how to select a single color at any point on a gradient between two specified colors. In that tutorial there was a function which efficiently broke each of the 2 specified colors into their Red, Green and Blue components and then calculated a single new color at a specified point between them.<\/p>\n

Here's what the code looks like:<\/p>\n

function<\/span> fadeHex (<\/span>hex, hex2, ratio)<\/span>{<\/span>
\n    var<\/span> r = hex >><\/span> 16<\/span>;
\n    var<\/span> g = hex >><\/span> 8<\/span> &<\/span> 0xFF;
\n    var<\/span> b = hex &<\/span> 0xFF;
\n    r += (<\/span>(<\/span>hex2 >><\/span> 16<\/span>)<\/span>-r)<\/span>*<\/span>ratio;
\n    g += (<\/span>(<\/span>hex2 >><\/span> 8<\/span> &<\/span> 0xFF)<\/span>-g)<\/span>*<\/span>ratio;
\n    b += (<\/span>(<\/span>hex2 &<\/span> 0xFF)<\/span>-b)<\/span>*<\/span>ratio;
\n    return<\/span>(<\/span>r<<<\/span>16<\/span> |<\/span> g<<<\/span>8<\/span> |<\/span> b)<\/span>;
\n}<\/span><\/div><\/div>\n

Approximately 80% of the above code is dedicated to breaking the \"hex\" and \"hex2\" hexadecimal colors into their RGB components. Repeatedly calling the above function with the same \"hex1\" and \"hex2\" values can be wasteful because the the RGB values are constantly being recalculated and disposed of rather than being stored in variables for quick retrieval.<\/p>\n

If you want to create a gradient with a lot of steps or if you want to store your results in an array, you should consider an alternative approach. The following code efficiently<\/strong> creates a gradient of colors between 2 initial hexadecimal values and stores the results in an array.<\/p>\n

\/\/<\/span>
\n\/\/ Returns an array of colors between and including Hex1 and Hex2.<\/span>
\nfunction<\/span> fadeHex (<\/span>hex1, hex2, steps)<\/span>{<\/span>
\n    \/\/<\/span>
\n    \/\/ Create an array to store all colors.<\/span>
\n    var<\/span> newArry = [<\/span>hex1]<\/span>;
\n    \/\/<\/span>
\n    \/\/ Break Hex1 into RGB components.<\/span>
\n    var<\/span> r = hex1 >><\/span> 16<\/span>;
\n    var<\/span> g = hex1 >><\/span> 8<\/span> &<\/span> 0xFF;
\n    var<\/span> b = hex1 &<\/span> 0xFF;
\n    \/\/<\/span>
\n    \/\/ Determine RGB differences between Hex1 and Hex2.<\/span>
\n    var<\/span> rd = (<\/span>hex2 >><\/span> 16<\/span>)<\/span>-r;
\n    var<\/span> gd = (<\/span>hex2 >><\/span> 8<\/span> &<\/span> 0xFF)<\/span>-g;
\n    var<\/span> bd = (<\/span>hex2 &<\/span> 0xFF)<\/span>-b;
\n    \/\/<\/span>
\n    steps++;
\n    \/\/ For each new color.<\/span>
\n    for<\/span> (<\/span>var<\/span> i=1<\/span>; i<<\/span>steps; i++)<\/span>{<\/span>
\n        \/\/<\/span>
\n        \/\/ Determine where the color lies between the 2 end colors.<\/span>
\n        var<\/span> ratio = i\/<\/span>steps;
\n        \/\/<\/span>
\n        \/\/ Calculate new color and add it to the array.<\/span>
\n        newArry.push<\/span>(<\/span>(<\/span>r+rd*<\/span>ratio)<\/span><<<\/span>16<\/span> |<\/span> (<\/span>g+gd*<\/span>ratio)<\/span><<<\/span>8<\/span> |<\/span> (<\/span>b+bd*<\/span>ratio)<\/span>)<\/span>;
\n    }<\/span>
\n    \/\/<\/span>
\n    \/\/ Add Hex2 to the array and return it.<\/span>
\n    newArry.push<\/span>(<\/span>hex2)<\/span>;
\n    return<\/span> newArry;
\n}<\/span>
\n\/\/<\/span>
\n\/\/ Store a gradient in an array.<\/span>
\nvar<\/span> gradientArray = fadeHex(<\/span>0x000000, 0xFFFFFF, 2<\/span>)<\/span>;
\n\/\/<\/span>
\n\/\/ Show the contents of the array.<\/span>
\nfor<\/span>(<\/span>var<\/span> i=0<\/span>; i<<\/span>gradientArray.length<\/span>; i++)<\/span>{<\/span>
\n    trace<\/span>(<\/span>gradientArray[<\/span>i]<\/span>.toString<\/span>(<\/span>16<\/span>)<\/span>)<\/span>;
\n}<\/span>
\n\/\/ Traces: 0, 555555, aaaaaa, and ffffff.<\/span>
\n\/\/<\/span><\/div><\/div>\n

That's pretty slick. But<\/strong>... What if I want to fade between 3 colors? Or 4 colors? Or 6? Calling the above function multiple times might work but it's wasteful for reasons similar to those mentioned in our first code example.<\/p>\n

Once again we can improve performance by consolidating multiple function calls into one streamlined function. The tricky part is finding a way to provide arguments to our function in a manner that's both flexible and convenient.<\/p>\n

Take a look at the following block of code:<\/p>\n

\/\/<\/span>
\n\/\/<\/span>
\n\/\/ "FadeHexes" accepts an array of hexadecimal values separated by numbers which<\/span>
\n\/\/ specify how many colors are to be generated between hexadecimal values.<\/span>
\n\/\/<\/span>
\n\/\/ For example:<\/span>
\n\/\/ [0xFF0000,   1,   0x000000,   3,   0xFFFFFF]<\/span>
\n\/\/ [     Red,   1,      Black,   3,      White]<\/span>
\n\/\/ would produce:<\/span>
\n\/\/ [0xFF0000,   0x7F0000,   0x000000,    0x3F3F3F,      0x7F7F7F,     0xbFbFbF,  0xFFFFFF].<\/span>
\n\/\/ [     Red,   Burgundy,      Black,   DARK-Gray,   MIDDLE-Gray,   LIGHT-Gray,     White].<\/span>
\n\/\/<\/span>
\nfunction<\/span> fadeHexes (<\/span>arry)<\/span>{<\/span>
\n    \/\/<\/span>
\n    \/\/ Note the length of our array.<\/span>
\n    var<\/span> len = arry.length<\/span>-1<\/span>;
\n    \/\/<\/span>
\n    \/\/ Create an array to store all colors.<\/span>
\n    var<\/span> newArry = [<\/span>]<\/span>;
\n    \/\/<\/span>
\n    \/\/ For every pair of colors.<\/span>
\n    for<\/span>(<\/span>var<\/span> i=0<\/span>; i<<\/span>len; i+=2<\/span>)<\/span>{<\/span>
\n        \/\/<\/span>
\n        \/\/ Note the color pair.<\/span>
\n        var<\/span> hex = arry[<\/span>i]<\/span>;
\n        var<\/span> hex2 = arry[<\/span>i+2<\/span>]<\/span>;
\n        \/\/<\/span>
\n        \/\/ Add the first color to the array.<\/span>
\n        newArry.push<\/span>(<\/span>hex)<\/span>;
\n        \/\/<\/span>
\n        \/\/ Break the first color into RGB components.<\/span>
\n        var<\/span> r = hex >><\/span> 16<\/span>;
\n        var<\/span> g = hex >><\/span> 8<\/span> &<\/span> 0xFF;
\n        var<\/span> b = hex &<\/span> 0xFF;
\n        \/\/<\/span>
\n        \/\/ Determine RGB differences between the first and second colors.<\/span>
\n        var<\/span> rd = (<\/span>hex2 >><\/span> 16<\/span>)<\/span>-r;
\n        var<\/span> gd = (<\/span>hex2 >><\/span> 8<\/span> &<\/span> 0xFF)<\/span>-g;
\n        var<\/span> bd = (<\/span>hex2 &<\/span> 0xFF)<\/span>-b;
\n        \/\/<\/span>
\n        \/\/ Retrieve number of new colors between first and second color.<\/span>
\n        var<\/span> steps = arry[<\/span>i+1<\/span>]<\/span>+1<\/span>;
\n        \/\/<\/span>
\n        \/\/ For each new color.<\/span>
\n        for<\/span> (<\/span>var<\/span> j=1<\/span>; j<<\/span>steps; j++)<\/span>{<\/span>
\n            \/\/<\/span>
\n            \/\/ Determine where the color lies between the 2 end colors.<\/span>
\n            var<\/span> ratio = j\/<\/span>steps;
\n            \/\/<\/span>
\n            \/\/ Determine RGB values, combine into 1 hex color and add it to the array.<\/span>
\n            newArry.push<\/span>(<\/span>(<\/span>r+rd*<\/span>ratio)<\/span><<<\/span>16<\/span> |<\/span> (<\/span>g+gd*<\/span>ratio)<\/span><<<\/span>8<\/span> |<\/span> (<\/span>b+bd*<\/span>ratio)<\/span>)<\/span>;
\n        }<\/span>
\n    }<\/span>
\n    \/\/<\/span>
\n    \/\/ Add the last color to the end of the array.<\/span>
\n    newArry.push<\/span>(<\/span>arry[<\/span>len]<\/span>)<\/span>;
\n    \/\/<\/span>
\n    \/\/ Return the new array of colors.<\/span>
\n    return<\/span> newArry;
\n}<\/span>
\n\/\/<\/span>
\n\/\/ Store a gradient in an array.<\/span>
\nvar<\/span> gradientArray = fadeHexes(<\/span>[<\/span>0xFF0000,   1<\/span>,   0x000000,   3<\/span>,   0xFFFFFF]<\/span>)<\/span>;
\n\/\/<\/span>
\n\/\/ Show the contents of the array.<\/span>
\nfor<\/span>(<\/span>var<\/span> i=0<\/span>; i<<\/span>gradientArray.length<\/span>; i++)<\/span>{<\/span>
\n    trace<\/span>(<\/span>gradientArray[<\/span>i]<\/span>.toString<\/span>(<\/span>16<\/span>)<\/span>)<\/span>;
\n}<\/span>
\n\/\/<\/span>
\n\/\/ Traces: ff0000, 7f0000, 0, 3f3f3f, 7f7f7f, bfbfbf, and ffffff.<\/span>
\n\/\/<\/span>
\n\/\/<\/span><\/div><\/div>\n

Now that's pretty handy! The \"fadeHexes\" function lets you specify a gradient with any number of colors and any number of steps between each color. Neato.<\/p>\n

If you're curious, the SWF at the top of this page was created with code similar to the following:<\/p>\n

\/\/<\/span>
\n\/\/<\/span>
\nfunction<\/span> fadeHexes (<\/span>arry)<\/span>{<\/span>
\n    var<\/span> len = arry.length<\/span>-1<\/span>;
\n    var<\/span> newArry = [<\/span>]<\/span>;
\n    for<\/span>(<\/span>var<\/span> i=0<\/span>; i<<\/span>len; i+=2<\/span>)<\/span>{<\/span>
\n        var<\/span> hex = arry[<\/span>i]<\/span>;
\n        var<\/span> hex2 = arry[<\/span>i+2<\/span>]<\/span>;
\n        newArry.push<\/span>(<\/span>hex)<\/span>;
\n        var<\/span> r = hex >><\/span> 16<\/span>;
\n        var<\/span> g = hex >><\/span> 8<\/span> &<\/span> 0xFF;
\n        var<\/span> b = hex &<\/span> 0xFF;
\n        var<\/span> rd = (<\/span>hex2 >><\/span> 16<\/span>)<\/span>-r;
\n        var<\/span> gd = (<\/span>hex2 >><\/span> 8<\/span> &<\/span> 0xFF)<\/span>-g;
\n        var<\/span> bd = (<\/span>hex2 &<\/span> 0xFF)<\/span>-b;
\n        var<\/span> steps = arry[<\/span>i+1<\/span>]<\/span>+1<\/span>;
\n        for<\/span> (<\/span>var<\/span> j=1<\/span>; j<<\/span>steps; j++)<\/span>{<\/span>
\n            var<\/span> ratio = j\/<\/span>steps;
\n            newArry.push<\/span>(<\/span>(<\/span>r+rd*<\/span>ratio)<\/span><<<\/span>16<\/span> |<\/span> (<\/span>g+gd*<\/span>ratio)<\/span><<<\/span>8<\/span> |<\/span> (<\/span>b+bd*<\/span>ratio)<\/span>)<\/span>;
\n        }<\/span>
\n    }<\/span>
\n    newArry.push<\/span>(<\/span>arry[<\/span>len]<\/span>)<\/span>;
\n    return<\/span> newArry;
\n}<\/span>
\nfunction<\/span> fillScreen (<\/span>hexColors)<\/span>{<\/span>
\n    var<\/span> len = hexColors.length<\/span>;
\n    var<\/span> wi = Stage<\/span>.width<\/span>;
\n    var<\/span> hiStep  = Stage<\/span>.height<\/span>\/<\/span>len;
\n    for<\/span>(<\/span>var<\/span> i=0<\/span>; i<<\/span>len; i++)<\/span>{<\/span>
\n        beginFill<\/span>(<\/span>hexColors[<\/span>i]<\/span>)<\/span>;
\n        moveTo<\/span>(<\/span>0<\/span>, i*<\/span>hiStep)<\/span>;
\n        lineTo<\/span>(<\/span>0<\/span>, i*<\/span>hiStep+hiStep)<\/span>;
\n        lineTo<\/span>(<\/span>wi, i*<\/span>hiStep+hiStep)<\/span>;
\n        lineTo<\/span>(<\/span>wi, i*<\/span>hiStep)<\/span>;
\n        lineTo<\/span>(<\/span>0<\/span>, i*<\/span>hiStep)<\/span>;
\n    }<\/span>
\n    endFill<\/span>(<\/span>)<\/span>
\n}<\/span>
\nfunction<\/span> drawCircles (<\/span>hexColors)<\/span>{<\/span>
\n    var<\/span> len = fadedColors.length<\/span>;
\n    var<\/span> around = Math<\/span>.random<\/span>(<\/span>)<\/span>;
\n    var<\/span> outside = 20<\/span>+Math<\/span>.random<\/span>(<\/span>)<\/span>*<\/span>150<\/span>;
\n    var<\/span> inside = Math<\/span>.random<\/span>(<\/span>)<\/span>*<\/span>100<\/span>;
\n    for<\/span>(<\/span>var<\/span> i=0<\/span>; i<<\/span>len; i++)<\/span>{<\/span>
\n        var<\/span> r = i\/<\/span>len;
\n        lineStyle<\/span>(<\/span>256<\/span>-r*<\/span>256<\/span>, fadedColors[<\/span>i]<\/span>)<\/span>;
\n        var<\/span> arou = i*<\/span>around*<\/span>2<\/span>*<\/span>Math<\/span>.PI<\/span>;
\n        var<\/span> awa = inside+outside*<\/span>(<\/span>1<\/span>-r)<\/span>;
\n        var<\/span> xx = Stage<\/span>.width<\/span>\/<\/span>2<\/span> + Math<\/span>.cos<\/span>(<\/span>arou)<\/span>*<\/span>awa;
\n        var<\/span> yy = Stage<\/span>.height<\/span>\/<\/span>2<\/span> + Math<\/span>.sin<\/span>(<\/span>arou)<\/span>*<\/span>awa;
\n        moveTo<\/span>(<\/span>xx, yy)<\/span>;
\n        lineTo<\/span>(<\/span>xx+.5, yy)<\/span>;
\n    }<\/span>
\n}<\/span>
\nfunction<\/span> drawStuff(<\/span>)<\/span>{<\/span>
\n    var<\/span> color1 = Math<\/span>.random<\/span>(<\/span>)<\/span>*<\/span>0xFFFFFF;
\n    var<\/span> gap1 = Math<\/span>.floor<\/span>(<\/span>Math<\/span>.random<\/span>(<\/span>)<\/span>*<\/span>50<\/span>)<\/span>;
\n    var<\/span> color2 = Math<\/span>.random<\/span>(<\/span>)<\/span>*<\/span>0xFFFFFF;
\n    var<\/span> gap2 = Math<\/span>.floor<\/span>(<\/span>Math<\/span>.random<\/span>(<\/span>)<\/span>*<\/span>30<\/span>)<\/span>;
\n    var<\/span> color3 = Math<\/span>.random<\/span>(<\/span>)<\/span>*<\/span>0xFFFFFF;
\n    fadedColors = fadeHexes(<\/span>[<\/span>color1, gap1, color2, gap2, color3]<\/span>)<\/span>;
\n    clear<\/span>(<\/span>)<\/span>;
\n    fillScreen (<\/span>fadedColors)<\/span>;
\n    drawCircles (<\/span>fadedColors)<\/span>;
\n}<\/span>
\n\/\/<\/span>
\n\/\/<\/span>
\nStage<\/span>.align<\/span> = "TL"<\/span>;
\ndrawStuff(<\/span>)<\/span>;
\nsetInterval<\/span>(<\/span>drawStuff, 3000<\/span>)<\/span>;
\n\/\/<\/span>
\n\/\/<\/span><\/div><\/div>\n

If you like the spiraling circles you can read more about spirals in my Logarithmic<\/a> and Archimedean<\/a> spiral tutorials.<\/p>\n

I hope you find the code for generating color gradients as fun and useful as I did.<\/p>\n","protected":false},"excerpt":{"rendered":"

Detailed Flash ActionScript tutorial explaining how to fade between multiple colors and store each individual color of the gradient in an array.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[8],"tags":[23,42,46,45,36,37],"class_list":["post-273","post","type-post","status-publish","format-standard","hentry","category-flash","tag-actionscript","tag-code","tag-color","tag-draw","tag-swfs","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/273","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/comments?post=273"}],"version-history":[{"count":0,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/273\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/media?parent=273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/categories?post=273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/tags?post=273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}