Laboratoires Gradients

La concentration algorithmique

Le module est 100% Web : tout se code en JavaScript avec p5.js, la planche à dessin. Rien à installer, aucune friction d'outil : tout le processeur mental va aux mathématiques. Et ces mathématiques tiennent dans un seul objet : le vecteur.

Deux algorithmes, un seul objet mathématique, un environnement léger où chaque ligne de code se lit, se tord et s'expérimente en direct dans le navigateur.

Les activités du laboratoire

Les dates exactes de réalisation et de remise sont annoncées dans le calendrier des rencontres. Cet énoncé existe aussi en version diaporama pour la classe.

🗂️ Votre dépôt GitHub de remise

Toutes les remises du module se font dans un seul dépôt GitHub, créé dans l'organisation cegepmatane à partir du dépôt de départ (template) cegepmatane/starter-intelligence-gradients. Votre dépôt part ainsi avec un README de remise déjà structuré : il reste à remplir les liens au fil des laboratoires.

Créer le dépôt (une seule fois)

1. Se connecter à GitHub, puis ouvrir la page de création de dépôt de l'organisation : github.com/organizations/cegepmatane/repositories/new (il faut être membre de l'organisation cegepmatane - sinon, le signaler à la prof).
2. Owner : choisir cegepmatane, pas votre compte personnel.
3. Repository name : intelligence-laboratoires-gradient-2026-usergithub, en remplaçant usergithub par votre nom d'utilisateur GitHub.
4. Choose visibility : Private.
5. Start with a template : choisir cegepmatane/starter-intelligence-gradients - c'est cette étape qui apporte le README de remise dans votre dépôt.
6. Include all branches : laisser à Off.
7. Cliquer sur Create repository. C'est fait : remplir ensuite les liens du README au fil des laboratoires.

⛰️ La Montagne 5%

On affiche une courbe et on cherche son minimum pas à pas, comme un skieur qui cherche le fond de la vallée. C'est la descente de gradient, l'idée qui fait apprendre presque toutes les IA modernes.

Prépa Cherche-Minimum (avant la séance de labo)

1. Explorer différentes librairies JavaScript qui permettent d'afficher une courbe dans le canvas et de connaître ses points.
2. Afficher une courbe avec au moins 2 minimums (une courbe par défaut sera fournie en classe).
3. Programmer la fonction calculerPoint( x ) qui retourne y en fonction de x.
4. D'ici la prochaine séance, penser à une stratégie pour trouver le minimum itérativement, point par point.

En laboratoire

• Voir le diaporama Simulated annealing (les stratégies et le refroidissement simulé), et observer le comportement de l'algorithme dans l'animation.
• Se familiariser avec le Code de départ Skieur et Montagne (p5.js) et le cloner (File -> Duplicate) : le Code de départ sur l'éditeur p5.js (le même lien est sur la page d'accueil, dans la zone d'évaluation du Module 1).

À remettre : 3 versions de cherche-minimum (5 points)

La montagne se descend par versions successives, de la force brute jusqu'à la vraie descente de gradient :

• VERSION COMPLÈTE : tout vérifier (1 point) - la recherche systématique parcourt tous les points un par un. On trouve le vrai minimum, mais c'est long : ce n'est pas de l'IA. On la fait en laboratoire avec la prof.
• VERSION VOISINS : regarder le point d'à côté (2 points) - la descente suit la pente en comparant au point voisin. Une des deux approches suivantes, au choix :
  • S'arrêter quand ça remonte - la descente s'arrête au premier creux : l'algorithme croit avoir trouvé le minimum.
  • Tolérer une petite remontée - mieux, mais selon le point de départ, on reste pris dans un minimum local.
• VERSION HASARD : le refroidissement simulé (2 points) - un hasard qui diminue avec le temps : on repère la zone, puis on converge dedans.
  • OU le hasard seul (compte pour 1 point sur 2) - on explore partout, mais on finit sur une pente, pas au creux exact.

Remettre les 3 versions : COMPLÈTE, VOISINS et HASARD - les 3 liens p5.js ou les 3 projets complets, dans le README de votre dépôt GitHub de remise. Le détail de chaque version est dans le diaporama Simulated annealing.

🐦 L'Essaim 5%

Avec le JS, on initie un exemple minimaliste de boid et de flocking sur une planche à dessin, puis on déconstruit une vraie simulation. Trois petites règles vectorielles, et une intelligence collective émerge.

Code Boid

1. Récupérer le Code de départ Boid (p5.js) et le cloner (File -> Duplicate) : le Code de départ Boid sur l'éditeur p5.js (le même lien est sur la page d'accueil, dans la zone d'évaluation du Module 1).
2. Introduire, en codant en français, les 3 règles du flocking : règle d'alignement, règle de cohésion, règle de séparation - en s'inspirant de sa version EN du code sur l'éditeur p5.js ou du tutoriel Flocking Simulation de The Coding Train.
3. Remettre votre URL dans le README de votre dépôt GitHub de remise.

Tuto-Flock : déconstruire une simulation

🎓 Le cadrage de ce tuto : vous ne « faites pas des renommages », vous transformez ce code en tutoriel pour un débutant - quelqu'un qui n'a jamais entendu parler de flocking et qui ouvrira votre fichier sans vous à côté. Commencez par l'épreuve des 30 secondes et le guide « Écrire un tutoriel pour débutants » : vous y verrez pourquoi un bon nom remplace un paragraphe, et vous y trouverez le gabarit de README et la grille de relecture.

1. Choisir un petit projet de flocking parmi les exemples présentés (JS ou Python - certains demandent un serveur Apache, Nginx ou Node).
2. Exécuter le code dans son ordinateur. COMMIT
3. Déconstruire (analyser) le code et identifier les lignes qui calculent l'alignement, la cohésion et la séparation.
4. Renommer en français, avec un verbe, les fonctions qui calculent : calculerAlignement(), calculerCohesion(), calculerSeparation() - le code doit toujours marcher.
5. Expliquer les opérations mathématiques avec des commentaires // dans le code de ces fonctions. COMMIT
6. Remplacer les valeurs paramétrables par des valeurs codées en dur dans votre code. COMMIT
7. TESTER, TESTER, TESTER + lien dans le README.

🔗 Liens utiles

• Diaporama : Exploration et bases de l'IA (semaine 1)
• Diaporama : Simulated annealing (la référence théorique de la Montagne : chaque version y est animée sur la même montagne, et l'avant-dernière diapositive donne la correspondance avec les anciens noms V0 à V4)
• Diaporama : Flocking algorithms (la référence théorique de l'Essaim)
• Diaporama : p5.js, la planche à dessin (aide-mémoires, référence, vidéos)
• Diaporama : Exemples de codes de flocking (les projets pour le Tuto-Flock)
• Guide : Écrire un tutoriel pour débutants (l'épreuve des 30 secondes, le gabarit de README, la grille de relecture)
• La page originale des boids de Craig Reynolds et l'article de 1987
• Tutoriel : Flocking Simulation de The Coding Train (défi 124) et la version EN du Code Boid sur l'éditeur p5.js (les inspirations pour le Code Boid)
• Démo JS : voyageur de commerce avec refroidissement simulé
• Démo : optimisation d'images par refroidissement simulé