HilfDirSelbst.ch: Programmierung/Entwicklung: JavaScript: jQuery - color cycle animation with hsv colorspace?

jQuery - color cycle animation with hsv colorspace?

sgtfloydpepper

Beiträge gesamt: 8

4. Okt 2010, 15:37
Bewertung:

gelesen: 2047

Beitrag als Lesezeichen

Hi there, I am working on a project, which I need a special body-background for. The background-color should cycle through the color spectrum. So I found this:

http://buildinternet.com/2009/09/its-a-rainbow-color-changing-text-and-backgrounds/

"But" this snippet is working with the RGB colorspace which has some very light and dark colors in it. Getting just bright colors will only work with the HSV colorspace (e.g. having S and V static at 100 and letting H cycle). I don’t know how to convert and in fact how to pimp this snippet for my needs.

Does anyone has an idea??

Thanks in advance. Best, Floyd

jQuery - color cycle animation with hsv colorspace?

crisies

Beiträge gesamt: 136

21. Okt 2010, 21:13
Bewertung:

gelesen: 1961

Beitrag als Lesezeichen

hi floyd

use the conversion function from here:
http://mjijackson.com/...rithms-in-javascript

The adapted spectrum function would be something like this:

Code

function spectrum(){ 
    var h = Math.random(); 
    var s = 1; 
    var v = 1; 
    var r, g, b; 
     
    var i = Math.floor(h * 6); 
    var f = h * 6 - i; 
    var p = v * (1 - s); 
    var q = v * (1 - f * s); 
    var t = v * (1 - (1 - f) * s); 
     
    switch(i % 6){ 
        case 0: r = v, g = t, b = p; break; 
        case 1: r = q, g = v, b = p; break; 
        case 2: r = p, g = v, b = t; break; 
        case 3: r = p, g = q, b = v; break; 
        case 4: r = t, g = p, b = v; break; 
        case 5: r = v, g = p, b = q; break; 
    } 
      
    var hue = 'rgb(' + Math.floor(r * 255) + ',' + Math.floor(g * 255) + ',' + Math.floor(b * 255) + ')'; 
    $('#welcome').animate( { backgroundColor: hue }, 1000, function() { spectrum(); }); 
}

cheers
*************************************
Chris Würsch
http://www.chriswuersch.com
*************************************