Pour ce deuxième gloubi tuto, on s’attaque à un script qui a eu son petit succès sur Skyblog : le texte « arc-en-ciel » (en dégradés).

Script original et explication

Pour voir le script original, qui fonctionne encore dans les navigateurs modernes, rendez-vous ici sur le site de notre Némésis dans la deuxième guerre du gloubi.

Le script fonctionne comme suit :

Avant d’appeler la principale fonction de notre script, on construit un tableau de correspondance décimal vers hexadécimal à l’aide de deux boucles imbriquées.

var tohex = new Array(256);
var hex = "0123456789ABCDEF";
var count = 0;
for (x=0; x<16; x++) {
    for (y=0; y<16; y++) {
        tohex[count] = hex.charAt(x) + hex.charAt(y);
        count++;
    }
}

Vient ensuite la fonction principale du script. Celle-ci prend deux paramètres d’entrées: le texte à colorer et les couleurs à utiliser.

function gradient (thetext,thecolors) { ... }

On commence par construire un tableau qui contient les codes RGB (avec des valeurs allant de 0 à 255) des différentes couleurs. Les couleurs individuelles sont séparées à l’aide de la méthode substring() des objets de type string. Chaque couleur est ensuite traitée par paire de chiffres hexadécimaux, chaque paire étant convertie en base 10 avec la fonction parseInt().

Ce traitement est assuré par les fonctions ColorList() et ColorCode() du script original.

ColorList() se charge de la séparation des couleurs individuelles :

function ColorList(hexcodes) {
    var i = 0;
    var c = 0;
    this.codes = new Array(Math.round(hexcodes.length/7));
    while (i < hexcodes.length) {
        if (isNaN(parseInt(hexcodes.substring(i,i+6),16))) ++i;
        else {
            this.codes[c] = new ColorCode(hexcodes.substring(i,i+6));
            i += 7;
            ++c;
        }
    }
    this.len = c;
}

Tandis que ColorCode() se charge de la conversion en composantes RGB :

function ColorCode(hexcode) {
    if (hexcode.length == 7) {
        this.r = parseInt(hexcode.substring(1,3),16);
        this.g = parseInt(hexcode.substring(3,5),16);
        this.b = parseInt(hexcode.substring(5,7),16);
    }
    else if (hexcode.length == 6) {
        this.r = parseInt(hexcode.substring(0,2),16);
        this.g = parseInt(hexcode.substring(2,4),16);
        this.b = parseInt(hexcode.substring(4,6),16);
    }
    else {
        this.r = this.g = this.b = 0;
        alert("Error: ColorCode constructor failed");
    }
    if (isNaN(this.r)||isNaN(this.g)||isNaN(this.b))
        alert("Error: ColorCode constructor failed");
}

Ensuite on traite le texte caractère par caractère. Pour chacun de ces caractères, on détermine selon sa position dans la chaîne les deux couleurs entre lesquelles celui-ci se situe (fonctions lowcolorindex() et highcolorindex()) et à partir de ces deux couleurs et de l’emplacement dans la chaîne on utilise une fonction d’interpolation (interpolate()) pour déterminer une valeur pour chacune des composantes (red, green, blue) de la couleur du caractère.

function interpolate (x1, y1, x3, y3, x2) {
    if (x3 == x1) return y1
    else return (x2-x1)*(y3-y1)/(x3-x1) + y1
}

function lowcolorindex (x, y, z) {
    if (y == 1) return 0
    else return Math.floor( (x*(z-1))/(y-1) )
}

function hicolorindex (x, y, z, low) { 
    if ( low*(y-1) == x*(z-1) ) return low
    else if (y == 1) return 0
    else return Math.floor( (x*(z-1))/(y-1) + 1 )
}