Peinture dynamique programmée avec le module p5 francisé.

L'objectif du PPPP (Projet Personnel de Peinture Programmée) est de produire un dessin dynamique tenant compte de la position de la souris, du temps qui s'écoule et de variables d'entrée globales modifiées via une IHM, en un script de 30 à 70 lignes.

On peut aussi étudier un tutoriel de p5 en français, mais en notant bien au préalable qu'ici, dans l'environnement du PPPP, les fonctions setup et draw sont déjà définies : la première est inutile et la fonction dessiner remplace la seconde.

On retient déjà que la variable globale numImage (= frameCount) indique le n° de l'image en cours, produite par la fonction dessiner. Donc par exemple, la 60^e image produite arrive au bout d'une seconde lorsque la fonction de dessin est exécutée 60 fois par seconde.

On doit comprendre enfin que la programmation est ici exprimée en langage Javascript avec des fonctions complémentaires de dessin (module p5-fr), auquel on a ajouté l'usage du chapeau pour exprimer les puissances. Ainsi une expression comme y = (x-3)*(1 - x^2) sera exploitable. De même on peut utiliser les fonctions natives du module p5 (line, rect, etc…), mais c'est alors se priver de la commodité des repères.

sortir la présentation du dessin

Décadidactologue : Les ingrédients, point par point

Dans l'environnement du PPPP, comme dans ce document, on peut utiliser les fonctions 2D natives de p5, mais il est convenu d'utiliser les fonctions francisées, car elles offrent en plus la possibilité de travailler comme en Mathématique ou en Physique, c'est à dire avec plusieurs repères orthonormés en même temps, définis grâce à une instruction de la forme R = nouveau.repère(x,y, u,a) où (x,y) représente les coordonnées dans le repère de base, u l'unité graphique en pixels et a l'angle que fait l'axe des abscisses du nouveau repère avec (Ox), celui du repère de base lié nativement à la toile. On peut de plus changer dynamiquement ces valeurs pour tout repère ainsi construit, avec une instruction similaire : R.défini_par(x,y, u,a).

1. Dessiner un fond pour la toile, défini avec une couleur RVB modulable via une IHM pour les variables d'entrée. On la définit avec trois ingrédients : curseur, incrémenteur et booléen. Le texte affiché, avec usage des coordonnées, montre bien l'exécution périodique de la fonction dessiner (a priori 60 fois/s).
   Exercice : Ajouter un curseur vert permettant à l'utilisateur de modifier la composante verte du fond, avec une valeur initiale de 128 pour garder l'aspect du script originel lorsque avec_du_vert est vrai.
dessin("Composants IHM", "L.Robin") ; // Titre et auteur. curseur("rouge", 0,255,5,64) ; // rouge : variable globale. incrémenteur("bleu", 0,255,5,0) ; // bleu : variable globale. booléen("avec_du_vert",false) ; // avec_du_vert : variable globale. // Le curseur permet de faire varier la composante rouge, // de 0 à 255, par pas de 5, initialement 128. // Même principe avec l'incrémenteur pour le bleu. //------------------------------------------------------------------------------------------------------------ dessiner = function() { // Fonction exécutée 60 fois par seconde. //------------------------------------------------------------------------------------------------------------ var vert ; // Variable locale à la fonction dessiner. if (avec_du_vert) { vert = 128 } else vert = 0; fond(rouge,vert,bleu) ; // Le fond de la toile défini avec le codage RVB. texte("numImage = " + numImage,320,100); }; // ------------------------------ FIN de la fonction de dessin dynamique. ---------------------------------
2. Dessiner des points et des lignes droites avec quatre ingrédients : point, ligne, segment et trait (ou couleur). La fonction ligne est relative au repère de base alors que segment permet en plus de tracer une ligne dans un repère défini au préalable. On peut changer dynamiquement l'unité d'un repère avec R1.unité(U) où U est un nombre positif définissant une longueur en pixels (px).
   Exercice : Via un curseur Ug, permettre à l'utilisateur de changer cette unité.
