Lorsqu’on parle de développement web, on pense souvent à HTML, CSS, JavaScript ou PHP. Mais peu de développeurs imaginent à quel point les mathématiques sont présentes derrière les écrans, notamment lorsqu’il s’agit d’intelligence artificielle, d’animations 3D ou de transformations graphiques. Pourtant, deux concepts mathématiques jouent un rôle central dans ces domaines : le vecteur et la matrice.
Ces deux notions, souvent redoutées au lycée, deviennent passionnantes lorsqu’on découvre leur utilité concrète dans le monde du code. Que vous vouliez créer une animation fluide en JavaScript, appliquer une rotation à un objet en 3D, ou encore entraîner un modèle d’IA, les vecteurs et les matrices sont partout.
Dans ce chapitre, nous allons découvrir ensemble ce qu’ils sont, à quoi ils servent, et comment les manipuler avec des exemples concrets accessibles à tous. Vous n’aurez besoin que d’un peu de logique, d’un brin de curiosité, et d’une envie d’apprendre autrement les maths, cette fois en les reliant au développement web.
- Qu’est-ce qu’un vecteur ?
- Qu’est-ce qu’une matrice ?
- Une table de nombres, mais pas seulement
- Comprendre les matrices pas à pas
- Qu’est-ce qu’une matrice, concrètement ?
- Pourquoi les matrices existent-elles ?
- Addition et soustraction de matrices
- Multiplication d’une matrice par un nombre
- Multiplication de deux matrices (le concept le plus important)
- Visualiser une matrice comme une transformation
- Comment s’entraîner à comprendre les matrices
- Ce qu’il faut retenir
- Les matrices dans la 3D et le graphisme
- Vecteurs et matrices en intelligence artificielle
- Les transformations géométriques en développement web
- Relier les maths à la pratique
- Les vecteurs et matrices : une nouvelle manière de penser le code
Qu’est-ce qu’un vecteur ?
Une idée simple : le déplacement
Un vecteur, c’est avant tout une direction et une distance. Imaginez que vous soyez sur une carte, au point A. Vous décidez d’aller au point B. Le vecteur AB représente le mouvement qui vous fait passer de A à B.
En programmation, on traduit cela par une variation sur les axes X, Y (et parfois Z).
Par exemple, si vous êtes au point (2, 3) et que vous allez à (5, 7), le vecteur qui relie ces deux points est :
→ v = (5 - 2, 7 - 3) = (3, 4)Ce vecteur dit simplement : « Avance de 3 sur l’axe X, et de 4 sur l’axe Y. »
Les vecteurs dans le développement web
Dans le développement web, les vecteurs sont utilisés partout où l’on manipule des coordonnées ou des déplacements. Par exemple, en JavaScript, si vous codez un petit jeu où un personnage se déplace, vous pouvez représenter sa vitesse sous forme de vecteur :
let position = { x: 0, y: 0 };
let vitesse = { x: 2, y: 3 };
// Mise à jour de la position
position.x += vitesse.x;
position.y += vitesse.y;Ici, à chaque image, le personnage avance de 2 pixels vers la droite et de 3 vers le bas.
Vous venez d’utiliser un vecteur sans même le savoir.
Représenter un vecteur en code
Un vecteur peut être représenté de plusieurs manières :
- Sous forme d’objet (comme ci-dessus)
- Sous forme de tableau :
[x, y]ou[x, y, z] - Ou même sous forme de classe, dans un programme plus complexe.
Exemple en JavaScript moderne :
class Vecteur {
constructor(x, y) {
this.x = x;
this.y = y;
}
addition(v) {
return new Vecteur(this.x + v.x, this.y + v.y);
}
soustraction(v) {
return new Vecteur(this.x - v.x, this.y - v.y);
}
produitScalaire(v) {
return this.x * v.x + this.y * v.y;
}
norme() {
return Math.sqrt(this.x ** 2 + this.y ** 2);
}
}Ce genre de classe est la base de nombreuses bibliothèques graphiques comme Three.js ou Pixi.js.
Qu’est-ce qu’une matrice ?
Une table de nombres, mais pas seulement
Une matrice, c’est une grille de nombres. Par exemple :
[ 1 2 ]
[ 3 4 ]Mais dans la programmation, une matrice est bien plus qu’un tableau : elle permet de décrire des transformations, comme tourner, agrandir ou déplacer un objet.
En JavaScript, on peut représenter cette matrice sous forme de tableau de tableaux :
let matrice = [
[1, 2],
[3, 4]
];Comprendre les matrices pas à pas
Avant d’aller plus loin, prenons un moment pour bien comprendre ce qu’est une matrice. Ce mot peut faire peur, mais en réalité, c’est un concept très logique, presque comme une feuille de calcul Excel.
Qu’est-ce qu’une matrice, concrètement ?
Une matrice, c’est un tableau organisé en lignes et en colonnes. Chaque case contient un nombre, et chaque ligne ou colonne a une signification précise selon le contexte.
Par exemple, la matrice suivante :
[ 1 2 3 ]
[ 4 5 6 ]se lit comme :
- 2 lignes (il y a deux rangées de nombres)
- 3 colonnes (chaque rangée a trois nombres)
On dit que c’est une matrice 2×3 (« deux par trois »).
Si vous avez déjà fait un tableau en HTML, vous savez déjà ce qu’est une matrice, sans le savoir :
<table border="1">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
</table>C’est exactement la même logique, sauf qu’en maths, les chiffres ont un rôle calculatoire.
Pourquoi les matrices existent-elles ?
Les matrices ont été inventées pour regrouper plusieurs équations ou transformations en une seule structure facile à manipuler. Au lieu de résoudre plein de petits calculs à la main, on les rassemble dans un seul tableau, qu’on peut ensuite multiplier ou additionner d’un coup.
En développement web, cela est pratique pour :
- Déplacer plusieurs points d’un dessin en une seule opération.
- Appliquer une rotation, une mise à l’échelle ou un décalage à un objet 2D ou 3D.
- Représenter les données d’un modèle d’intelligence artificielle.
Addition et soustraction de matrices
Comme pour les vecteurs, on peut additionner ou soustraire deux matrices de même taille. On additionne les éléments case par case.
Exemple :
A = [ 1 2 ]
[ 3 4 ]
B = [ 5 6 ]
[ 7 8 ]Addition :
A + B = [ 1+5 2+6 ]
[ 3+7 4+8 ]
= [ 6 8 ]
[10 12]Même logique pour la soustraction.
En JavaScript :
let A = [[1, 2], [3, 4]];
let B = [[5, 6], [7, 8]];
let C = [
[A[0][0] + B[0][0], A[0][1] + B[0][1]],
[A[1][0] + B[1][0], A[1][1] + B[1][1]]
];
console.log(C);
// Affiche : [[6,8],[10,12]]C’est un bon exercice pour débuter : manipuler des matrices avec des boucles.
Multiplication d’une matrice par un nombre
Lorsqu’on multiplie une matrice par un nombre (appelé scalaire), on multiplie chaque case par ce nombre. C’est très simple :
A = [ 2 4 ]
[ 6 8 ]
Si on multiplie par 2 :
2 * A = [ 4 8 ]
[12 16]En JavaScript :
let A = [[2, 4], [6, 8]];
let scalaire = 2;
let B = A.map(ligne => ligne.map(valeur => valeur * scalaire));
console.log(B);Cette opération sert, par exemple, à agrandir ou réduire une image en doublant les coordonnées de chaque point.
Multiplication de deux matrices (le concept le plus important)
C’est ici que les choses deviennent intéressantes, car la multiplication matricielle est la base de nombreuses opérations graphiques et d’intelligence artificielle. Quand on multiplie deux matrices, on ne fait pas une multiplication case par case. On combine les lignes de la première matrice avec les colonnes de la deuxième.
Prenons un exemple simple :
A = [ 1 2 ]
[ 3 4 ]
B = [ 5 6 ]
[ 7 8 ]Le résultat sera une nouvelle matrice :
C = A x B = [
[(1*5 + 2*7), (1*6 + 2*8)],
[(3*5 + 4*7), (3*6 + 4*8)]
]
C = [ [19, 22], [43, 50] ]En JavaScript, cela s’écrit ainsi :
function multiplierMatrices(A, B) {
let lignesA = A.length;
let colonnesA = A[0].length;
let colonnesB = B[0].length;
let C = new Array(lignesA).fill(0).map(() => new Array(colonnesB).fill(0));
for (let i = 0; i < lignesA; i++) {
for (let j = 0; j < colonnesB; j++) {
for (let k = 0; k < colonnesA; k++) {
C[i][j] += A[i][k] * B[k][j];
}
}
}
return C;
}
let A = [[1, 2], [3, 4]];
let B = [[5, 6], [7, 8]];
console.log(multiplierMatrices(A, B)); // [[19,22],[43,50]]Cette fonction est un classique qu’on retrouve dans tous les moteurs de rendu graphique et frameworks d’IA.
Visualiser une matrice comme une transformation
Les matrices sont souvent utilisées pour transformer un vecteur. Prenons un vecteur 2D :
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 ?→ v = (x, y)Si vous voulez le faire tourner, l’agrandir ou le déplacer, vous appliquez une matrice de transformation. Par exemple, la rotation (comme vue plus bas) :
[ cos(θ) -sin(θ) ]
[ sin(θ) cos(θ) ]Si vous multipliez cette matrice par votre vecteur (x, y), vous obtenez un nouveau vecteur (x’, y’) — c’est-à-dire le même point, mais transformé.
C’est exactement ce que fait le navigateur lorsque vous appliquez :
transform: rotate(30deg);Derrière cette simple ligne CSS, une multiplication matricielle repositionne chaque pixel.
Comment s’entraîner à comprendre les matrices
Pour bien assimiler ce concept, l’idéal est de :
- Dessiner des matrices sur papier et tester des multiplications simples.
- Utiliser un tableur (Excel, Google Sheets) : on peut y simuler des matrices facilement.
- Faire des mini-exercices en JavaScript, comme multiplier une matrice par un vecteur de coordonnées pour observer les résultats.
Par exemple :
let M = [[2, 0], [0, 3]]; // Agrandit en x et en y
let V = [5, 2]; // Position d'un point
let resultat = [
M[0][0] * V[0] + M[0][1] * V[1],
M[1][0] * V[0] + M[1][1] * V[1]
];
console.log(resultat); // [10, 6]Ici, notre point (5, 2) devient (10, 6) : il a été agrandi par la matrice.
Ce qu’il faut retenir
Une matrice, c’est simplement une façon organisée de manipuler plusieurs nombres à la fois. Elle vous permet :
- de représenter des transformations (déplacements, rotations, agrandissements),
- de structurer des données complexes (comme des images ou des jeux de données en IA),
- et de simplifier des calculs répétitifs (en les regroupant dans une seule formule).
Derrière le mot savant « matrice » se cache donc un concept très concret et incroyablement utile. Dès que vous manipulez des coordonnées, des images, ou des calculs en IA, vous utilisez — directement ou indirectement — des matrices.
Les matrices dans la 3D et le graphisme
Dans le monde du graphisme ou de la 3D, les matrices servent à transformer les objets. Prenons un carré à l’écran : s’il faut le faire pivoter, l’agrandir ou le déplacer, ces opérations peuvent toutes être réalisées à l’aide de multiplications matricielles.
Chaque point du carré est un vecteur. En multipliant ce vecteur par une matrice, on modifie sa position selon la transformation voulue.
Par exemple, une rotation dans le plan 2D se représente par la matrice suivante :
[ cos(θ) -sin(θ) ]
[ sin(θ) cos(θ) ]Si on veut tourner un point (x, y) de 90° autour de l’origine, on obtient :
cos(90°) = 0
sin(90°) = 1Donc la matrice devient :
[ 0 -1 ]
[ 1 0 ]Appliquée au point (1, 0) :
x' = 0*1 + (-1)*0 = 0
y' = 1*1 + 0*0 = 1Le point (1,0) devient (0,1) — il a bien tourné de 90° !
Vecteurs et matrices en intelligence artificielle
Représenter les données
En intelligence artificielle, les vecteurs et matrices sont essentiels. Chaque donnée, chaque image, chaque phrase peut être représentée sous forme de vecteur.
Prenons une image en noir et blanc de 2×2 pixels :
[ 0 255 ]
[ 128 64 ]Elle peut être représentée par le vecteur [0, 255, 128, 64]. Les réseaux de neurones manipulent ensuite des millions de ces vecteurs.
Les calculs matriciels dans l’IA
Le cœur des calculs d’un réseau de neurones, ce sont les multiplications de matrices. Lorsqu’un réseau apprend, il multiplie les entrées (vos données) par des matrices de poids, puis applique des fonctions mathématiques.
C’est ce qu’on appelle la propagation avant. Un petit exemple simplifié en pseudo-code :
import numpy as np
# Entrées : 3 neurones
X = np.array([[1, 2, 3]])
# Poids : matrice 3x2
W = np.array([[0.2, 0.5],
[0.3, 0.7],
[0.4, 0.9]])
# Calcul de sortie
Y = np.dot(X, W)
print(Y)Résultat :
[[2.0, 5.0]]Cette multiplication de matrices permet au modèle d’extraire de nouvelles informations à partir des données d’entrée. Et ces opérations sont répétées des millions de fois pendant l’entraînement.
Les transformations géométriques en développement web
Matrices et transformations CSS
Si vous avez déjà utilisé la propriété transform en CSS, vous avez manipulé des matrices sans le savoir. Quand vous écrivez :
transform: rotate(45deg);Le navigateur calcule une matrice de rotation pour déplacer chaque pixel du bon angle. En réalité, transform: matrix(a, b, c, d, e, f); permet d’appliquer directement votre propre transformation 2D.
Exemple concret en JavaScript
Prenons un carré HTML et faisons-le tourner via JavaScript :
<div id="carre" style="width:100px; height:100px; background:red;"></div>
<script>
let carre = document.getElementById("carre");
let angle = 0;
setInterval(() => {
angle += 5;
let radians = angle * Math.PI / 180;
let a = Math.cos(radians);
let b = Math.sin(radians);
let c = -Math.sin(radians);
let d = Math.cos(radians);
carre.style.transform = `matrix(${a}, ${b}, ${c}, ${d}, 0, 0)`;
}, 100);
</script>Ici, nous faisons tourner un carré grâce à une matrice de rotation en CSS, calculée par JavaScript.
Relier les maths à la pratique
Visualiser avec des bibliothèques
Des bibliothèques comme p5.js, Three.js ou TensorFlow.js utilisent ces principes. Elles gèrent les vecteurs et les matrices de manière transparente, mais il est très utile de comprendre ce qu’il se passe sous le capot.
- p5.js : utilise les vecteurs pour les dessins, les mouvements, la physique.
- Three.js : emploie des matrices pour gérer les caméras, les rotations et les projections 3D.
- TensorFlow.js : effectue des milliers de multiplications matricielles pour entraîner des IA directement dans le navigateur.
Exemple d’une caméra 3D en Three.js
Quand vous déplacez une caméra dans une scène 3D, Three.js utilise une matrice pour définir sa position, sa rotation, et son angle de vue.
Ces matrices sont combinées pour produire une matrice de projection.
Chaque pixel visible à l’écran est le résultat de plusieurs multiplications entre vecteurs (points de la scène) et matrices (transformations appliquées).
Ainsi, un simple rendu 3D repose sur un grand nombre de calculs matriciels.
Les vecteurs et matrices : une nouvelle manière de penser le code
Apprendre à manipuler les vecteurs et les matrices, c’est un peu comme apprendre à penser en transformations. Au lieu de dire « bouge ce point », vous dites « applique cette transformation à tous les points ». C’est une approche plus abstraite, mais plus puissante, qui permet d’écrire du code plus propre, plus rapide et plus flexible.
Par exemple, si vous codez un petit moteur physique, vous pouvez représenter tous les objets par leurs positions (vecteurs) et appliquer une matrice de transformation globale pour simuler une rotation de la caméra, un zoom ou un déplacement global.
Les vecteurs et matrices ne sont pas seulement des concepts abstraits sortis d’un manuel de mathématiques. Ce sont des outils essentiels du monde numérique, qu’il s’agisse d’intelligence artificielle, de graphismes, d’animations ou même d’interfaces web modernes.
Ils permettent de décrire le monde en nombres, de transformer les images, de bouger les objets, de calculer les trajectoires et d’apprendre à partir de données.
En comprenant ces bases, vous ne regarderez plus jamais les transformations CSS, les calculs d’une IA ou les mouvements d’un objet 3D de la même manière. Vous saurez ce qui se cache derrière : une symphonie de vecteurs et de matrices qui donnent vie au web moderne.
Et si ces notions vous semblent encore abstraites, rappelez-vous que tout commence petit. Un simple déplacement (x, y) est déjà un vecteur. Et un simple zoom, une rotation ou un décalage, c’est déjà une matrice en action.
