Enseignement de l'informatique et du numérique au lycée Boissy d'Anglas https://icn-isn-boissy.yj.fr/wp Thu Jun 11 20:53:00 2026 / +0000 GMT Universal Post Manager 1.1.2 [ www.ProfProjects.com ] Activité n°4 : Interagir avec les images grâce à javascript/p5.js http://icn-isn-boissy.yj.fr/wp/?p=955 Thu Jun 11 20:53:00 2026 / +0000 GMT http://icn-isn-boissy.yj.fr/wp/?p=955 Revenir à l'activité précédente.

1ère étape : Ouvrir un nouveau projet thimble

Ouvrir le projet thimble suivant et cliquer sur remixer :

https://thimbleprojects.org/icnboissy/433634/

Observer les trois fichiers qu'il contient. Il y a un fichier index.html et un fichier style.css, comme précédemment, mais on y trouve en plus un fichier appelé script.js. Il s'agit d'un code, écrit en langage javascript et qui est exécuté par le navigateur. Identifier dans le fichier index.html la ligne : 
<script src="script.js"></script>
Il s'agit de la ligne qui dit au navigateur de charger le fichier script.js. On repérera également la ligne : 
<script>src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.js"</script>
Il s'agit d'un autre fichier javascript, qui contient une bibliothèque appelée p5.js. Cette bibliothèque définit de nouveaux objets et de nouvelles fonctions qui permettent notamment d'afficher et de modifier des image, ou d'interagir avec la souris.

2ème étape : Découverte du code

Essayer le programme. Normalement, quand vous cliquer sur l'image, celle-ci disparaît. Regarder maintenant le contenu du fichier script.js. En javascript, les lignes qui commencent par par // ne sont pas exécutée. Ce sont des commentaires. Ils sont utilisés pour documenter le code. Prenez le temps de la lire. Repérer la fonction draw() et à l'intérieur la portion de code qui est exécutée lorsque l'on ne clique pas sur la souris : 
if (!mouseIsPressed){
    // ce code est executé si on ne clique pas 
    // avec la souris.
    image(img,0,0);    
  }
Repérer également la portion de code qui est exécutée lorsqu'on clique à la souris : 
else {
    // ce code est exécuté si on clique avec 
    // la souris
    effacer();    
  }
Pour comprendre comment cela fonctionne, essayer de commenter les ligne image(img,0,0); ou effacer(); pour voir ce que cela change. Essayer maintenant de faire en sorte que l'image n'apparaisse que lorsque l'on clique avec la souris et disparaisse lorsqu'on relâche le bouton. Remettre le code comme initialement et passer à l'étape suivante.

3ème étape : Position et taille de l'image

Modifier l'affichage de l'image, par exemple avec : 
image(img,mouseX,mouseY,width/5,width/5);
Quel est l'effet de cette modification ?

4ème étape : Modifier la couleur de l'image

Remettre l'affichage de l'image comme initialement avec 
image(img,0,0);
Puis remplacer la fonction effacer() par la fonction changerComposantes(). Tester pour voir ce que fait cette fonction. Chercher dans le fichier script.js le code de la fonction changerComposante(). Essayer de comprendre comment cela fonctionne. Modifier la fonction changerComposante() de manière à ce que l'image devienne verte, puis jaune.

5ème étape : Essayer d'autre fonctions

On peut essayer maintenant d'autres fonctions. Par exemple :
  • inverser()
  • posteriser()
  • luminosite()
  • torche()
  • pointillisme()
Choisir une fonction et essayer de comprendre comment elle fonctionne en regardant le code. Ne pas hésiter à faire des essais et à le modifier.]]> 955 2018-01-12 08:46:10 2018-01-12 07:46:10