ISN, Programmation, javascript/p5.js

Programmation javascript avec p5.js

Application n°1 : Créer un petit programme de dessin

Ouvrir dans un éditeur de texte (comme Notepad++ ou Sublimtext) le fichiers application-1_dessin.js. Ce programme est normalement appelé par le fichier html application-1_dessin.html.

Ce fichier contient deux fonctions (on verra ce qu’est une fonction à la partie suivante) :

  • la fonction setup() dont le code est appelé au début du programme (pour initialiser des variables ou configurer par exemple la taille de la fenêtre de dessin).
  • la fonction draw() dont le code est exécuté de manière répétée 60 fois par seconde.

Le but de cette partie est de créer un petit programme de dessin. Ne pas hésiter à tester des bouts de code dans la console, ou à consulter la documentation. On écrira du code javascript uniquement dans la fonction draw() (chercher le commentaire indiquant le début de l’exercice).

Travail à effectuer :

n° Tâche Indications
1 Compléter le commentaire en en-tête du programme en indiquant votre nom et la date.
  • Toujours prendre le temps de commenter un programme.
2 Afficher un disque de diamètre 10 pixels au centre de la fenêtre de dessin.
  • Travailler dans la fonction draw()
  • Si besoin re-tester la fonction
    ellipse() dans la console ou consulter sa documentation sur le site p5js.org.
3 Utiliser les variables mouseX et mouseY pour placer le disque à la position de la souris.
  • Ces deux variables sont créées par p5.js et contiennent la position en x et en y de la souris (consulter la documentation si besoin).
4 Colorier le disque en rouge si l’on clique à la souris, en vert sinon.
  • La variable booléenne mouseIsPressed est créée par p5.js et permet de savoir si un bouton de la souris est pressé ou non.
  • La couleur de remplissage est définie par fill(R,V,B) où R, V et B sont des nombres allant de 0 à 255 indiquant la quantité de rouge, de vert et de bleu (voir documentation).
5 Effacer le dessin lorsqu’on clique avec la molette de la souris (bouton du milieu).
  • Pour effacer il faut redéfinir la couleur du fond avec la fonction background().
  • Consulter la documentation de la variable mouseBouton pour voir comment identifier quel bouton de la souris est utilisé pour cliquer.
6 Augmenter la taille du disque lorsque l’on clique avec le bouton gauche, et la diminuer lorsque l’on clique avec le bouton droit.
  • Déclarer une variable nommée diametre juste avant la fonction draw() (à l’endroit indiqué en commentaire). Changer sa valeur en fonction du bouton utilisé pour cliquer.
         

Pages : 1 2 3 4 5 6