Rainbow Javascript

Monday, October 16, 2006

Mr. Jim Bumgardner from KrazyDad which i have introduced to you as a great puzzle maker, now he has (again) impressed me with his new Rainbow Javascript function. Which will produce a sequence of colors, a rainbow colors, that can be implemented on your webpages ;) Mr. Jim have given us a detail explanation about how colors work, you can learn more in-depth tutorial over at Jim's. As for now, let have a look right into the javascript ;)

Now with his marvelous script you can make a nice rainbow like this (which you can add to the designs of your page) ;)

Isn't this beautiful ;) more of it you can make it a pastel colors :) like this:

Or maybe you can make some nice horizontal bars using the '_' characters, but in RAINBOW COLORS !!

Interesting eh ?! ;) Okay, then let's try to have a look what function you'll be needin' to make yer rainbow ^^

First of all you need to include these functions, which are the main core of color producing for the yer page ;)

function byte2Hex(n) {
var nybHexString = "0123456789ABCDEF";
return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
function RGB2Color(r,g,b) {
return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);

As for the function to produce the gradient rainbow, here it is
//f = frequency   p = phase
function makeColorGradient(f1, f2, f3, p1, p2, p3, center, width, len, chr) {
if (center == undefined) center = 128;
if (width == undefined) width = 127;
if (len == undefined) len = 50;
if (chr == undefined) chr = "█";

for (var i = 0; i < len; ++i) {
var r = Math.sin(f1*i + p1) * width + center;
var g = Math.sin(f2*i + p2) * width + center;
var b = Math.sin(f3*i + p3) * width + center;
document.write( '<font >' + chr + '</font>' );

Now, the main thing is, how to use those functions ??! Well, simply put these codes to your pages, and the script will do the rest ;) Note that you may try to play with the frequency, and phase ;)
<script>makeColorGradient(.3,.3,.3,0,2,4, 230,25);</script>
<script>makeColorGradient(.3,.3,.3,0,2,4, 128,127,67, "_");</script>

function colorText(str,p) {
if (p == undefined) p = 0;
center = 128;
width = 127;
f = Math.PI*2/str.length;
for (var i = 0; i < str.length; ++i) {
r = Math.sin(f*i+2+p) * width + center;
g = Math.sin(f*i+0+p) * width + center;
b = Math.sin(f*i+4+p) * width + center;
document.write( '<font color="' + RGB2Color(r,g,b) + '">' + str.substr(i,1) + '</font>');


teddY said...

Omigosh! What an awesome script! Great findings you have over here... and thanks a million for sharing! =) Take care and have a nice day.

Efendi said...

yo ^^ glad you liked it ;) pretty neat ain't it ? :D

you can experiments a lotsa thing using that :)

sterli said...

verry funtastics....

Efendi said...

@sterli: yoo ^^ welcome to zlythern :)
yup it's fun ;) Mr.Jim indeed was a very creative man ;) you should pay him a visit :) he has a marvellous work :D

oh, come back again here ok ;)

About Me

My Photo
An ordinary, a bit 'geeky' guy, who enjoy blogging about all unique things across the internet world. Blogs about the blogosphere, scripts, fun, games, interesting stuffs, etc. Currently staying and working in Singapore.
View my complete profile