Workshop

Cadre du Cours et Objectif Pédagogique

L'objectif de ce cours de 5 jours est d'initier les étudiants de première année en informatique à l'intégration de divers types de médias dans le développement de logiciels. À la fin du cours, les étudiants devraient se sentir plus à l'aise pour aborder des domaines de programmation qui leur sont inconnus.

Compétences visées :

Être capable d’intégrer divers types de médias dans le développement de logiciels.
Être capable d’explorer et d'appliquer des concepts de programmation nouveaux de manière autonome.
Être capable de travailler en mode projet pour résoudre des problèmes pratiques.

Compétences techniques :

Maîtrise des bases de HTML, CSS, et JavaScript.
Utilisation des bibliothèques P5.js et ML5.js pour le traitement des médias.
Compréhension des concepts de base du machine learning, de l'analyse des couleurs et du traitement du son.

Objectifs pédagogiques :

Introduire le travail en mode projet.
Promouvoir l'autonomie et la curiosité technique.
Fournir une compréhension pratique des applications multidisciplinaires de la programmation.

Contexte Fictionnel

Bienvenue dans le programme de formation du C.O.P.S. : "Collectif d'Observation des Puissances Surpuissantes".

Vous avez été recrutés en tant que développeurs et scientifiques pour notre unité spéciale de cyber-opérations.

Votre mission, si vous l'acceptez, est de mettre au point un ensemble de dispositifs de détection et de tests pour identifier les extraterrestres qui vivent secrètement parmi nous.

Détails de la Mission

Détecteur de Visage

Des renseignements indiquent que nos visiteurs extraterrestres utilisent une technologie avancée de camouflage. Ils peuvent apparaître humains à l'œil nu, mais nos algorithmes de reconnaissance faciale ont été mis à jour pour repérer les légères anomalies dans leur apparence.

Dans un premier temps, lisez puis réalisez ce premier tutorial. Vous devez à la fin du tutorial savoir comment réaliser vos fichiers index.html et script.js vous-même avec P5.js.

Puis aidez-vous de ce lien pour accomplir votre mission.

N'oubliez pas d'inclure l'addon ML5 en dessous de P5 dans votre HTML :

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ml5.min.js"></script>

La fonction setTimeout(nomDeLaFonctionQuiSeraAppele, tempsEnMiliSeconde); permet de lancer une fonction au bout d'un certain temps.

Scénario de test: Créez un programme qui utilise la caméra pour détecter un visage pendant plus de 10s et redirige vers la page suivante le cas échéant. Il devra y avoir un oval de couleur grise au centre du programme, si un visage est détecté alors l'oval passera en vert.

Analyse de Couleur de Peau

Nos analyses biologiques ont révélé que bien que les extraterrestres puissent simuler notre apparence, leur épiderme a un taux de pigmentation verte légèrement supérieur.

Vous pouvez charger les pixels d'une frame de la vidéo de la même façons que les pixels d'une image. Documentation ici

Vous pouvez donc connaitre la taille de l'image video.height et video.width

Le tableau de pixel se récupère de cette façon : video.pixels.

De combien de pixel est composée l'image ? Combien de "canaux" de couleur compose une image ? Quel est la taille du tableau de pixel ? Expliquez cette différence en vous aidant de cette documentation.

Dans un 1er temps il faudra créer les boucles qui vont permettent de parcours l'image. Puis savoir si pour chaque pixel de l'image, si ce pixel dépasse une certaine valeur. Voici une aide au calcul de la formule pour compter les pixel dépassant un certain seuil de couleur :

// Compter les pixels dont le niveau de vert dépasse le seuil
if (g > threshold && g > r && g > b) {
    alienCount++; // Pixel "Alien" détecté
}

A vous de déterminer la valeur de seuil (il faut que le pixel soit dans la dominante de couleur choisi) ainsi que le nombre de pixel "Alien" ayant dépasser le seuil.

