Bac à sable

spetsi.js : Simulations Pédagogiques en Traitement du SIgnal

MathJax

Les symboles et équations mathématiques sont écrits avec MathJax, qui permet d'écrire du code LaTeX dans une page web. Par exemple, \(\sin(t)+\delta(t)\) s'écrit \(\sin(t)+\delta(t)\). Notez que la fonte mathématique peut être utilisée à l'aide de la commande <span style="font-family:MJX_Math;">x</span>.

Couleur et épaisseurs

Lignes des couleurs des base.

Étiquettes

Possibilité de modifier le texte, la position, la couleur et l'alignement.

On peut aussi écrire en LaTeX, à l'aide de MathJax : le code \\(e^{-j2\pi f t}\\) permet d'obtenir \(e^{-j2\pi f t}\) (notez que, contrairement au texte dans un code HTML, il faut ici doubler les anti barres obliques).

Modifier la taille est possible a posteriori (c'est-à-dire après la création du contrôle). Dans ce cas, il faut repositionner le Label.

Barre de défilement

Contrôlable avec la souris et les flèches du clavier.

Liste déroulante

Contrôlable avec la souris et les flèches du clavier.

Bouton

Notez le caractère ✕ (✕) qu'on peut appeler avec la variable symbClear et qui permet de représenter un élément à supprimer.

Dans le cas d'un unique contrôle, le code pour appeler une fonction est :

  
  var btn = Button(..., foo);  // Contrôle
  foo();                       // Appel de la fonction en dehors du contrôle

  // Évènement
  function foo()
  {
    // Code
  }

On peut également gérer des listes de contrôles et leur fonction associée :

Dans ce cas, nous avons utilisé des closures. Le code est :

  
  var btn[i] = Button(..., foo(i));  // Contrôle

  // Évènement
  function foo(i)
  {
    return function()
    {
      // Code
    }
  }

Une alternative aurait été d'utiliser des objets.

Graphe de fonction

L'objet Graph permet de représenter des signaux.

On peut définir ses valeurs extrêmes en x et en y, et afficher (ou non) un cadre, une grille ou les axes :

L'affichage d'un signal ne supprime pas le signal précédent. Il faut donc effacer le graphe si nécessaire.

Un graphe peut interargir avec la souris.

Fonctions mathématiques

Liste de progression arithmétique :

n = range(5)
n = range(5, 10)
n = range(1, 2, 0.2)
n = range(+2, -2)
n = range(10, 8, -0.5)
n = range(10, 10)
n = range(1, 10, -1)

Écran HiDPI

Rapport de taille des pixels sur le périphérique actuel : window.devicePixelRatio = .

Afficher deux animations sur la même page

Pour afficher deux animations sur la même page, il faut veiller à ce que leur code JavaScript soit compatible, notamment que les fonctions d'initialisation (générallement init()) et de dessin (générallement draw()) aient toutes des noms spécifiques. C'est vrai aussi pour les variables.

De plus, la fonction window.onload() doit appeler toutes les fonctions d'initialisation. Si la fonction window.onload() est définie dans chaque fichier js, alors il faut la redéfinir après avoir appeler les fichiers js, comme dans l'exemple :

  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
  <script src="js/spetsi.js" type="text/javascript"></script>
  <script src="js/conv1c.js" type="text/javascript"></script>
  <script src="js/convolution.js" type="text/javascript"></script>
  <script type="text/javascript">window.onload = function (){ init_conv1c(); init_convolution(); };</script>