Tracer
Vous trouverez ici la documentation de « tracer », un logiciel en ligne pour apprendre à coder.
Cette plateforme offre un environnement de programmation simple et intuitif avec comme objectif de « construire » des dessins traçables (composés de tracés sans remplissage).
De la découverte d’algorithmes basiques à l’usage plus avancés, il s’agit avant tout de découvrir ce courant artistique et de s’amuser avec les résultats obtenus.
Pour aller plus loin, le langage de tracer se base sur du JavaScript avec des fonctionnalités traduites de français.
Tracer n’a pas pour vocation d’être un outil de dessin ou de géométrie avancé ; Tracer se positionne comme un outil créatif où l’erreur, l’expérimentation, le tâtonnement et l’ajustement font partis du processus.
Notions génériques
La grille
La grille est un repère cartésien qui permet de positionner les formes à tracer. Les axes x et y sont orientés vers la droite et le bas respectivement.
Les coordonnées sont des couples de valeurs (x, y) qui indiquent la position d’un point dans la grille.
Le point (A, 1) est le point d’origine de la grille.
Vous pouvez également utiliser des chiffres pour l’axe horizontal A=1, B=2… Z=26.
Variables
Une variable est un espace de stockage pour une valeur (un chiffre, des mots…) ou une référence (un élément tracé). Elle est déclarée avec le mot-clé let suivi du nom de la variable.
let rectangle1 = … ;
« let » est un mot clé JavaScript qui permet de déclarer une variable. Le terme anglais signifie « soit ». On peut traduire ce code par : « Soit rectangle1, une variable qui stockera en mémoire ce qui suit le signe égale. »
Attention, on ne peut pas nommer une variable avec un nom réservé, un chiffre ou certains caractères spéciaux. let 3 = 2 // ne pas faire ceci
Dans Tracer, les variables A,B,C,D… Z sont déjà réservées.
Les fonctions
Une fonction est un bloc de code qui peut être appelé par d’autres parties du code.
Une fonction peut exécuter une tâche ou renvoyer un résultat.
tracerLeRectangle(2,2,4,4);
« tracerLeRectangle » est une fonction qui prend quatre paramètres : la position x, la position y, la largeur et la hauteur du rectangle à tracer. Cette fonction retourne la référence du tracé créé.
Les commentaires
Les commentaires sont des lignes de texte qui ne sont pas exécutées par le programme. Ils sont utilisés pour expliquer le code et rendre le code plus lisible.
// Ceci est un commentaire
Le raccourci clavier pour ajouter un commentaire est Ctrl + ? ou command + ?.
L’interface
Éditeur de code
L’éditeur de code est l’endroit où vous écrivez votre code. Vous pouvez y écrire des instructions pour tracer des formes, définir des variables, appeler des fonctions, etc.
Vous pouvez utiliser les touches fléchées pour naviguer dans le code, et les raccourcis clavier pour copier, coller, annuler, etc.
Le raccourci clavier pour exécuter le code est Ctrl + Entrée ou command + Entrée.
L’éditeur de code est basé sur Monaco (VS Code).
Zone de dessin
La zone de dessin est l’endroit où les formes tracées apparaissent. Vous pouvez y voir les tracés que vous avez créé.
Astuce : vous pouvez double-cliquer sur un point pour avoir ses coordonnées (en chiffre) à l’endroit de votre curseur dans l’éditeur de code.
Les boutons JS et SVG
Le bouton JS vous permet de sauvegarder votre code sur votre ordinateur (pour réouvrir votre fichier, glisser-le dans la fenêtre.
Le bouton SVG vous permet de sauvegarder votre dessin en format SVG (pour l’imprimer, l’exporter, etc.).
Démonstration
