PPPP, avec p5-fr le module p5 francisé

L'objectif du PPPP (Projet Personnel de Peinture Programmée) est de concevoir un script de dessin dynamique qui tient compte de la position de la souris, du temps qui s'écoule et de variables d'entrée modifiables via une IHM. Pour une durée raisonnable de conception, ce script doit comporter de 30 à 70 lignes environ.

L'environement de travail dédié au PPPP est ainsi destiné à apprendre les bases de la programmation en Javascript via un projet de créativité graphique, mettant ainsi en œuvre une certaine pensée algorithmique.

Présentation préliminaire

Avant de faire ses premiers pas en algorithmique graphique, le béotien doit comprendre les notions de base les plus utilisées :

  1. Notions fondamentales d'algorithmique : variable (globale en l'occurence) et instruction dont l'affectation, l'affichage d'un texte (chaîne de caractères) et la fonction de dessin.
  2. Les ingrédients de pilotage du dessin dynamique : curseur, incrémenteur et booléen pour définir des variables globales d'entrée de données.
  3. Avec le script précédent : fond de la toile mis à une certaine couleur ; variables locales à la fonction de dessin ; instructions graphiques trait, coloriage, épaisseur, texte et disque.
  4. La fonction dessiner : exécutée à une certaine cadence prédéfinie ; exemple de dessin avec une ellipse variable.
  5. Les autres instructions graphiques de base, : segment, triangle, rectangle, quadrilatère, et enfin cercle, l'équivalent de disque.

En développement de logiciels, c'est surtout en étudiant des exemples et en faisant soi-même qu'on apprend et qu'on progresse. La programmation en Javascript n'échappe pas à cette règle.

Découvrir et expérimenter

Un tutoriel (ou tuto) est conçu pour travailler en autonomie, pas à pas, dans le but de faire découvrir rapidement les bases, puis assimiler les notions afin de pouvoir s'en servir. Si chaque apprenant progresse mieux en travaillant dans l'ordre de difficulté croissante des scripts, rien ne l'empêche d'explorer tous les exemples à sa guise pour avoir une idée de ce qu'on peut arriver à faire avec motivation et persévérance, qualités indispensables car l'ordinateur ne tolère aucune imprécision, ne peut deviner ce qu'on ne lui spécifie pas correctement !

On note bien que, autant pour l'environnement de travail dédié au PPPP que pour les deux cités plus loin, si l'on ajoute ?SLPDD (Sans La Présentation Du Dessin) à l'URL, on lui indique qu'il faut cacher la présentation. Il en va même avec ?ESLPDD (En Sortant La Présentation Du Dessin) on la met à droite sous le menu. On peut combiner ces options, séparées par des virgules, et même y ajouter AEDSDD (Avec Exécution Du Sucript De Dessin), comme sur cet exemple complet.

On note aussi que l'environnement PPPP permet de sauvegarder dans l'URL tout script en cours de développement, qu'on peut alors facilement copier-coller (dans un brouillon de courriel par exemple) ou bien réduire en un code facile à noter (Exemples : PPPP-avec-TinyURL avec tinyurl.com, aRBvbj avec goo.gl ou encore PPPP-avec-Bitly avec bitly.com).

  1. On expérimente le tutoriel n° 1 (code tinyURL : PPPP-Tuto-1-bis) pour expérimenter en particulier le codage RVB des couleurs et l'opacité.
  2. On traite l'exercice d'analyse et de modification d'un script existant. (code tinyURL : PPPP-exercice-1) On ajoute aussi un incrémenteur afin de pouvoir changer dynamiquement la longueur des flèches, de 5 à 12 px, par pas de 1 px.
  3. Notion d'instruction conditionnelle, avec un booléen, puis avec la gestion de la souris.
  4. Après une rapide explication des notions algorithmiques nouvelles : expérimentation d'un repère, de boucles, de la variable numImage et du modulo (opérateur %).
  5. On peut aussi utiliser des arcs de cercle ou d'ellipse, comme expliqué ici
Étude plus systématique

Une fois avoir découvert les possibilités offertes et produit quelques modifications ou quelques figures élémentaires, il est préférable ensuite d'étudier les bases plus systématiquement, point par point.

Ensuite on peut étudier et modifier des exemples plus généreux permettant de progresser par une pratique persévérante des notions de base, dans le but de mener son projet à bien.

Remarque

L'objectif est, rappelons-le, de produire une œuvre d'art dynamique. Mais comme la notion d'art est plutôt floue, si l'on peut effectivement concevoir une peinture abstraite par exemple, faite de formes géométriques esthétiquement organisées, on peut aussi chercher à présenter un mécanisme élémentaire, par exemple mouvement bielle-manivelle, un personnage connu, un objet facile à reconnaître, un être vivant ou encore une illusion d'optique.