Blog  |   Puzzles  |   Books  |   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.

And here it is.

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:

    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:

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