Maths et développement web : Équation différentielle

Lorsque l’on parle de développement web, on pense souvent au HTML, au CSS, au JavaScript, aux frameworks, ou à des sujets très concrets comme optimiser une interface ou gérer une base de données. Pourtant, derrière une grande partie de ce qui anime le web moderne, on retrouve une discipline bien plus ancienne et parfois intimidante : les mathématiques. Et parmi elles, un domaine se détache dès que l’on parle de mouvement, d’animation, de physique, d’intelligence artificielle ou de simulation : l’équation différentielle.

Rassurez-vous, nous n’allons pas plonger dans des démonstrations complexes ou des formules interminables. L’objectif ici est de comprendre à quoi servent réellement les équations différentielles, comment elles se retrouvent dans le développement web, et surtout comment les utiliser pour créer des expériences plus réalistes, plus interactives et plus intelligentes.

Nous allons faire les choses simplement, étape par étape, en racontant ce qui se passe sous le capot d’un moteur de jeu, d’un système de particules, d’une animation web fluide ou même du comportement d’un personnage non-joueur.

L’idée n’est pas d’ajouter de la difficulté, mais plutôt de montrer que les mathématiques ne sont pas une montagne impossible, mais plutôt un coffre rempli d’outils puissants que vous pouvez apprendre à manier à votre rythme.

Qu’est-ce qu’une équation différentielle, concrètement ?

Une équation différentielle est une équation qui relie une quantité à sa variation. Dit comme ça, cela peut paraître abstrait, mais prenons un exemple simple.

Imaginez une voiture qui roule. Vous pouvez mesurer :

• sa position,
• mais aussi sa vitesse,
• et encore sa manière d’accélérer ou de ralentir.

Sa vitesse, c’est simplement la variation de sa position dans le temps.
Son accélération, c’est la variation de sa vitesse dans le temps.

C’est cette relation entre une valeur et sa variation que les équations différentielles modélisent.

Ainsi, une équation différentielle permet d’exprimer : « comment quelque chose change ».

Dans le monde réel, tout change : la température d’un processeur, la vitesse d’un objet animé, la trajectoire d’une balle dans un mini-jeu JavaScript. Donc, vous l’avez compris, les équations différentielles sont partout.

Pourquoi les équations différentielles sont-elles importantes en développement web ?

Vous pourriez vous dire : « Honnêtement, je n’ai jamais eu besoin d’équations différentielles pour coder un site WordPress. » Et vous auriez raison. Pour du web vitrine classique, ce n’est pas nécessaire.

Mais dès que vous touchez au web dynamique, aux jeux en ligne, aux animations réalistes, à la visualisation de données, ou encore à l’intelligence artificielle comportementale, elles deviennent incontournables.

Quelques domaines du web où on rencontre une équation différentielle

Par exemple :

• Simulations physiques (moteurs de jeux, canvas, WebGL)
• Animation de particules (fêtes, explosions, pluie, feu d’artifice)
• Micro-jeux sur navigateur
• Modélisation 3D dans Three.js
• Comportements intelligents (IA de personnages non-joueurs)
• Interfaces animées fluides (effets d’inertie, rebond, friction)

Là où les transitions CSS vous donnent une illusion de mouvement, les équations différentielles permettent de créer une dynamique qui réagit. Un objet animé via une équation différentielle peut glisser, ralentir, rebondir… comme dans la vraie vie.

Une première équation simple : vitesse et position

Commençons par un exemple concret en JavaScript.

Vous avez un objet sur un canvas HTML. Disons un simple petit cercle. Vous décidez qu’il a une position et une vitesse.

let position = 0;
let vitesse = 5;

function update() {
    position = position + vitesse;
}

Ici, vous venez sans le savoir de résoudre une équation différentielle. Car « vitesse = variation de position ».

Dans sa forme mathématique, cela s’écrit :

dx / dt = v

Ce qui signifie : la dérivée (variation) de la position x par rapport au temps t est égale à la vitesse.

Consultez notre chapitre sur Les dérivées.

Vous venez donc d’implémenter une équation différentielle très simple, juste en ajoutant une variable dans une boucle.

Ajouter de la réalité : la friction

Dans la vraie vie, un objet ne continue pas d’avancer éternellement à la même vitesse. Il ralentit. Ce phénomène s’appelle la friction.

