CoddyRunParcours L'atelier de dessin Étape 1
L'interface de l'atelier
Dessiner la barre d'outils : une palette de sept couleurs et une rangée de boutons, au-dessus d'une grande feuille blanche.
Notions :procédure boutonboucle sur une palettebooléen en paramètre
Un logiciel de dessin, c'est d'abord une interface : une barre en haut avec les outils, et une feuille en dessous. La toile mesure 400 × 360 pixels ; la barre occupe les 90 premiers.
La palette
Les couleurs sont rangées dans un tableau. Une boucle dessine un carré arrondi pour chacune, tous les 40 pixels :
pour i de 0 à 6
rectangle_arrondi(atelier, 10 + i * 40, 10, 30, 30, 6, couleurs[i])
fin pourDes boutons
Tous les boutons se ressemblent : un rectangle arrondi et un texte centré. La procédure bouton(bx, by, texteBouton, actif) les dessine. Le paramètre actif est un booléen : un bouton actif est rose avec un texte blanc, les autres sont gris.
sialors(actif, #F91880, #DFE6E9)
Pour l'instant, « Rond » est actif et les autres boutons ne font rien : ils prendront vie aux étapes suivantes.
Ouvrez CoddyRun et partez d'un programme vide : tout commence ici.
Il te faut le logiciel pour faire cette étape. Il est gratuit : crée ton compte pour le télécharger, puis reviens ici, ta place t'attend.
Créer mon compte et téléchargerIndice 1
Déclarez atelier est une toile et couleurs est un tableau.
Indice 2
Les boutons de la seconde rangée sont en y = 50, tous les 64 pixels : x = 10, 74, 138, 202, 266, 330.
Indice 3
Le texte d'un bouton se centre avec bx + 30 - label_largeur(texteBouton, 13) / 2.
Voir la solution complète
Essayez d'abord par vous-même : c'est en cherchant qu'on apprend. La solution sert à vérifier ou à se débloquer.
@ Les déclarations
atelier est une toile
couleurs est un tableau
@ L'interface
procédure bouton(bx, by, texteBouton, actif)
rectangle_arrondi(atelier, bx, by, 60, 30, 8, sialors(actif, #F91880, #DFE6E9))
label(atelier, bx + 30 - label_largeur(texteBouton, 13) / 2, by + 20, texteBouton, sialors(actif, #FFFFFF, #2D3436), 13)
fin procédure
procédure dessinerBarre()
rectangle(atelier, 0, 0, 400, 90, #2D3436)
pour i de 0 à 6
rectangle_arrondi(atelier, 10 + i * 40, 10, 30, 30, 6, couleurs[i])
fin pour
appelle bouton(10, 50, "Rond", vrai)
appelle bouton(74, 50, "Carré", faux)
appelle bouton(138, 50, "Gomme", faux)
appelle bouton(202, 50, "+", faux)
appelle bouton(266, 50, "−", faux)
appelle bouton(330, 50, "Annuler", faux)
fin procédure
@ Programme principal
couleurs vaut ["#2D3436", "#F4212E", "#FF7A00", "#FFD43B", "#00BA7C", "#1D9BF0", "#7A4E9C"]
dimension(atelier, 400, 360)
remplir(atelier, #FFFFFF)
appelle dessinerBarre()
affiche atelier