When I sat down to think about this homepage I knew I wanted to do something with colors. I choose that I want to have some color change constantly. To have a nice, organic change of colors without a lookup table I choose to use the HSB color spectrum as widely known from Photoshop. The hue value of the color can to be set from 0 to 360 degree, so a constant change of the hue will result in color changes over a rainbow.
My first problem was obviously the conversion from HSB to RGB. I couldn’t find a proper source in JavaScript(which was minimum requirement) so I ported it from C# code. I know: HSB has a bigger color space than RGB but for my case this was more than enough. The CMYK conversion should be done by a tool that supports it.
The second problem gets its own graphic(below): The HSB range has wide areas and thin areas. Few yellow tones, many blue tones. Especially for printing where you have maybe a set of 20 colors yellow or turkoise are strongly underrepresented while blue, red and green have heavy overweight. This was slightly more tricky. HSB is aligned on a circle to remove the effect I added a cosinus translation to the angle transistion, with a 180 degree offset, so the color range is more natural.
Okay: now to generate a rainbow it only needs a defined saturation and brightness and here we go.
For JavaScript I replace the content of a style tag in the head filled with new styles where I replaced the color. I tried to refresh it at a quite high frequency since the general performance allowed it but not for all browser – Internet Explorer starts to shiver if I do it too often – obviously its node refresh engine is running hot with too many objects (especially backgrounds) to be repainted.
For InDesign I used the internal JavaScript engine based to a master-page: In a master-page I created normal objects that I gave a defined color. The script I attached here now creates new pages based to this master-page, extracts all elements and changes the defined color with the new created colors, based to some fields you enter. Its not very flexible but it worked for my cases.
For ActionScript I just ported the JavaScript version without the automatic update. Any use is custom as I like to say.
Download:
I put a sample of the JavaScript code: example which can be downloaded together with the source here. I will update it it soon and also publish the ActionScript3 and InDesign version.
The version has be deprecated, find the new one here.
Tags: JavaScript, Rainbow