Comments on: Making annoying rainbows in javascript

By: Henry

Henry — Thu, 27 Aug 2009 02:39:13 +0000

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) & 0×0F,1)) + nybHexString.substr(n & 0×0F,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);
}

By: anton

anton — Thu, 25 Dec 2008 11:04:40 +0000

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

By: jbum

jbum — Wed, 24 Dec 2008 19:21:06 +0000

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…

By: anton

anton — Mon, 22 Dec 2008 11:16:21 +0000

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!!

By: jbum

jbum — Sun, 09 Mar 2008 05:16:18 +0000

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.

By: stoyan

stoyan — Sun, 09 Mar 2008 04:25:23 +0000

This article is really cool!

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

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

(170).toString(16)

To binary? toString(2).

By: KrazyDad » Blog Archive » Lucky Charms

KrazyDad » Blog Archive » Lucky Charms — Sun, 18 Mar 2007 00:23:24 +0000

[...] 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. [...]

By: Japh

Japh — Wed, 08 Nov 2006 12:58:06 +0000

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

By: jbum

jbum — Sat, 28 Oct 2006 11:11:42 +0000

Agreed.

By: Gemini6Ice

Gemini6Ice — Sat, 21 Oct 2006 17:55:13 +0000

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