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.
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.
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/p5@1.7.0/lib/p5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ml5@0.12.2/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.
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.
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/p5@1.7.0/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 8000Proposition d'un début de la logique de construction de votre programme :
- Créez une variable globale
startTimequi 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
playSoundqui joue un "ultrason" - Dans la foncion
playSoundassigner 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.
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.
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.