On peut la modéliser ainsi :

dv / dt = -k * v

Cela signifie : la vitesse diminue proportionnellement à elle-même (plus la vitesse est grande, plus elle ralentit vite).

En JavaScript, on traduit :

let position = 0;
let vitesse = 10;
let friction = 0.1;

function update() {
    vitesse = vitesse - friction * vitesse;
    position = position + vitesse;
}

Et vous venez de modéliser une loi physique réelle, avec une équation différentielle. Ce que vous observez à l’écran ressemble désormais à quelque chose de vivant, presque naturel.

Et si l’objet rebondit ?

Un rebond, c’est une inversion de vitesse lorsque l’objet touche une limite.

if (position > limite) {
    position = limite;
    vitesse = -vitesse;
}

Mais si vous voulez un rebond réaliste, on utilise ce qu’on appelle un coefficient de restitution, qui modélise la perte d’énergie à chaque rebond :

vitesse = -vitesse * 0.8;

Encore une fois, tout cela vient d’équations différentielles utilisées en physique.

Lorsque j’ai découvert ce lien entre mathématiques et web, c’était lors d’un petit jeu que je voulais coder dans un canvas. Au début, mes objets glissaient comme des fantômes. Tout semblait trop parfait et totalement irréaliste. Puis j’ai ajouté la friction, un peu d’accélération gravitationnelle, et un coefficient de rebond. D’un coup, le jeu avait l’air… crédible. C’est là que j’ai compris que la physique n’est pas un détail : c’est une dimension narrative.

Vers l’IA comportementale : comment les équations différentielles donnent de la « vie » aux agents

Vous avez probablement déjà vu dans un jeu (même simple) un personnage qui :

• vous suit,
• vous évite,
• semble réfléchir.

Derrière ces comportements, il n’y a pas forcément un algorithme complexe ou une vraie intelligence. Parfois, il y a juste… des équations différentielles.

Par exemple, l’algorithme de « steering behavior » de Craig Reynolds (utilisé dans des milliers de jeux et simulations de foules) repose sur des variations continues de vitesse et de direction. Un agent se déplace en fonction d’une force, qui modifie sa vitesse, qui modifie sa position.

Position ← Vitesse ← Accélération ← Forces du monde

Ce schéma est exactement celui des équations différentielles.

Ainsi, pour faire qu’un personnage « cherche » l’utilisateur avec fluidité, on n’a pas besoin d’intelligence. Uniquement d’une équation du style :

accélération = directionVersLaCible * intensité - friction

Ce qui peut s’écrire en code :

let position = {x: 10, y: 10};
let vitesse = {x: 0, y: 0};

function update(cible) {
    let direction = {
        x: cible.x - position.x,
        y: cible.y - position.y
    };

    let intensité = 0.01;

    vitesse.x += direction.x * intensité;
    vitesse.y += direction.y * intensité;

    position.x += vitesse.x;
    position.y += vitesse.y;
}

Ce petit bout de code donne déjà à votre objet un comportement réactif.

Le « steering behavior » est donc une méthode qui permet de donner à un personnage ou à un objet un mouvement qui paraît naturel, comme s’il réfléchissait à où aller. Au lieu de déplacer l’objet directement vers une position cible, on lui donne une direction, puis une accélération, qui vont modifier sa vitesse, puis sa position. Cela crée un mouvement fluide, progressif, sans changements brusques. L’objet ne “saute” pas d’un point à l’autre : il glisse, il corrige sa trajectoire, il ralentit ou accélère selon la situation. On a donc l’impression qu’il prend des décisions, alors qu’en réalité il applique des règles très simples basées sur sa position actuelle et celle de sa cible.

Ce qui est intéressant, c’est que ce comportement peut être combiné pour obtenir des effets plus complexes. Par exemple, si l’objet doit suivre un joueur, éviter des obstacles et rester à distance de ses alliés, on calcule trois vecteurs : un vecteur « aller vers le joueur », un vecteur « s’éloigner de l’obstacle » et un vecteur « ne pas trop se coller aux autres ». On additionne ces vecteurs pour obtenir une direction finale à suivre. Rien de magique, pas d’intelligence réelle : juste des petites variations continues de vitesse, donc des équations différentielles toutes simples. Mais à l’écran, cela donne l’impression d’un comportement vivant et spontané.

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 ?

