Visualisation d’une application linéaire

Une application linéaire f : ℝn → ℝn est une fonction qui peut-être vu comme un système dynamique qui fait bouger les vecteurs de n.

Le but de cet outil est de visualiser une application linéaire comme un système dynamique, agissant sur les points de 3. Cela dit, comme il l’est montré dans le tutoriel présenté à la fin de ce document, l’outil est beaucoup plus général et peut être utilisé pour visualiser des nuages de points dans un espace tri-dimensionnel, sans qu’une application linéaire soit impliquée.

Un dernier point important est le fait qu’il n’est pas nécessaire d’installer quelque logiciels que ce soit. On utilise uniquement des logiciels standards, déjà installés sur pratiquement tous les ordinateurs.

Cas d’étude

On considère l’application linéaire donnée par la matrice
$$ \mathbf{A} = \begin{pmatrix} \frac{1}{2} & 0 & \frac{3}{2} \\ 0 & \frac{1}{2} & \frac{3}{2} \\ 0 & 0 & 2 \end{pmatrix} $$

Cette application linéaire possède deux espaces propres.

On dit toujours que les vecteurs propres et valeurs prores nous aident à comprendre l’application linéaire. Mais qu’en est-il vraiment ?

Visualisations

Toutes les visualisation qui suivent fonctionnent sur le même principe:

Version 1 : on comprend rien !

Les points sont positionnés aléatoirement dans l’espace 3 et la matrice appliquée sur chaque point est la matrice A.

version1.html Cliquer ici pour accéder à la visualisation.

Utilisez la souris pour faire tourner et zoomer.

On vous prévient tout de suite, c’est pas joli !

C’est chaotique ! Les points sont déplacés dans tous les sens, mais on peut déjà voir qu’il se passe quelque chose avec la droite x = y = z.

Version 2 : on commence à voir des choses.

Les points sont encore positionnés aléatoirement dans l’espace 3, mais on souhaite appliquer partiellement la matrice A.

Qu’est-ce que cela signifie ? Pour répondre à cette question, on considère la diagonalisation de la matrice A.


$$ \begin{array}{ccccc} \mathbf{A} &=& \mathbf{P} & \mathbf{D} & \mathbf{P}^{-1} \\ \begin{pmatrix} \frac{1}{2} & 0 & \frac{3}{2} \\ 0 & \frac{1}{2} & \frac{3}{2} \\ 0 & 0 & 2 \end{pmatrix} &=& \begin{pmatrix} 1 & 0 & 1 \\ 0 & 1 & 1 \\ 0 & 0 & 1 \end{pmatrix} & \begin{pmatrix} \frac{1}{2} & 0 & 0 \\ 0 & \frac{1}{2} & 0 \\ 0 & 0 & 2 \end{pmatrix} & \begin{pmatrix} 1 & 0 & -1 \\ 0 & 1 & -1 \\ 0 & 0 & 1 \end{pmatrix} \\ \end{array} $$

Une propriété bien connue d’une telle diagonalisation est que si on élève A à la puissance k, l’égalité devient
$$ \begin{array}{ccccc} \mathbf{A} &=& \mathbf{P} & \mathbf{D}^k & \mathbf{P}^{-1} \\ \begin{pmatrix} \frac{1}{2} & 0 & \frac{3}{2} \\ 0 & \frac{1}{2} & \frac{3}{2} \\ 0 & 0 & 2 \end{pmatrix} &=& \begin{pmatrix} 1 & 0 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix} & \begin{pmatrix} \left(\frac{1}{2}\right)^k & 0 & 0 \\ 0 & \left(\frac{1}{2}\right)^k & 0 \\ 0 & 0 & \left(2\right)^k \end{pmatrix} & \begin{pmatrix} 1 & 0 & -1 \\ 0 & 1 & -1 \\ 0 & 0 & 1 \end{pmatrix} \\ \end{array} $$

Ceci permet de contrôler l’effet de la matrice A sur les points. En particulier, si on pose $k = \frac{1}{10}$, multiplier un vecteur v par Ak dix fois est équivalent à appliquer A une seule fois.

