radiant.js

// radiant.js v5.1
// Created by harraps
// This script is free for use for anyone who wants to use it
// You might want to compress it to optimize the reactivity of your web pages
// to use it, put the class rad-0-fg for foreground effects or rad-0-bg for background effects
// to select a color, use implicit radiant angle: 0, 1, 2, 3,... ( * pi/6 )

var radiant = {};

radiant.fps        = 20;   // frame per seconds, the number of times the color will be updated
radiant.lightness  = 128;  // the value from witch we go upper or lower (color channels go from 0 to 255)
radiant.saturation = 100;  // how much do we go up or down ( in that case 128-100=28>0 , 128+100=228<255 )
radiant.increment  = 0.01; // the value to increment the hue

(function () {

    // this function allow us to shorten the document.getElementsByClassName() function name
    function collect( c ){
        return document.getElementsByClassName( c );
    }

    var div_fg = [
        collect("rad-0-fg"),
        collect("rad-1-fg"),
        collect("rad-2-fg"),
        collect("rad-3-fg"),
        collect("rad-4-fg"),
        collect("rad-5-fg"),
        collect("rad-6-fg"),
        collect("rad-7-fg"),
        collect("rad-8-fg"),
        collect("rad-9-fg"),
        collect("rad-10-fg"),
        collect("rad-11-fg")
    ];
    var div_bg = [
        collect("rad-0-bg"),
        collect("rad-1-bg"),
        collect("rad-2-bg"),
        collect("rad-3-bg"),
        collect("rad-4-bg"),
        collect("rad-5-bg"),
        collect("rad-6-bg"),
        collect("rad-7-bg"),
        collect("rad-8-bg"),
        collect("rad-9-bg"),
        collect("rad-10-bg"),
        collect("rad-11-bg")
    ];

    var PI         = 3.1415926535897932384626433832795; // the value of PI
    var PI2        = PI * 2;        // twice the value of PI
    var PI2_THIRD1 = PI2 / 3;       // 1/3 of 2PI
    var PI2_THIRD2 = (PI2 * 2) / 3; // 2/3 of 2PI
    var PI_SIXTH   = PI / 6;        // a sixth of the value of PI

    var hue = Math.random() * PI2; // the hue of the color
    var red, green, blue, i, j;    // we declare the RGB channels and the i and j indexes
    var length = 12;               // length of the array of colors
    var colors = [];               // we want to store 12 colors

    // This function generate a color in hexadecimal from RGB channels
    function RGB2Color(r,g,b){
        return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
    }

    // This function generate a hexadecimal sequence from a byte
    function byte2Hex(n){
        var nybHexString = "0123456789ABCDEF";
        return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
    }

    // This function will generate a hexadecimal color String for the given frequency
    function hue2Color(f){
        // then we get the rgb value of the color from the frequency
        red   = Math.sin(f             ) * radiant.saturation + radiant.lightness;
        green = Math.sin(f + PI2_THIRD1) * radiant.saturation + radiant.lightness;
        blue  = Math.sin(f + PI2_THIRD2) * radiant.saturation + radiant.lightness;
        return RGB2Color(red, green, blue);
    }

    // this function will be repeated 20 times per second
    window.setInterval(function() {
        // first we increment the frequency but keep it under two PI
        hue = (hue + radiant.increment) % PI2;

        for( i=0; i<length; ++i ){
            // for each of the 12 colors we change it a little
            colors[i] = hue2Color( hue + i * PI_SIXTH );

            // for each elements of our array, we set its color to the new color we've generated
            for( j=0; j<div_fg[i].length; ++j ){
                div_fg[i][j].style.color = colors[i];
            }
            for( j=0; j<div_bg[i].length; ++j ){
                div_bg[i][j].style.backgroundColor = colors[i];
            }
        }

    }, 1000 / radiant.fps );
})();