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.

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…