Approfondir la physique : gravité, ressorts, oscillations et mouvements naturels

Une bonne partie des phénomènes physiques que l’on souhaite simuler en développement web peuvent se ramener à quelques équations différentielles fondamentales. Pour les découvrir, nous allons repartir d’une intuition très simple : tout mouvement provient d’une force.

Lorsqu’une force agit sur un objet, elle modifie son accélération. Cette accélération modifie sa vitesse. Et la vitesse modifie sa position. Cela crée une chaîne très logique, que l’on peut véritablement sentir, même sans formules.

Lorsque vous voyez un objet tomber dans un jeu, il n’est pas “téléporté” plus bas à chaque frame. Il subit une accélération constante (la gravité), qui augmente peu à peu sa vitesse, ce qui accentue son déplacement.

La gravité vue simplement

La gravité est une accélération constante dirigée vers le bas. Mathématiquement, on exprime cela par :

dv / dt = g

C’est-à-dire : la variation de vitesse au cours du temps est égale à g (souvent 9,81 m/s² en physique réelle, mais sur le web, vous faites ce que vous voulez).

En JavaScript :

let positionY = 0;
let vitesseY = 0;
let gravite = 0.5;

function update() {
    vitesseY = vitesseY + gravite;
    positionY = positionY + vitesseY;
}

En quelques lignes, vous venez de créer une chute naturelle. L’objet “tombe”, s’accélère, et paraît vivant.

Le ressort : un mouvement qui revient toujours vers un point d’équilibre

Vous avez sûrement déjà vu une animation qui “rebondit” légèrement autour d’une position cible, comme si elle avait une élasticité. Ce genre d’effet donne une impression de douceur et de réalisme.

Il est modélisé par une équation différentielle liée aux ressorts, souvent appelée loi de Hooke. L’idée est simple : plus l’objet est éloigné de sa position cible, plus une force le pousse pour revenir, mais cette force dépend de la distance.

On obtient une oscillation naturelle, comme une corde ou un pendule doux.

Dans le code :

let position = 0;
let vitesse = 0;
let cible = 200;
let raideur = 0.05;
let amortissement = 0.85;

function update() {
    let force = (cible - position) * raideur;
    vitesse += force;
    vitesse *= amortissement;
    position += vitesse;
}

Ce genre d’animation est utilisé partout dans le web moderne :

• menus qui glissent et se stabilisent doucement,
• interfaces iOS et Android,
• cartes draggable,
• transitions fluides.

Lorsque vous faites glisser une fenêtre sur macOS et qu’elle “rebondit”, ce n’est pas un hasard : c’est une équation différentielle !

Three.js, WebGL et la simulation dans la 3D sur navigateur

Passons maintenant à la troisième dimension. La 3D dans le navigateur fonctionne souvent avec Three.js, une bibliothèque JavaScript extrêmement populaire.

Pour déplacer, faire tomber, ou animer des objets 3D, on utilise exactement les mêmes principes que précédemment : position, vitesse, accélération.

Par exemple : une balle qui tombe dans une scène 3D.

let vitesse = new THREE.Vector3(0, 0, 0);
let gravite = new THREE.Vector3(0, -0.02, 0);

function update(mesh) {
    vitesse.add(gravite);
    mesh.position.add(vitesse);
}

Tout se fait en douceur, en continu, comme dans la nature.

Cela peut sembler très simple, mais ces quelques lignes reposent sur toute une histoire de mathématiques appliquées, développées à partir des équations différentielles décrivant les mouvements dans l’espace.

Ajouter des collisions simples

En 3D, toucher le sol signifie simplement vérifier si l’objet passe sous une certaine hauteur.

if (mesh.position.y < 0) {
    mesh.position.y = 0;
    vitesse.y = -vitesse.y * 0.7;
}

Encore une fois, nous retrouvons le même schéma : on modélise une variation de vitesse, puis une variation de position.

Simuler des foules et des essaims : quand un équation différentielle devient “sociale”

Un domaine fascinant lié aux équations différentielles est celui des comportements collectifs. Vous avez peut-être déjà observé des oiseaux voler en groupe. Ils se déplacent comme une seule entité, tout en conservant leur autonomie.

