{"id":57,"date":"2007-05-30T12:24:59","date_gmt":"2007-05-30T17:24:59","guid":{"rendered":"http:\/\/www.pixelwit.com\/blog\/2007\/05\/30\/random-candy-colors\/"},"modified":"2009-08-13T17:09:24","modified_gmt":"2009-08-13T22:09:24","slug":"random-candy-colors","status":"publish","type":"post","link":"https:\/\/www.pixelwit.com\/blog\/2007\/05\/30\/random-candy-colors\/","title":{"rendered":"Random Candy Colors"},"content":{"rendered":"

If you saw my recent “Candy Cosmos<\/a>” post, you may have noticed that the randomly generated colors tend to be rather “vibrant”.<\/p>\n

rainbbowgradient.jpg<\/p>\n

Pure red, green, blue, cyan, magenta and yellow colors appear frequently, while pure black and white colors occur occasionally, and colors near 50% gray tend to be the least common. The bright candy colors are a side effect caused by “limiting” the random values<\/a> generated for each color channel.<\/p>\n

Let’s say we start off with a neutral gray color with (R, G, B) values of (100, 100, 100). To get our next color we generate a random number between 5 and 10 then we either add it to, or subtract it from, the red channel. That means that there is a 50% chance our new red channel value will be between 90 and 95 and a 50% chance that it will be between 105 and 110. We repeat this process for each of the three color channels then combine them to make our new color. This produces a color similar to our original color, yet noticeably different.<\/p>\n

The method above works well until the values of the color channels approach 0 or 255. Suppose the red channel has a value of 0. Using the above randomization technique would generate potential values between (-10 and -5) or between (5 and 10). Color channels can’t hold values below 0 or above 255 so corrective actions need to be taken. A simple solution is to “limit” the values. If the number is below 0 it is set to 0. If the number is above 255 it is set to 255. That means that once a color channel reaches a value of 0 or 255 there is a 50% chance that the value will remain unchanged. This is because there is a 50% chance that the next random number will either be added to, or subtracted from, the original channel value and thus produce a value outside the acceptable range which in turn results in no change to the original value.<\/p>\n

Since the color channel values tend to hover near 0 (0x00) and 255 (0xFF), pure CMY colors (0xFFFF00, 0xFF00FF, 0x00FFFF) or pure RGB colors (0xFF0000, 0x00FF00, 0x0000FF) are common. Here is some code to illustrate:<\/p>\n

\/\/<\/span>
\n\/\/<\/span>
\n\/\/ Create an object to contain our 3 color channels (r, g, b).<\/span>
\nvar<\/span> myColorObj = {<\/span>}<\/span>;
\n\/\/<\/span>
\n\/\/<\/span>
\n\/\/ Create the RGB channels and assign values to each of them.<\/span>
\nmyColorObj.r<\/span> = 100<\/span>;
\nmyColorObj.g<\/span> = 100<\/span>;
\nmyColorObj.b<\/span> = 100<\/span>;
\n\/\/<\/span>
\n\/\/<\/span>
\n\/\/ Each color channel will be randomized.<\/span>
\n\/\/ The color channel will go up or down by at least the MIN value.<\/span>
\nvar<\/span> minColorChannelVary = 5<\/span>;
\n\/\/ The color channel will go up or down no more than the MAX value.<\/span>
\nvar<\/span> maxColorChannelVary = 10<\/span>;
\n\/\/<\/span>
\n\/\/<\/span>
\n\/\/ Goes through each color channel in a color object<\/span>
\n\/\/ and adds or subtracts a random number<\/span>
\n\/\/ between the min and max values<\/span>
\n\/\/ to each color channel.<\/span>
\n\/\/ Color channel values are limited between 0 and 255.<\/span>
\nfunction<\/span> randomizeColor(<\/span>colorObj, min<\/span>, max<\/span>)<\/span>{<\/span>
\n    for<\/span>(<\/span>var<\/span> i in<\/span> colorObj)<\/span>{<\/span>
\n        var<\/span> chnl = colorObj[<\/span>i]<\/span>;
\n        var<\/span> ran = min<\/span> + Math<\/span>.random<\/span>(<\/span>)<\/span> *<\/span> (<\/span>max-min<\/span>)<\/span>;
\n        chnl += (<\/span>Math<\/span>.round<\/span>(<\/span>Math<\/span>.random<\/span>(<\/span>)<\/span>)<\/span> ? ran : -ran)<\/span>;
\n        colorObj[<\/span>i]<\/span> = Math<\/span>.max<\/span>(<\/span>0<\/span>, Math<\/span>.min<\/span>(<\/span>chnl, 255<\/span>)<\/span>)<\/span>
\n    }<\/span>
\n    return<\/span> colorObj;
\n}<\/span>
\n\/\/<\/span>
\n\/\/<\/span>
\n\/\/ Converts 3 color channels in the color object to<\/span>
\n\/\/ one hexadecimal value like 0xFFFFFF.<\/span>
\nfunction<\/span> rgbToHex (<\/span>colorObj)<\/span>{<\/span>
\n    return<\/span>(<\/span>colorObj.r<\/span><<<\/span>16<\/span> |<\/span> colorObj.g<\/span><<<\/span>8<\/span> |<\/span> colorObj.b<\/span>)<\/span>;
\n}<\/span>
\n\/\/<\/span>
\n\/\/<\/span>
\n\/\/ Draws a 1 by 100 box using the specified color.<\/span>
\nfunction<\/span> drawBox(<\/span>x, color<\/span>)<\/span>{<\/span>
\n    \/\/clear();<\/span>
\n    beginFill<\/span>(<\/span>color<\/span>)<\/span>;
\n    moveTo<\/span>(<\/span>x, 0<\/span>)<\/span>;
\n    lineTo<\/span>(<\/span>x+1<\/span>, 0<\/span>)<\/span>;
\n    lineTo<\/span>(<\/span>x+1<\/span>, 100<\/span>)<\/span>;
\n    lineTo<\/span>(<\/span>x, 100<\/span>)<\/span>;
\n    lineTo<\/span>(<\/span>x, 0<\/span>)<\/span>;
\n}<\/span>
\n\/\/<\/span>
\n\/\/<\/span>
\n\/\/ Draw a random color and then move over to the right 1 pixel<\/span>
\n\/\/ and draw the next random color.  Repeat 500 times until<\/span>
\n\/\/ a brightly colored banded gradient covers the stage.<\/span>
\nfunction<\/span> genCandyGradient(<\/span>)<\/span>{<\/span>
\n    clear<\/span>(<\/span>)<\/span>;
\n    for<\/span>(<\/span>var<\/span> i=0<\/span>; i<<\/span>500<\/span>; i++)<\/span>{<\/span>
\n        randomizeColor(<\/span>myColorObj, minColorChannelVary, maxColorChannelVary)<\/span>;
\n        drawBox(<\/span>i, rgbToHex (<\/span>myColorObj)<\/span>)<\/span>;
\n    }<\/span>
\n}<\/span>
\ngenCandyGradient(<\/span>)<\/span>;
\n\/\/<\/span>
\n\/\/<\/span>
\n\/\/ Draw a new gradient every time the mouse is pressed.<\/span>
\nonMouseDown<\/span> = genCandyGradient;
\n\/\/<\/span>
\n\/\/<\/span>
\n\/\/<\/span><\/div><\/div>\n

<\/code><\/p>\n

Here is the SWF produced by the above code, click it to see new random colors:<\/p>\n\n\n\t\n\t\n\t\n\t\n\t\t\n\t\n\t<\/object>\n\t\n<\/object>\n

I doubt you'll need to create a brightly colored banded gradient every day but it may prove useful some time.<\/p>\n

So now you know.<\/p>\n","protected":false},"excerpt":{"rendered":"

A novel Flash ActionScript function which generates a series of similar yet slightly different colors resulting in a brightly colored banded gradient.<\/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,46,36,37],"class_list":["post-57","post","type-post","status-publish","format-standard","hentry","category-flash","tag-actionscript","tag-color","tag-swfs","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/57","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=57"}],"version-history":[{"count":0,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/57\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/media?parent=57"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/categories?post=57"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/tags?post=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}