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.

And here it is.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • Design Float
  • E-mail this story to a friend!
  • HackerNews
  • MySpace
  • Reddit
  • Slashdot
  • StumbleUpon
  • Suggest to Techmeme via Twitter
  • Twitter

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