Présentation

Dessiner d’abord, lire le code ensuite

CoddyDraw est l’éditeur de dessin intégré à CoddyRun. On y dessine à la souris sur une toile, et chaque forme tracée devient une instruction CoddyRun : rectangle, cercle, ligne, label… visible en direct dans le panneau de droite. On découvre les coordonnées et les couleurs par le geste, avant de les écrire soi-même.

En trois étapes

1. OuvrirDepuis l’éditeur, sur une page vide ou sur le code de dessin sélectionné

2. DessinerChoisir un outil, tracer sur la toile ; le code s’écrit à droite

3. InsérerLe code est placé dans l’éditeur, au curseur (ou à la place de la sélection)

Rien n’est écrit dans ton code tant que tu n’as pas cliqué sur Insérer dans le code. Si tu fermes après avoir dessiné, CoddyDraw demande confirmation pour ne rien perdre par erreur.

L’écran de CoddyDraw

Les outils, la toile, le panneau et la barre d’état

Les zones

OutilsÀ gauche : la colonne des 12 outils de dessin

ToileAu centre : la feuille de dessin, avec sa grille de repère

PanneauÀ droite : la toile, les couleurs et le trait, la grille et le code CoddyRun

Barre d’étatEn bas : coordonnées du pointeur, rappel de l’outil, zoom

La barre d’outils

Annuler / RétablirRevenir sur un changement, ou le refaire

Tout effacerRetire toutes les formes (le code conservé reste)

Insérer dans le codePlace le code du dessin dans l’éditeur

Insérer et exécuterInsère, puis lance le programme

AideRappel des gestes, des outils et des raccourcis (F1)

FermerQuitter CoddyDraw (Échap)

À la première ouverture, un didacticiel fait le tour de l’écran. On peut le relancer à tout moment depuis l’Aide, ou cocher la case pour ne plus l’afficher.

Les outils

Chaque outil a sa touche ; survoler un bouton rappelle son nom

Touche	Outil	Comment l’utiliser	Dans le code
`V`	Sélection	Clique une forme pour la choisir, glisse pour la déplacer, tire la poignée pour la redimensionner.	—
`D`	Gomme	Clique ou passe sur une forme pour l’effacer.	—
`P`	Crayon	Dessine à main levée.	un tracé de points
`L`	Ligne	Glisse pour tracer. Maj : angles de 45°.	`ligne()`
`F`	Flèche	Glisse du départ vers la pointe. Maj : angles de 45°.	`flèche()`
`R`	Rectangle	Glisse d’un coin à l’autre. Maj : carré.	`rectangle()`
`U`	Rectangle arrondi	Glisse d’un coin à l’autre. L’arrondi se règle dans le panneau.	`rectangle_arrondi()`
`C`	Cercle	Clique le centre puis glisse pour le rayon.	`cercle()`
`E`	Ellipse	Glisse d’un coin à l’autre. Maj : cercle.	`ellipse()`
`T`	Triangle	Glisse : le sommet est sur le bord de départ. Maj : équilatéral.	`triangle()`
`G`	Polygone	Clique chaque sommet. Double-clic, Entrée ou clic sur le 1er point pour fermer.	`polygone()`
`X`	Texte	Clique pour écrire (le clic donne la ligne de base). Entrée pour valider.	`label()`

Le détail de chaque fonction (paramètres, couleurs, épaisseur) est dans la référence du langage : fonctions intégrées.

Dessiner

Tracer, contraindre, écrire

Tracer une forme

Choisis un outil dans la colonne de gauche, puis glisse sur la toile. La forme prend les couleurs, l’épaisseur et l’arrondi réglés dans le panneau. Une ligne d’aide, en bas de la fenêtre, rappelle comment utiliser l’outil en cours.

MajCarré, cercle parfait, triangle équilatéral ou angles de 45°

PolygoneUn clic par sommet ; double-clic, Entrée ou clic sur le 1er point pour fermer

CercleLe premier clic donne le centre, le glisser donne le rayon

ÉchapAnnule le tracé en cours

Écrire un texte

ClicAvec l’outil Texte : le point cliqué donne la ligne de base du texte

EntréeValide le texte (Échap : abandonne)

Clic sur un texteAvec l’outil Texte : modifie un texte déjà posé

Taille du texteSe règle dans le panneau, de 1 à 100

Modifier une forme

Avec l’outil Sélection (V)

Déplacer et redimensionner

ClicChoisit la forme (clic sur la toile vide : désélectionne)

