Loi Uniforme Continue : Coder une pluie de particules en JS

Vous avez sans doute déjà croisé ces sites web où, à chaque rafraîchissement, une nouvelle image de fond apparaît ou une animation s’affiche de manière totalement équitable. Ce n’est pas de la magie, c’est l’application pure et simple des probabilités, et plus précisément de la loi uniforme continue. Nous allons la découvrir en codant une animation de pluie de particules en JavaScript.

• Transformer des calculs théoriques en fonctionnalités concrètes et dynamiques sur vos interfaces.
• Injecter un hasard naturel dans vos animations et délais pour rendre vos expériences utilisateurs moins robotiques et plus organiques.
• Équilibrer parfaitement la distribution de vos éléments graphiques afin d’éviter les amas visuels et garantir une harmonie esthétique sur tous les écrans.

Nous allons découvrir comment cette notion mathématique devient un outil redoutable pour créer de l’imprévisibilité et de la fluidité dans vos interfaces web.

Mais au fait, c’est quoi cette fameuse loi uniforme continue ?

Imaginez que vous attendiez un bus. On vous dit qu’il passera pile entre 14h00 et 14h10, de manière totalement aléatoire. Vous n’avez aucune raison de penser qu’il arrivera plus à 14h01 qu’à 14h09. Chaque seconde dans cet intervalle de dix minutes a exactement la même chance d’être l’instant T de l’arrivée.

C’est exactement cela, la loi uniforme continue. C’est une loi de probabilité où chaque valeur comprise dans un intervalle défini (disons entre un point a et un point b) a la même « chance » d’apparaître. Le terme « continue » signifie que l’on ne choisit pas seulement des nombres entiers comme 1, 2 ou 3, mais n’importe quel nombre réel avec une infinité de décimales, comme 1,45678…

Pourquoi « Uniforme » ?

Le mot parle de lui-même. C’est l’égalité parfaite. Pas de favoritisme, pas de courbe en cloche où les valeurs du milieu sortent plus souvent. Si vous visualisez cela sous forme de graphique, cela ressemble à un rectangle parfaitement plat.

Formule de la loi uniforme continue

Pour les amateurs de symboles, la loi uniforme continue sur un intervalle [a,b] se définit par une fonction de densité. Mais ne fuyez pas ! Voici comment la comprendre simplement.

Si vous voulez calculer la probabilité qu’un événement se produise, la formule de la fonction de densité f(x) est :

Pourquoi cette division ? C’est logique : comme la somme totale des probabilités doit toujours être égale à 1 (soit 100%), et que votre « terrain de jeu » s’étend de a à b, la hauteur de votre rectangle doit être l’inverse de sa largeur pour que l’aire totale soit égale à 1.

Exemple concret : Si vous tirez un nombre au hasard entre 0 et 10 :

• a=0
• b=10
• La densité est de 1/(10−0)=0,1.

Cela signifie que la « concentration » de probabilité est la même partout. Pour un développeur, cela garantit que votre générateur de nombres aléatoires ne triche pas.

Pourquoi le développeur web en a-t-il besoin ?

Vous vous demandez peut-être : « Pourquoi devrais-je m’embêter avec ça alors que j’ai Math.random() en JavaScript ? ». Eh bien, figurez-vous que Math.random() EST une application directe de la loi uniforme continue.

La création de délais naturels

Imaginez que vous développiez un jeu ou une animation où des ennemis apparaissent. Si l’ennemi surgit toutes les 2 secondes pile, le joueur va s’ennuyer très vite. Si vous utilisez une loi uniforme entre 1 et 5 secondes, le cerveau humain perçoit un hasard « propre » et fluide. L’expérience devient moins robotique, plus humaine.

Le test de charge (Simulation)

Si vous voulez tester si votre serveur tient le choc, vous n’allez pas envoyer 1000 requêtes à la même microseconde (ce serait une attaque DDoS, pas un test réaliste). Vous allez répartir ces requêtes uniformément sur une minute. Chaque requête aura un « moment de départ » aléatoire dans cet intervalle de 60 secondes. C’est là que notre loi intervient pour simuler un comportement utilisateur crédible.

Le placement d’éléments graphiques