dessin("Ligne ou segment ? TELQ", "L.Robin") ; // Titre et auteur. curseur("angle_de_R1", 0,180,1, 15) ; // Angle entre l'axe des abscisses de R1 et l'axe (Ox) de la toile. curseur("xA", 0,largeur,5, 0) ; // abscisse du point A. curseur("yA", 0,hauteur,5, 0) ; // ordonnée du point A. curseur("xB", 0,largeur,5, 100) ; // abscisse du point B. curseur("yB", 0,hauteur,5, 200) ; // ordonnée du point B. Repère.unité_angle = "deg" ; // Par défaut l'unité est le radian. R1 = nouveau.repère() ; // Création du repère, sans préciser ses caractéristiques. //------------------------------------------------------------------------------------------------------------ dessiner = function() { //------------------------------------------------------------------------------------------------------------ R1.défini_par(largeur/2, hauteur - 10, 0.8, angle_de_R1) ; // angle_de_R1 : en degrés. fond("forestgreen") ; // On peut utiliser des couleurs prédéfinies. // ----------------------------------------------- épaisseur(1) ; trait(255) ; coloriage(255) ; // Trait et coloriage en blanc. ligne (0,0, largeur/2,0) ; // Axe des abscisses du repère de base. ligne (0,0, 0, hauteur) ; // Axe des ordonnées du repère de base. épaisseur(0) ; texte("Repère de base lié à la toile",100,20) ; épaisseur(2); ligne(xA,yA , xB,yB) ; // Coordonnées dans le repère absolu. trait("salmon") ; segment(xA,yA+20,xB,yB+20) ; // Idem. épaisseur(14) ; point(0,0) ; point(xB,yB+20) ; // Idem. // ----------------------------------------------- épaisseur(1) ; coloriage(0) ; couleur(200) ; // Coloriage en noir, trait en couleur gris clair. segment(0,0, largeur/2,0, R1) ; // Axe des abscisses de R1 segment(0,0, 0, hauteur , R1) ; // Axe des ordonnées de R1 épaisseur(3) ; trait("yellow") ; texte("Repère R1",200,10, R1); segment(xA,yA , xB,yB , R1) ; // Coordonnées dans le repère R1. trait("chocolate") ; segment(xA,yA+20 , xB,yB+20 , R1) ; // Idem. épaisseur(14) ; point(0,0,R1) ; point(xB,yB+20 , R1) ; // Idem. }; // ------------------------------ FIN de la fonction de dessin dynamique. ---------------------------------
3. Dessiner des figures de base avec trois ingrédients : cercle (ou disque), rectangle et coloriage. Si la couleur des traits est définie avec couleur ou trait, la couleur intérieure des figures est définie avec coloriage. On peut utiliser des noms de couleurs en anglais (voir ici).
   Exercice : on modifie (ou complète) les commentaires du script pour préciser les parties du visage représentées par les instructions graphiques et on modifie le script pour changer les couleurs et ajouter des oreilles au personnage.
dessin("Disques et rectangles","L.Robin") ; // Version du 1er novembre 2016. incrémenteur("Diamètre", 6, 25, 1, 20) ; // Pour faire varier la variable globale "Diamètre", // de 6 à 25, par pas de 1, initialement 20. curseur("bleu", 0, 255, 5, 200) ; // Même principe avec la variable "bleu". // bleu et Diamètre étant des variables globales, // si l'on veut pouvoir les exploiter dans la fonction dessiner (voir ci-dessous), // on doit NE PAS les (re)déclarer dans la fonction. cadence(40) ; // 40 fois par seconde. //------------------------------------------------------------------------------------------------------------ dessiner = function() { // Fonction exécutée à la cadence définie ci-dessus. //------------------------------------------------------------------------------------------------------------ fond(0,0,bleu) ; // Couleur de fond de la toile. trait("green") ; coloriage(255,165,0,64) ; // 64 : opacité de 25 % (transparent à 75 %). rectangle([290,40],110,270) ; // Ici le coin est défini avec un tableau. trait("lightsalmon") ; épaisseur(5); rectangle(330,150,30,60) ; // Coordonnées du coin gauche puis Largeur et Hauteur. rectangle(310,250,70,20) ; coloriage(255) ; épaisseur(2) ; trait("maroon"); disque([320,100],Diamètre) ; // Centre : défini avec ses deux coordonnées (en un tableau [x,y]). coloriage(0) ; disque([320,100],Diamètre/2) ; coloriage(255) ; disque([370,100],Diamètre) ; coloriage(0) ; disque([370,100],Diamètre/2) ; }; // ------------------------------ FIN de la fonction de dessin dynamique. ---------------------------------
4. Dessiner des figures de base (comme ci-dessus) avec une animation qui tient compte d'un ingrédient fondamental : numImage (ou frameCount), on ajoute aussi une translation du repère de la toile. La couleur des traits est définie avec couleur ou trait et la couleur intérieure avec coloriage.
   Exercice : on complète le script pour ajouter une dent blanche au personnage.