Dans le prochain exemple, les points sont déplacés en les multipliant par la matrice A0.005.

version2.html

Cliquer ici pour accéder à la visualisation.

C’est déjà plus intéressant ! On peut voir que les points sont attirés vers la droite x = y = z et qu’une fois rendus près de cette droite, ils sont propulsés toujours de plus en plus loin de l’origine. C’est normal, la valeur propre associée à cet espace propre étant supérieure à 1, il y a une dilatation le long de cette droite..

Version 3 : visualiser le 2e espace propre.

Dans cette version, les points sont initialisés de manière aléatoire, mais lorsqu’ils sont repositionnés, ils sont tous placés sur le plan z = 0.

Comme le plan z = 0 est un espace propre associé à la valeur propre λ1 = 1/2, ce plan est contractant. Les points sont donc aspirés vers l’origine.

version3.html

Cliquer ici pour accéder à la visualisation.

Version 4 : visualiser les deux espaces propres.

On reprend l’exemple précédent, mais cette fois-ci, on ne positionne pas les points directement sur le plan z = 0. On les positionne juste un petit peu à côté de ce plan. Concrètement, la composante en z des nouveaux points est une valeur aléatoire dans l’intervalle [ − 0.05, 0.05].

version4.html

Cliquer ici pour accéder à la visualisation.

Version 5 : on inverse les valeurs propres.

On change d’application linéaire. On considère A la matrice de l’application linéaire qui associe la valeur propore λ1 = 1/2 à la droite x = y = z et λ2 au plan z = 0.


$$ \begin{array}{ccccc} \mathbf{A} &=& \mathbf{P} & \mathbf{D} & \mathbf{P}^{-1} \\ \begin{pmatrix} 2 & 0 & -\frac{3}{2} \\ 0 & 2 & -\frac{3}{2} \\ 0 & 0 & \frac{1}{2} \end{pmatrix} &=& \begin{pmatrix} 1 & 0 & 1 \\ 0 & 1 & 1 \\ 0 & 0 & 1 \end{pmatrix} & \begin{pmatrix} 2 & 0 & 0 \\ 0 & 2 & 0 \\ 0 & 0 & \frac{1}{2} \end{pmatrix} & \begin{pmatrix} 1 & 0 & -1 \\ 0 & 1 & -1 \\ 0 & 0 & 1 \end{pmatrix} \\ \end{array} $$

Pour que la visualisation soit plus intéressante, lorsqu’un point est repositionné, on le place à proximité de la droite x = y = z.

version5.html

Cliquer ici pour accéder à la visualisation.

Sans surprises, ça donne la même chose que la version 4, sauf que les points se déplacent en le sens inverse.

Version 6 : juste pour s’amuser.

On reprend la Version 4 et on initialise les points sur une sphère de rayon 2, centrée à l’origine. Pourquoi ? Aucune idée !

version6.html

Cliquer ici pour accéder à la visualisation.

Version 7 : juste pour s’amuser (bis).

version7.html

Cliquer ici pour accéder à la visualisation.

Tutoriel pour faire ses propres visualisations

Cet outil est conçu avec une idée directrice : la simplicité !

Logiciels nécessaires : - Un navigateur web (Chrome, Firefox, Safari, Edge, etc.) - Un éditeur texte (Bloc note, NotePad++, Sublime Text, Visual Studio Code, etc.)

C’est tout !

Le tutoriel prend la forme d’un exemple simple. Voici la visualisation.
tutoriel.html

Cliquer ici pour accéder à la visualisation.

Pour reproduire cette visualisation, suivez les étapes suivantes.

  1. Télécharger l’archive Visu3D.zip et décompressez-la.
  2. Ouvrir le fichier tutoriel.html avec le navigateur (habituellement, il suffit de double-cliquer sur le fichier).
  3. Ouvrir le fichier tutoriel.html avec un éditeur texte.
  4. Lire, comprendre et modifier le code JavaScript.
  5. Rafraîchir la page du navigateur pour voir les changements.

Une fois les mécanismes compris, vous pouvez créer vos propres visualisations et, surtout, n’oubliez pas de les partager !