Programmation JavaScript et images SVG

Dans cette session, nous verrons un aperçu de concepts de programmation à l’aide du langage JavaScript, utilisé notamment pour les applications Web. Nous étudierons et modifierons des petits programmes pour générer des images vectorielles au format SVG avec des figures géométriques simples.

Objectifs pédagogiques

• Base du langage SVG
• Canevas et repère cartésien.
• Primitive graphique: Segment, cercle, …
• Couleurs, style de tracé et de remplissage.
• Bases du langage JavaScript.
• Utilisation de NodeJS
• Variables, fonctions, boucles, interfaces entrée/sortie, hasard.
• Chargement de module

Déroulement possible de la session

1. Introduction.
2. Étudier et exécuter canevas.js et vérifier l’image canevas.svg.
3. Étudier et exécuter concentriques.js et vérifier l’image concentriques.svg.
4. Étudier et exécuter aleatoire.js et vérifier l’image aleatoire.svg. Recommencer plusieurs fois.
5. Étudier et exécuter courbe.js. Corriger utils.js de façon a faire fonctionner ce programme et vérifier courbe.svg.
6. Selon le temps disponible, écrire ses propres mini-programmes et fonctions pour générer des images SVG.

Installation

L’environnement suivant sera mis à disposition pour cette session:

• Linux Mint >= 21
• Paquet nodejs