dessin("Le loucheur étonné","L.Robin") ; // Version du 1er novembre 2016. incrémenteur("Rayon", 3, 13, 0.5, 7); curseur("bleu", 0, 255, 5, 200) ; curseur("vert", 0, 255, 5, 0); //------------------------------------------------------------------------------------------------------------ cadence(40) ; dessiner = function() { // Fonction exécutée 40 fois/s. //------------------------------------------------------------------------------------------------------------ var dx_1 = (numImage % 80)/8, dx_2 = (numImage % 80)/4, dy_2 = dx_2/2; fond(0,vert,bleu); trait("green") ; coloriage(255,165,0,64) ; // 64 : opacité de 25 % (transparent à 75 %). rectangle([290,40],110,270) ; // Ici le coin est défini avec un tableau. trait("lightsalmon") ; épaisseur(5); rectangle(330,150,30,60) ; // Coordonnées du coin gauche puis Largeur et Hauteur. rectangle(310 + dx_2, 250 - dy_2, 70 - 2*dx_2, 20 + 2*dy_2) ; épaisseur(2) ; trait("maroon"); coloriage(255) ; disque([320 + dx_1,100],2*Rayon) ; coloriage(0) ; disque([320 + dx_1,100],Rayon) ; coloriage(255) ; disque([370 - dx_1,100],2*Rayon) ; coloriage(0) ; disque([370 - dx_1,100],Rayon) ; }; // ------------------------------ FIN de la fonction de dessin dynamique. ---------------------------------
5. Dessiner en fonction de la position du pointeur de la souris, avec trois variables prédéfinies : Xsouris, Ysouris et sourisEstAppuyée. On note que si le fond n'est pas colorié à chaque appel de la fonction dessiner, le dessin est complété —on peint sur une toile déjà peinte— et donc on peut ainsi créer une brosse pour étaler une figure donnée.
dessin("Brosse elliptique","L.Robin") ; // Titre et auteur. curseur("L",10,100,1,25) ; curseur("H",10,100,1,25) ; // Largeur et hauteur de l'ellipse. booléen("en_rouge",false); booléen("disque_avec_L",false); curseur("luminosité",0,255,5,128); fond(255,165,200) ; // Fond de toile initial. //------------------------------------------------------------------------------------------------------------ dessiner = function() { // Fonction exécutée 60 fois par seconde. //------------------------------------------------------------------------------------------------------------ var i ; épaisseur(1) ; trait(200); if (en_rouge) { coloriage(luminosité,0,0,64) } // Que du rouge ! else { coloriage(0,0,luminosité,64) } ; // Que du bleu ! if (sourisEstAppuyée) { if(disque_avec_L) { ellipse(Xsouris, Ysouris, L, L) } else { ellipse(Xsouris, Ysouris, L, H) }; }; }; // ------------------------------ FIN de la fonction de dessin dynamique. ---------------------------------
6. Dessiner des polygones avec trois ingrédients : triangle, quadrilatère et polygone (ou polygone.régulier). Dans cet exemple le dessin n'est produit que lorsqu'on appuie sur le bouton de la souris.
   Exercice : on modifie le script pour ajouter un triangle équilatéral noir au milieu du personnage et pour que ce dernier ait le bras gauche baissé.
