[PHP] Avatar aléatoire en couleur

Sur le forum les membres n'ayant pas choisi d'avatar pour leur compte ont droit à un avatar par défaut composé de 2 couleurs.

Par exemple :

K

Le but de ce tuto est de vous expliquer comment générer une couleur aléatoire claire en PHP (pour le fond de l'avatar) et une seconde couleur plus foncée pour la lettre.


Générer une couleur pastel aléatoire en PHP

La couleur de fond doit être ici une couleur claire.

Les valeurs d'une couleur RBG vont de 0 (noir) à 255 (blanc), dans ce cas il faut donc générer des couleurs plus proches de la valeur 255 que de la valeur 0 pour obtenir des couleurs claires.

Pour cet exemple, les différentes valeurs RGB se situeront dans la plage 195 à 245 pour obtenir à coup sûr une couleur claire :

$r = mt_rand(195, 245);
$g = mt_rand(195, 245);
$b = mt_rand(195, 245);

echo '<div style="background:rgb('.$r.','.$g.','.$b.')">XLP</div>';

Voici un exemple de couleurs générées aléatoirement par ce code (actualisez la page pour générer de nouvelles couleurs) :

Obtenir la version foncée de la couleur générée

Pour obtenir un résultat un peu plus esthétique et éviter d'utiliser une même couleur (noir ou gris foncé) pour le texte de tous les avatars, la version foncée de la couleur générée aléatoirement va maintenant être calculée.

Et pour faire cela, il suffit de diviser chacune des valeurs RGB par 2 (ou une autre valeur pour obtenir un résultat plus ou moins foncé) :

$r = mt_rand(195, 245);
$g = mt_rand(195, 245);
$b = mt_rand(195, 245);

$diviseur = 2; // Augmentez cette valeur pour une couleur plus foncée
$r2 = round($r / $diviseur);
$g2 = round($g / $diviseur);
$b2 = round($b / $diviseur);

echo '<div style="background:rgb('.$r.','.$g.','.$b.');color:rgb('.$r2.','.$g2.','.$b2.');">XLP</div>';

Voici un exemple de pairs de couleurs générées par ce code (actualisez la page pour générer de nouvelles couleurs) :

XLP
XLP
XLP
XLP
XLP
XLP
XLP

Récupérer la première lettre du nom d'utilisateur

En PHP, la première lettre peut être récupérée simplement comme ceci :

$utilisateur = 'Sébastien';

$lettre = $utilisateur[0]; // Première lettre

Ajoutez ensuite simplement cette lettre dans la balise div :

S

Avatar de couleur fixe

Pour éviter que la couleur de l'avatar ne change à chaque affichage (avec la fonction mt_rand), il faut calculer la couleur en fonction d'une donnée fixe comme le nom d'utilisateur, la date de son inscription ou une autre donnée.

Pour simplifier l'exemple, je vais utiliser une date d'inscription (sous forme de timestamp) mais il est tout à fait possible d'utiliser d'autres données comme le nom d'utilisateur (et par exemple additionner les valeurs des lettres renvoyées par la fonction ord pour obtenir un nombre et effectuer ce même calcul).

$date = 1547305908;
$r = 195 + $date % 50;
$g = 195 + round($date / 3) % 50;
$b = 195 + round($date / 7) % 50;

$diviseur = 2; // Augmentez cette valeur pour une couleur plus foncée
$r2 = round($r / $diviseur);
$g2 = round($g / $diviseur);
$b2 = round($b / $diviseur);

echo '<div style="background:rgb('.$r.','.$g.','.$b.');color:rgb('.$r2.','.$g2.','.$b2.');">XLP</div>';

Cette fois-ci, les couleurs ne changeront pas en cas d'actualisation (survolez pour afficher la date) :

XLP
XLP
XLP
XLP
XLP
XLP
XLP

Avatar de différentes tailles

Voici un exemple de style CSS à appliquer à la balise div :

background: rgb(203,231,196);
color: rgb(102,116,98);
width: 1.8em;
line-height: 1.8em;
font-size: 5em;
text-align: center;
font-weight: bold;
X

Exemple en modifiant la propriété font-size: 3.5em :

X

Exemple en modifiant la propriété font-size: 2em :

X

Avatar arrondi

Pour arrondir les angles (et même créer un avatar complètement rond), ajoutez la propriété suivante :

border-radius: 10px;
X

Exemple en modifiant la propriété border-radius:20px :

X

Exemple en modifiant la propriété border-radius:30px :

X

Exemple en modifiant la propriété border-radius:40px :

X

Exemple en modifiant la propriété border-radius:50% :

X