GlisserDéplace la forme choisie

Poignée du coinRedimensionne ; Maj garde les proportions

FlèchesDécalent la forme d’1 pixel (Maj : 10 pixels)

Réglages du panneauS’appliquent directement à la forme choisie

Les guides d’alignement

En déplaçant une forme ou un sommet, des guides roses l’alignent sur les bords et les centres des autres formes et de la toile. Maintiens Alt pour les ignorer le temps d’un geste.

Les sommets d’un triangle ou d’un polygone

Glisser un sommetLe déplace

Glisser un point « + »Ajoute un sommet entre deux autres (un triangle devient un polygone)

Double-clic sur un sommetLe retire

Effacer

Gomme (D)Clique ou passe sur les formes à effacer

SupprSupprime la forme choisie

Tout effacerRetire toutes les formes ; Ctrl + Z les fait revenir

Le menu du clic droit

Sur une forme, ou sur la toile vide (Maj + F10 au clavier)

Action	Effet
Sur une forme
Copier / Couper	Garde la forme pour la coller ensuite
Dupliquer	Crée une copie de la forme
Tout devant / Avancer	Passe la forme au premier plan, ou d’un plan vers l’avant
Reculer / Tout derrière	Passe la forme d’un plan vers l’arrière, ou tout au fond
Supprimer	Retire la forme
Sur la toile vide
Coller ici	Colle la forme copiée à l’endroit du clic
Ajuster la vue	Affiche toute la toile dans la fenêtre
Afficher / Masquer la grille	La grille de repère

Les plans suivent l’ordre du code : une instruction écrite plus bas dessine par-dessus celles du dessus. Changer de plan déplace donc la ligne dans le code.

Le panneau de droite

La toile, les couleurs et le trait, la grille, le code

Toile

NomLe nom de la variable toile dans le code (dessin par défaut)

Largeur / HauteurLa taille de la toile, de 1 à 1000 pixels

FondLa couleur de fond (remplir) ; « aucun » la retire

déclarer la toileÉcrit la ligne « nom est une toile »

écrire dimension()Écrit la taille de la toile

afficher à la finTermine par « affiche nom »

Couleurs et trait

RemplissageLa couleur de l’intérieur ; « aucun » pour une forme vide

OpacitéDe 0 à 100 % : la couleur devient transparente

Trait / contourLa couleur des lignes et du bord des formes ; « aucun » pour ne pas avoir de bord

ÉpaisseurL’épaisseur du trait, de 1 à 40

Arrondi des coinsPour le rectangle arrondi

Taille du textePour l’outil Texte

⇄Échange la couleur de remplissage et celle du trait

Grille et code

afficherAffiche la grille de repère

aimanter les pointsPlace chaque point exactement sur la grille

PasL’écart entre les lignes de la grille, de 2 à 200

Code CoddyRunLe code du dessin, mis à jour à chaque geste ; on peut le sélectionner et le copier

Clique une pastille pour choisir une couleur. Les réglages grisés n’ont pas d’effet sur l’outil ou la forme en cours, mais restent modifiables. CoddyDraw retient tes réglages d’une ouverture à l’autre.

La vue

Zoomer, se déplacer, se repérer

MoletteZoome autour du pointeur, de 10 % à 2 400 %

Espace + glisserDéplace la vue (ou bouton du milieu de la souris)

0Ajuste la toile à la fenêtre (ou clic sur le pourcentage)

1Affiche la toile en taille réelle

CoordonnéesLa barre d’état affiche x et y du pointeur, en pixels de la toile

Petite flècheSur le bord de la toile : masque ou affiche le panneau de droite

L’origine (0, 0) est le coin en haut à gauche de la toile : x augmente vers la droite, y augmente vers le bas. Voir les fonctions de dessin.

Du dessin au code

Une forme dessinée, une instruction écrite

Chaque forme devient une ligne de code, dans l’ordre où elle est dessinée. Le code commence par la toile (déclaration, dimension, fond) et se termine par affiche : on peut l’exécuter tel quel. Insérer dans le code le place au curseur, ou à la place de la sélection que tu avais ouverte dans CoddyDraw.

Exemple : un dessin et son code

Code