Ce comportement collectif peut être modélisé… sans intelligence réelle. Il suffit d’appliquer des variations continues de vitesse en fonction de règles simples.

Craig Reynolds a proposé trois principes à son célèbre modèle Boids :

• Cohésion (se rapprocher des voisins)
• Séparation (ne pas entrer en collision)
• Alignement (se déplacer dans la même direction que les voisins)

Chacun de ces comportements correspond à une équation différentielle appliquant une force sur la vitesse.

En JavaScript, cela donne des simulations étonnamment réalistes avec un code relativement accessible. On déplace chaque agent en fonction :

• de sa position,
• de la position des autres,
• et de quelques coefficients réglables.

On ne programme donc pas un “troupeau”, mais une variation de comportements locaux, ce qui crée un mouvement global naturel.

C’est la magie des équations différentielles : de petits changements locaux créent de l’ordre global.

Le modèle Boids cherche donc à reproduire le mouvement naturel d’un groupe, comme un vol d’oiseaux ou un banc de poissons. Chaque individu (chaque « boid ») n’a pas de chef et ne sait rien du groupe entier. Il ne suit que trois règles très simples par rapport à ses voisins proches. La cohésion : se rapprocher des autres pour rester dans le groupe. La séparation : ne pas se coller trop près, pour éviter les collisions. Et l’alignement : se diriger dans la même direction générale que les voisins. Ces trois influences créent une accélération, qui modifie la vitesse, qui modifie la position. Le mouvement final paraît alors fluide, naturel, et surtout collectif, alors que chaque individu ne « réfléchit » qu’à très courte distance.

Ce qui est marquant, c’est que ces trois règles suffisent à donner l’illusion d’une intelligence de groupe. Il n’y a pas de chef, pas de plan global, pas d’intentions complexes. Tout vient de l’équation différentielle qui met à jour la vitesse en fonction de petites variations locales. Pourtant, quand on observe le résultat, on a l’impression que le groupe se coordonne, se replie, se sépare ou se reforme, comme s’il était une seule créature. C’est un bel exemple où des règles simples, appliquées de manière continue, produisent un comportement riche, réaliste et presque vivant.

Pourquoi ces notions donnent un avantage créatif dans le web moderne

Aujourd’hui, le web dépasse largement la simple mise en page de contenu. Il devient interactif, animé, sensible, immersif. Les sites web ne sont plus figés. Ils respirent, ils réagissent, ils répondent.

Comprendre les équations différentielles permet :

• de créer des animations plus naturelles,
• de concevoir des jeux fluides,
• d’imaginer des interactions réactives,
• d’améliorer l’expérience utilisateur en ajoutant une sensation d’inertie, de poids, de matière.

C’est une manière d’ajouter de la vie dans les interfaces. Et surtout, cela ouvre des portes vers :

• la visualisation scientifique,
• l’éducation numérique,
• les expériences interactives en art digital,
• et même les simulations pour l’ingénierie ou l’architecture.

Les développeurs capables de manier ce langage ont souvent une longueur d’avance, car ils comprennent non seulement comment afficher des éléments, mais comment les faire exister dans un monde cohérent.

Tableau récapitulatif

Les équations différentielles peuvent sembler, de prime abord, réservées aux laboratoires, aux physiciens, ou à des domaines que l’on imagine très éloignés du web. Pourtant, elles sont là, au cœur de ce qui rend une animation fluide, un mouvement réaliste, un personnage crédible, un jeu agréable.

Ce ne sont pas des objets abstraits mais des descriptions simples de ce qui change. Tout ce qui bouge, glisse, tombe, accélère, ou se rapproche peut se modéliser par une équation différentielle. Et une fois que l’on comprend cela, le web cesse d’être un simple espace plat. Il devient un terrain d’expérimentation vivante, où l’on peut faire naître des mondes, des comportements, des ambiances.

Vous n’avez pas besoin de maîtriser toutes les formules. Il suffit de retenir une idée :

• Position → varie selon la vitesse
• Vitesse → varie selon l’accélération
• Accélération → varie selon les forces

Et dans ces forces, vous pouvez tout mettre : gravité, attraction, répulsion, friction, intentions, émotions même, si votre simulation le souhaite. C’est cela qui donne vie aux espaces numériques.

Alban

Fondateur de l’agence Créa-troyes.
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr