eni's javascript-rainbowmaker

looking for the sourcecode? scroll down!


numbers: 400
item_width: 2px
width: 128
center:127
frequency:
factor red:30
factor green:6
factor blue:2
phase: 0

warning: this requires a fast browser (not works well in firefox or internet explorer)
speed:50ms
phase_stepsize:0.2

 

 

 

 

 

source-code

this is only the sourcecode for the rainbowmaker-object. there is no clean sourcecode for the demo-application above. but you can download a standalone-page here: js-rainbow.html

you can use the rainbow-effect on your website/webapp. but note that this effect is annoying in most cases.
just include a js with the rainbowmaker-object at the head of your site, and use one of the examples or write something on your own.

the animation-part is NOT included in this object. you need to write one for your case.

license: gnu lgpl

 

rainbow_maker-object:

rainbow_maker={
	num:25,
	act_num:0,
	center:128,
	width:127,
	phase:0,
	factor_red: 30,
	factor_green:6,
	factor_blue:2,
	freq:false,		
	RGB2Color: function(r,g,b){
		return '#' + this.byte2Hex(r) + this.byte2Hex(g) + this.byte2Hex(b);
	},
	byte2Hex: function(n){
		var nybHexString = "0123456789ABCDEF";
		return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
	},
	next: function(){
		if (!this.freq) { this.freq = Math.PI*2/this.num; }
		var i=this.act_num;
		var red   = Math.sin(this.freq*i+this.factor_red+this.phase) * this.width + this.center;
		var green = Math.sin(this.freq*i+this.factor_green+this.phase) * this.width + this.center;
 		var blue  = Math.sin(this.freq*i+this.factor_blue+this.phase) * this.width + this.center;
 		this.act_num++;
 		return this.RGB2Color(red,green,blue);
	}
}

usage:
rainbow_maker.num=80;
for (i=0;i<rainbow_maker.num;i++){
    color=rainbow_maker.next();
    document.write("<div style='float:left;width:5px;height:20px;background-color:"+color+"'></div>");
}

produces:




annoying rainbow-text: 
color_text=function(str){
     rainbow_maker.phase=0;
     rainbow_maker.num=str.length;  
     rainbow_maker.freq=Math.PI*2/rainbow_maker.num;       
     for (var i = 0; i < str.length; ++i){
         document.write( '<font color="' + rainbow_maker.next() + '">' + str.substr(i,1) + '</font>'); 
     }
}
 
//usage
color_text('Lorem ipsum dolor sit amet, consectetuer adipiscing elit')

produces:




based on this idea: http://krazydad.com/makecolors.php

(c) 2010 by cyrill von wattenwyl