maToile est une toile
dimension(maToile, 300, 200)
remplir(maToile, #1E2430)
rectangle(maToile, 20, 20, 120, 80, #E63946)
cercle(maToile, 220, 100, 50, #FFD60A)
label(maToile, 20, 180, 'Mon dessin', #FFFFFF, 16)
affiche maToile

Sur la toile

rectangle(maToile, 20, 20, 120, 80, …)coin en haut à gauche (20, 20), largeur 120, hauteur 80

cercle(maToile, 220, 100, 50, …)centre (220, 100), rayon 50

label(maToile, 20, 180, 'Mon dessin', …, 16)ligne de base du texte en (20, 180), taille 16

Dessiner sur une toile qui existe déjà

Si ton programme a déjà sa toile, donne son nom dans le panneau et décoche déclarer la toile, écrire dimension() et afficher à la fin : CoddyDraw n’écrit alors que les formes.

Ouvrir un code existant

Ce qui devient modifiable, et ce qui est conservé tel quel

Dans la sélection	Dans CoddyDraw
Toile, `dimension`, `remplir`, formes simples (`rectangle`, `cercle`, `label`…)	Des formes que l’on peut choisir, déplacer et modifier
Boucles, variables, fonctions qui dessinent	Code conservé : le résultat est affiché mais verrouillé ; il se modifie dans le code et il est réécrit tel quel
Lignes qui ne dessinent pas	Signalées dans un message (avec leur numéro de ligne) : elles ne sont pas reprises et seront retirées si tu remplaces la sélection

Lis le message affiché en haut de la toile avant d’insérer : il dit quelles lignes ne sont pas reprises. Pour les garder, sélectionne seulement le code de dessin avant d’ouvrir CoddyDraw. Tout effacer ne retire pas le code conservé.

Raccourcis clavier

Sur Mac, Ctrl devient ⌘ et Alt devient ⌥ ; F1 les affiche dans CoddyDraw

Touches	Action
Outils
`V`	Sélection
`D`	Gomme
`P`	Crayon
`L`	Ligne
`F`	Flèche
`R`	Rectangle
`U`	Rectangle arrondi
`C`	Cercle
`E`	Ellipse
`T`	Triangle
`G`	Polygone
`X`	Texte
Modifier
`Ctrl` + `Z`	Annuler
`Ctrl` + `Y`	Rétablir (ou Ctrl + Maj + Z)
`Ctrl` + `C`	Copier la forme choisie
`Ctrl` + `X`	Couper la forme choisie
`Ctrl` + `V`	Coller (chaque collage est un peu décalé)
`Ctrl` + `D`	Dupliquer la forme choisie
`Suppr`	Supprimer la forme choisie (ou Retour arrière)
`← ↑ → ↓`	Déplacer la forme choisie d’un pixel (Maj : 10 px)
`Ctrl` + `↑`	Avancer d’un plan (Ctrl + ↓ : reculer)
`Ctrl` + `Maj` + `↑`	Tout devant (Ctrl + Maj + ↓ : tout derrière)
`Maj` + `F10`	Menu de la forme choisie (comme le clic droit)
Vue
`Molette`	Zoomer autour du pointeur
`Maj` + `Molette`	Faire défiler horizontalement
`Espace` + `Glisser`	Déplacer la vue (ou bouton du milieu de la souris)
`+`	Zoomer (- : dézoomer)
`0`	Ajuster la toile à la fenêtre
`1`	Taille réelle (100 %)
Général
`Ctrl` + `Entrée`	Insérer dans le code et exécuter
`F1`	Afficher l’aide (ou ?)
`Échap`	Annuler le tracé en cours, désélectionner, puis fermer

Questions fréquentes

Ce qu’on demande le plus souvent sur CoddyDraw

Pourquoi une forme ne se laisse pas choisir ?

Elle est dessinée par du code conservé (une boucle, une variable, une fonction) : elle est affichée mais verrouillée. Modifie-la dans le code.

Pourquoi un réglage est grisé ?

Il n’a pas d’effet sur l’outil ou la forme en cours : par exemple l’arrondi des coins pour un cercle, ou la taille du texte pour une ligne.

Une forme est cachée derrière une autre

Fais un clic droit sur celle de devant et choisis Reculer ou Tout derrière (Ctrl + ↓).

Peut-on animer le dessin ?

CoddyDraw dessine une image fixe. Pour animer, insère le code puis place-le dans une boucle ou un processus, en remplaçant les nombres par des variables.

Note de fin

CoddyDraw rend les coordonnées concrètes : déplacer une forme fait changer les nombres dans le code. Une fois le dessin inséré, change une valeur, ajoute une boucle, remplace un nombre par une variable : c’est ainsi que le dessin devient un vrai programme. Voir aussi CoddyBlock et le langage CoddyRun.