Pour un site créatif, vous pourriez vouloir disperser des particules ou des étoiles en fond d’écran (nous allons le voir plus loin). En utilisant la loi uniforme continue pour les coordonnées X et Y, vous vous assurez que les étoiles couvrent tout l’écran de manière homogène, sans s’agglutiner bizarrement dans un coin.

Passer de la théorie au code JavaScript

En JavaScript, la fonction Math.random() est votre meilleure amie. Par défaut, elle suit une loi uniforme continue sur l’intervalle [0,1[. Cela signifie qu’elle peut vous donner 0, 0.123456, ou 0.999999, mais jamais tout à fait 1.

Cependant, dans la vraie vie du web, on a rarement besoin d’un chiffre entre 0 et 1. On veut souvent une valeur entre deux bornes personnalisées.

Créer sa propre fonction de loi uniforme

Voici comment transformer le 0-1 de base en un intervalle [min,max] :

/**
 * Génère un nombre aléatoire suivant une loi uniforme continue
 * @param {number} min - La borne inférieure
 * @param {number} max - La borne supérieure
 * @returns {number} Un nombre réel entre min et max
 */
function genererUniforme(min, max) {
  return Math.random() * (max - min) + min;
}

// Utilisation pour un délai d'animation entre 1.5s et 4.5s
const delaiAlea = genererUniforme(1.5, 4.5);
console.log(`L'animation démarrera dans ${delaiAlea.toFixed(2)} secondes.`);

Explication du calcul

1. Math.random() : On part d’une base entre 0 et 1.
2. * (max - min) : On « étire » cette plage pour qu’elle ait la largeur de notre intervalle souhaité.
3. + min : On décale le tout pour commencer à notre valeur minimale au lieu de zéro.

C’est simple, n’est-ce pas ? Pourtant, cette petite ligne de code est le moteur de milliers de fonctionnalités sur le web moderne.

Les pièges à éviter pour un débutant

Même si la loi uniforme continue semble simple, il y a quelques erreurs classiques dans lesquelles il ne faut pas tomber quand on débute en développement web.

Ne pas confondre « Continu » et « Discret »

Si vous avez besoin de tirer au sort un index de tableau (0, 1, 2, 3…), vous ne voulez pas d’une loi continue, mais d’une loi discrète. Pour cela, on utilise Math.floor() pour arrondir le résultat. La loi uniforme continue, elle, est faite pour les tailles, les opacités, les rotations ou les durées.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

L’illusion du hasard

Sachez que Math.random() est ce qu’on appelle un générateur « pseudo-aléatoire ». Pour 99% des sites web, c’est parfait. Mais si vous développez un site de sécurité bancaire ou de cryptographie, la loi uniforme gérée par Math.random() n’est pas assez « imprévisible ». Il faudra alors se tourner vers l’API crypto.getRandomValues().

👉 Pour aller plus loin : Générer un vrai nombre aléatoire en PHP

La maîtrise de la loi uniforme continue est souvent le premier pas vers une programmation plus organique. Elle permet de sortir du carcan des valeurs fixes pour embrasser une certaine forme de liberté mathématique. En comprenant que chaque point d’un intervalle a la même importance, vous gagnez un contrôle total sur l’aléa de vos créations.

C’est un outil de design à part entière.

Un cas concret et visuel : Créer une pluie de particules

Rien de tel que la mise en pratique pour ancrer des concepts mathématiques. Imaginons que vous vouliez décorer le bandeau supérieur de votre site avec une animation de neige ou de confettis. Si vous placez chaque flocon à des coordonnées fixes, le résultat sera d’un ennui mortel.

C’est ici que la loi uniforme continue entre en scène pour simuler un chaos organisé. Pour chaque flocon, nous allons tirer au sort trois paramètres essentiels : sa position horizontale, sa taille et sa vitesse de chute.

Le code pas à pas

Imaginez un conteneur HTML :

<div id="zone-animation"></div>

Voici comment nous allons utiliser notre loi de probabilité en JavaScript pour peupler cet espace.

const zone = document.getElementById('zone-animation');

function creerParticule() {
  const flocon = document.createElement('div');
  
  // 1. Position horizontale (X)
  // On utilise la loi uniforme sur l'intervalle [0, largeur de l'écran]
  const positionX = Math.random() * window.innerWidth;
  
  // 2. Taille du flocon
  // On veut des flocons entre 2px et 8px pour créer de la profondeur
  const taille = Math.random() * (8 - 2) + 2;
  
  // 3. Vitesse de chute (Durée de l'animation)
  // Entre 3 et 7 secondes pour éviter que tout tombe en bloc
  const vitesse = Math.random() * (7 - 3) + 3;

  // Application des styles
  flocon.style.cssText = `
    position: absolute;
    left: ${positionX}px;
    width: ${taille}px;
    height: ${taille}px;
    background: white;
    border-radius: 50%;
    top: -10px;
    opacity: ${Math.random()}; // Loi uniforme sur [0, 1] pour la transparence
    animation: chute ${vitesse}s linear infinite;
  `;

  zone.appendChild(flocon);
}

// On génère 50 flocons
for(let i = 0; i < 50; i++) {
  creerParticule();
}

Rien ne bouge pour le moment et c’est normal. En tant que développeur, on oublie souvent que le JavaScript ne fait qu’une partie du travail : il définit les paramètres de l’animation, mais c’est au CSS de dire au navigateur comment faire tomber ces flocons.

Il vous manque deux éléments essentiels pour que la magie opère :

1. La règle @keyframes : C’est elle qui définit le mouvement de « chute » que vous avez appelé dans votre code JS.
2. La gestion du débordement : Pour éviter que les flocons ne se baladent partout sur votre page web.

/* C'est ici que l'on définit l'animation "chute" */
@keyframes chute {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(310px); /* Un peu plus que la hauteur du cadre */
    }
}

Pourquoi c'est "mathématiquement" beau ?

En utilisant la loi uniforme continue pour la position left, vous garantissez que sur le long terme, vos flocons seront équirépartis. Il n'y aura pas de zone vide ou de zone trop dense sur votre écran. C'est le principe même de la densité de probabilité constante : chaque pixel de la largeur a la même chance d'accueillir un flocon.

L'Espérance : Ce que vous pouvez prévoir

En statistiques, on parle souvent de l'espérance d'une loi. Pour la loi uniforme continue, c'est très intuitif : c'est la valeur moyenne que vous obtiendrez si vous répétez l'expérience des milliers de fois.

La formule est d'une simplicité enfantine :

Si vous générez des délais aléatoires entre 1 et 5 secondes pour vos animations, l'espérance est de (1+5)/2=3 secondes.

Pourquoi est-ce utile pour vous, développeur ? Cela vous permet de garder le contrôle sur l'expérience utilisateur (UX). Si vous savez que la moyenne est de 3 secondes, vous pouvez concevoir votre interface en conséquence. Si cette moyenne est trop longue, vous n'avez pas besoin de changer toute votre logique, il vous suffit de modifier les bornes a et b de votre loi uniforme pour ajuster le "ressenti" global du site.

Loi Uniforme vs Loi Normale : Ne vous trompez pas de hasard

Il est crucial de comprendre que la loi uniforme continue est un choix délibéré. Parfois, les débutants l'utilisent alors qu'ils auraient besoin d'une "courbe en cloche" (loi normale).

• Loi Uniforme : Vous voulez que chaque résultat soit aussi probable qu'un autre (ex: choisir une couleur au hasard dans une palette).
• Loi Normale : Vous voulez que les résultats gravitent autour d'une moyenne (ex: la taille des utilisateurs, où les extrêmes sont rares).

Dans le développement web, la loi uniforme est la reine car elle est la plus simple à implémenter avec Math.random() et elle offre cette sensation de clarté et de justice dans la distribution des éléments.

---

La loi uniforme continue n'est pas qu'une ligne dans un manuel de Terminale S ou un souvenir poussiéreux d'amphithéâtre. C'est le pinceau invisible qui permet de casser la rigidité binaire de l'informatique. En comprenant comment manipuler des intervalles et des densités, vous passez du statut de simple codeur à celui d'artisan de l'expérience numérique.

Le hasard, lorsqu'il est maîtrisé par les mathématiques, devient un outil de design puissant. Il apporte cette petite étincelle d'imprévisibilité qui rend un site web organique, vivant et surtout, moins prévisible pour l'œil humain. Alors n'ayez plus peur de ces formules : elles sont là pour servir votre créativité, pas pour l'entraver.