Rainbow Javascript

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);</script>
<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>'); 
}
}

Tags: Rainbow, javascript, krazydad