9
déc.
2010

Décorez votre PC pour Noël en Javascript

Ah les décorations de Noël! Des guirlandes électriques ou pas, les sapins, les crèches,... Rien de tel pour montrer à tous vos voisins que vous respectez les traditions à but commercial (vous savez, Noël, Halloween, le nouvel an,...). Mais bon comme je suis un gros geek, je ne vais pas sortir de chez moi et décorer mon petit appartement. J'ai donc choisi de faire une décoration minimale qui durera toute l'année : un changement aléatoire de la couleur de l'écran!

Moins clignotant qu'une guirlande, plus doux que l'éclairage domestique, vous aurez de quoi vous prélasser pour Noël et les autres jours!

Choix de la technologie

J'ai choisi la technologie HTML/Javascript pour réaliser ce programme :

pas besoin d'installer de logiciel, votre navigateur suffit
le Javascript est côté client, donc pas d'instance de serveur sauf peut-être pour distribuer le programme
distribution facile et multi-plateforme

le code est visible, mais bon...
il faut activer le Javascript pour que ça marche

Le principe consiste à utiliser la propriété de Javascript de modifier le DOM (Document Object Model) d'une page web pour modifier la couleur de l'arrière plan du Body de la page.

Code

Côté Javascript :

/*****************************************************\ |Nom : couleurs.js |Auteur : Claude Boellinger |Date : 24/11/2007 | | Ce programme a pour but de modifier la couleur | de fond du body d'une page (ou d'autre chose) | \*****************************************************/ var back = new Array(); // couleur par défaut for (i=0;i<3;i++) { back[i]=Math.floor(Math.random()*256); } var timeOut = 35; var hexa = new Array(); hexa[0]="a"; hexa[1]="b"; hexa[2]="c"; hexa[3]="d"; hexa[4]="e"; hexa[5]="f"; var cpt = 1; var oldState = 0; var state = 0; var way = 1; // on appelle la fonction de dessin tous les timeOut // millisecondes window.setTimeout("changeColor()",timeOut); // fonction pour convertir en hexadécimal function toHex(v) { a = Math.floor(v /16); b = v - 16*a; if (a>=10) { a = hexa[a-10]; } if (b>=10) { b = hexa[b-10]; } return ""+a+b; } // fonction appellée et bouclée function changeColor() { cpt--; if (cpt==0) { // en gros on dégrade la composante de // couleur (RGB) continuellement // pendant cpt itérations way = way * -1; cpt=75; state = Math.floor(Math.random()*3); while (state == oldState) { state = Math.floor(Math.random()*3); } oldState = state; } if (!((back[state]==0 && way == -1) || (back[state]==255 && way==1))) { // incrementation de la composante // de couleur back[state] +=way; } else { // on change de sens si on a atteint // une extremité cpt = 1; } totalBack = "#"; for (i=0;i<3;i++) { // on met la couleur en cours au // format hexa (#03FE5A) totalBack += toHex(back[i]); } // et on met à jour le document! document.getElementById("body").bgColor = totalBack; // la fonction se rappelle elle-même window.setTimeout("changeColor()",timeOut); }

Côté page web :

<html> <head> <title>Couleurs</title> <script type="text/javascript" src="couleurs.js"> </script> </head> <body id="body"> </body> </html>

Exécution

Mettez les deux fichiers dans un même répertoire. Ouvrez votre navigateur et accédez à la page où vous avez mis ce code. Vous pouvez le mettre en plein écran en appuyant sur la touche F11 par défaut (le navigateur Opéra cache toutes les barres de navigation en plein écran). Vous obtiendrez le résultat visible en haut de cette page mais sur tout l'écran. Simple, non? Voilà, vous avez de quoi décorer votre appartement simplement! Sur ce passez de bonnes fêtes de fin d'année!

Vous pouvez aussi lire :