Scénario de test: Développez un algorithme qui analyse la couleur de la peau en temps réel et qui, en détectant une concentration élevée de teinte rouge, émet une alerte. Passez à la page suivante quand un humain ou un alien à été détecté avec suffisament de certitude. N'oubliez pas d'afficher à l'écran le résultat de ce test.

Test d'Audition Ultrasonique

Les extraterrestres n'ont pas la même gamme auditive que les humains. Ils ne peuvent pas percevoir les ultrasons, une faiblesse que nous pouvons exploiter.

L'humain peut entendre un son jusqu'a 20 000 Hz mais en pratique au-dela de 15 000 Hz cela commence à être difficile.

Lien vers la documentation officiel de l'oscillateur

N'oubliez pas d'inclure l'addon P5 Sound en dessous de P5 dans votre HTML :

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/addons/p5.sound.min.js"></script>

Si vous rencontrer des soucis à l'import de l'addon p5 sound vous pouvez le télécharger vous même à cette addresse. Et l'inclure dans votre HTML.

Vous pouvez créer un bouton à l'aide de P5.js.

Pour générer un nombre aléatoire servez-vous encore une fois des fonction de P5.js :

random(2000, 8000); // Génère un nombre aléatoire entre 2000 et 8000

Proposition d'un début de la logique de construction de votre programme :

Créez une variable globale startTime qui contiendra un timestamp
Créez un booléen globale playingpour savoir si le joueur est en train de jouer
Créez un booléen globale hasWonpour savoir si le joueur à gagner ou perdu
Faire une fonction qui playSound qui joue un "ultrason"
Dans la foncion playSound assigner le timestamp à laquelle le programme à lancé le son :

startTime = millis();

Dans votre fonction draw() voici une partie de ce que pourrait être le code :

function draw() {
    // [...] Du code [...]

    // Vérifier si le joueur est en train de jouer et que le temps pour réagir est écoulé
    if (playing && millis() - startTime > 1000) { // 1000 ms = 1 seconde de son
        playing = false; // Le joueur ne joue plus
        osc.amp(0); // On coupe le son
        hasWon = false; // Le joueur à perdu
    }
}

Scénario de test: Créez un système qui joue un son ultrasonique à des intervalles aléatoires. L'utilisateur doit prouver qu'il est humain en appuyant sur un bouton dans un intervalle de temps donné. Passez à la page suivante quelque soit le résultat du test.

Bonus, voici les fréquences correspondant au notes de musique :

const majorScale = [261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 493.88, 523.25];
const noteNames =  ["Do",   "Ré",   "Mi",   "Fa",  "Sol",   "La",   "Si",   "Do'"];

Vous pouvez émettre un son, voir une musique si la personne échoue ou réussi le test.

Test de Réflexes

Les temps de réaction des extraterrestres sont notoirement différents de ceux des humains, soit beaucoup plus rapides, soit beaucoup plus lents.

Un Humain peut avoir un temps de réaction plus rapide que 250ms avec un peu d'entrainement.

Vous ête des développeurs et scientifiques aguérris maintenant. Vous avez fait vos preuves en arrivant jusqu'ici. Vous n'avez plus besoins d'aide pour cette partie.

Scénario de test: Mettez au point un jeu qui mesure le temps de réaction. Utilisez ces données pour déterminer si l'individu testé est humain ou non. Passez à la page suivante quelque soit le résultat du test.

Pour finir

Chacun de ces tests contribue à notre base de données centrale, permettant au C.O.P.S. de mieux comprendre et identifier les menaces extraterrestres. À vous de faire en sorte d'assembler tous les tests effectuée précédemment pour en faire un site capable d'identifier un humain ou un extra-terrestre en affichant un score et un résultat (Réussite ou Échec).

Votre travail est la première ligne de défense de l'humanité contre l'invasion qui se prépare.

Bonne chance, agents.

DamienDabernat/Workshop-B1.md