10 Responses to “Making annoying rainbows in javascript”

1. Gemini6Ice Says:
   October 21st, 2006 at 11:55 am

   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:
   October 28th, 2006 at 5:11 am

   Agreed.

3. Japh Says:
   November 8th, 2006 at 6:58 am

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

4. KrazyDad » Blog Archive » Lucky Charms Says:
   March 17th, 2007 at 6:23 pm

   […] 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:
   March 8th, 2008 at 10:25 pm

   This article is really cool!

   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:
   March 8th, 2008 at 11:16 pm

   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:
   December 22nd, 2008 at 5:16 am

   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:
   December 24th, 2008 at 1:21 pm

   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:
   December 25th, 2008 at 5:04 am

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

10. Henry Says:
    August 26th, 2009 at 8:39 pm

    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);
    }