This page was exported from Enseignement de l'informatique et du numérique au lycée Boissy d'Anglas [ https://icn-isn-boissy.yj.fr/wp ]
Export date: Sun May 19 7:21:18 2024 / +0000 GMT

Activité n°4 : Interagir avec les images grâce à javascript/p5.js


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.
Post date: 2018-01-12 08:46:10
Post date GMT: 2018-01-12 07:46:10
Post modified date: 2018-03-08 22:11:13
Post modified date GMT: 2018-03-08 21:11:13
Powered by [ Universal Post Manager ] plugin. HTML saving format developed by gVectors Team www.gVectors.com