dessin("Atlas polygonal","L.Robin"); curseur("bleu",0,255,5,255) ; curseur("R_poly",6,48,1,12) ; incrémenteur("CE",0.4,5,0.1,2) ; // CE : coefficient d'échelle. booléen("Petit_pol_en_rouge",false) ; angle_1 = 0 ; booléen("Rotatif",false); fond(245,245,220) ; // Fond initial. repère_1 = nouveau.repère(0,0,1,angle_1) ; // Paramètres : origine (0,0) , échelle 1 et angle. //------------------------------------------------------------------------------------------------------------ dessiner = function() { // Fonction exécutée 60 fois par seconde. //------------------------------------------------------------------------------------------------------------ var x = Xsouris, y = Ysouris, a, A = [0,-60], B = [8,-8], C = [30,30], D = [0,8], E = [-30,30], F = [-8,-8], six_points = [A, B, C, D, E, F] ; // Un tableau de 6 points. épaisseur(1); if(sourisEstAppuyée) { angle_1 += 1 ; if(Rotatif) { a = PI/18*angle_1 } else a = 0; repère_1.défini_par(x,y,CE,a); trait(255,0,0,16) ; coloriage(255,165,0,64) ; triangle(A,B,F,repère_1) ; coloriage(255,255,255,100) ; quadrilatère(E,F,B,C,repère_1); trait(160,160,160,64); if (Petit_pol_en_rouge) { coloriage(255,0,0,32) } else coloriage(0,0,bleu,16); polygone.régulier(x,y-20-R_poly, R_poly, 7) ; // Dans le repère de base. coloriage(40,40,10,32) ; polygone.régulier(0,20+R_poly, R_poly, 7, repère_1); polygone(six_points,repère_1); }; }; // ------------------------------ FIN de la fonction de dessin dynamique. ---------------------------------
7. Dessiner des disques variables avec deux ingrédients : sourisEstAppuyée et moletteActive (une fonction spécifique à définir). Dans cet exemple le dessin n'est produit que lorsqu'on appuie sur le bouton de la souris, on tourne sa molette ou on déplace le curseur (car on appuie forcément sur le bouton de la souris !).
dessin("Molettube","L.Robin"); X_boule = 0 ; Y_boule = 20 ; temps_appui = 0 ; // Initialisation. curseur("R",10,100,1,20,"px") ; curseur("T",40,2000,20,1000,"ms") ; booléen("usage_de_d",false) ; booléen("usage_de_d",false); moletteActive = function(d) { Y_boule += 2; if(usage_de_d) { X_boule += d ; effacer("le brouillon") ; afficher(d) } else X_boule += 4; }; // --------------------------------------------------------------------- cadence(50) ; numImage = 0 ; dessiner = function() { // --------------------------------------------------------------------- var t = 20*(numImage % (T/20))/T, rouge = arrondi(1000*t*(1-t)) ; if(numImage == 1) fond(128) ; // Seulement pour la première image. if(sourisEstAppuyée) { if(temps_appui == 0 && Xsouris < largeur && Ysouris < hauteur) { X_boule = Xsouris ; Y_boule = Ysouris } // Pour le premier appui. else Y_boule += 2; temps_appui += 1; } else temps_appui = 0 ; // Donc forcément lorsqu'on relâche le bouton de la souris. coloriage(rouge,165,80,200) ; ellipse(X_boule + Y_boule/4,Y_boule,2*R,1.9*R); };// -------------------------------------------------------------------
8. Dessiner des arcs avec un ingrédient : arc (ou secteur). On peut aussi tracer un arc selon un repère prédéfini (avec nouveau.repère).
dessin("Arcs et secteurs","L.Robin") ; // Ici un arc/secteur est lié à une ellipse. // Paramétrage de l'arc/secteur : curseur("Ax", 0, largeur, 5, 200) ; curseur("Ay", 5, hauteur, 5, 200) ; // Centre. curseur("Rx", 10, largeur, 5, 300) ; curseur("Ry", 10, hauteur, 5, 150) ; // Rayon(s) curseur("a_0", -180, 180, 5, 0) ; curseur("a_1", -180, 180, 5, 90) ; // Angles. booléen("Secteur",true) ; booléen("en_repère_1",false) ; booléen("Forme_circulaire_avec_Rx",false); Repère.unité_angle = "deg" ; repère_1 = nouveau.repère(largeur/2, 3*hauteur/4, 1/2, 30); //------------------------------------------------------------------------------------------------------------ dessiner = function() { //------------------------------------------------------------------------------------------------------------ var dy = Ry ; // Afin de pouvoir forcer un arc ayant des rayons égaux (en x et en y). fond(0) ; épaisseur(1) ; trait(128) ; if(Secteur) { coloriage(255,255,255,220) } else coloriage(0,0,0,0); if(Forme_circulaire_avec_Rx) dy = Rx; if(en_repère_1) // On trace aussi les axes du repère 1. { épaisseur(1) ; trait(255) ; segment(0,0,largeur,0,repère_1) ; segment(0,0,0,hauteur,repère_1) ; épaisseur(4) ; trait(0,255,0) ; arc(Ax,Ay, Rx,dy, a_0,a_1, repère_1); } else { segment(Ax,Ay,largeur,Ay) ; // Axe (Ax) : parallèle à (Ox) et de même sens. segment(Ax,Ay,Ax,0) ; // Axe (Ay) : de sens contraire à (Oy), pour un sens trigonométrique usuel. épaisseur(2) ; trait("red") ; arc(Ax,Ay, Rx,dy, a_0,a_1); }; }; // ------------------------------ FIN de la fonction de dessin dynamique. ---------------------------------
9. Installer un exemple montrant l'usage de repères et de fonctions, d'une part pour faciliter la mise au point du script de dessin à partir d'un prototype dessiné sur le papier, et d'autre part pour faire évoluer indépendamment ses différentes parties, en particulier en utilisant les variables globales Xsouris et Ysouris.
10. Installer un exemple faisant office d'exercice probatoire (les modifications à apporter sont spécifiées dans les commentaires); sa résolution permet de montrer qu'on a réellement compris les notions de base sur le principe du PPPP, autrement dit qu'on est capable de produire un dessin dynamique interactif en autonomie.