Blog  |  Publications  |  Puzzles Fun & Games  |  About

## Making annoying rainbows in javascript

If youve been looking for a tutorial on how to make these kinds of annoying color effects in javascript, you’ve come to the right place, as I’ve written one.

### 10 Responses to “Making annoying rainbows in javascript”

1. Gemini6Ice Says:

To further generalize, I would set up the function to allow different centers and widths for each color component, which would allow us to produce a rainbow of greens-blues, for example.

I’m curious to look up a way to make a web page’s javascript run on timed intervals after loading, so that one could make a background with fluctuating colors. Or maybe white-on-black to black-on-white fluctuating. That would be fun and annoying! :D

2. jbum Says:

Agreed.

3. Japh Says:

I believe the setTimeout() and setInterval() functions will allow you to do just that :)

4. KrazyDad » Blog Archive » Lucky Charms Says:

[…] A little something I made for my students during today’s actionscript class. Here’s the flash source code, and here’s an article that explains the technique I use to generate those groooovy colors. […]

5. stoyan Says:

BTW, to convert hex-to-dec in JavaScript you can also use:

var num = 170;
num.toString(16);

or

(170).toString(16)

To binary? `toString(2)`.

6. jbum Says:

Stoyen: True, but there is still a need to add the leading zero padding when producing hex digits for single digit numbers. A sprintf() function would make things much easier, since you can use “%02x” to specify a 2-digit hex number with zero-padding.

7. anton Says:

Great tutorial man! I am trying to work out the settings for a 2-color gradient. Starting from blue ending to red… Any suggestion??
thanx!!

8. jbum Says:

Anton,

Certainly. If you want to draw a line from blue to red in RGB space, the code would like something like this:

for (i = 0; i < 255; ++i) { var color = RGB2Color(i,0,255-i); document.write( '█’);
}

You could also do similar things with HSB space, which enable you to maintain the saturation of the color while changing the hue…

9. anton Says:

hey jbum thanx I ll try this one !
u are right HSB might be better way…

10. Henry Says:

This will cycle the bgColor!

var t;
var i=0;
function RGB2Color(r,g,b)
{
return ‘#’ + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
}
function byte2Hex(n)
{
var nybHexString = “0123456789ABCDEF”;
return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
}

function timedCount()
{
frequency = .01;
amplitude = 255/2;
center = 255/2;
red = Math.sin(frequency*i + 0*Math.PI/3) * amplitude + center;
green = Math.sin(frequency*i + 2*Math.PI/3) * amplitude + center;
blue = Math.sin(frequency*i + 4*Math.PI/3) * amplitude + center;
document.bgColor=RGB2Color(red,green,blue);
i=i+1;
t=setTimeout(“timedCount()”,.01);
}