CoddyRun

Parcours Le dessin animé Étape 1

Étape 1 sur 7

Le décor : ciel, sol et maison

Dessiner un ciel bleu, une bande d'herbe et une maison avec un toit, une porte et deux fenêtres.

Notions :toiledimensionremplirrectangletriangle

Le résultat final du parcours : Le dessin animé
Le résultat final du projet
Ce qu'il faut savoir

Le dessin se fait sur une toile, qu'on déclare comme une variable puis qu'on dimensionne en pixels :

scene est une toile
dimension(scene, 400, 300)

Le repère

Le point (0, 0) est le coin en haut à gauche. x augmente vers la droite, y augmente vers le bas. La bande d'herbe commence donc à y = 220 et descend jusqu'en bas (300).

Les formes

  • remplir(scene, couleur) peint tout le fond.
  • rectangle(scene, x, y, largeur, hauteur, couleur) : (x, y) est le coin en haut à gauche.
  • triangle(scene, x1, y1, x2, y2, x3, y3, couleur) relie trois sommets : parfait pour un toit.

Les couleurs s'écrivent en hexadécimal sans guillemets : #87CEEB est un bleu ciel, #4CAF50 un vert.

L'ordre compte

Chaque forme est peinte par-dessus les précédentes, comme un peintre sur sa toile : d'abord le fond, ensuite les murs, enfin la porte et les fenêtres.

Pour finir, affiche scene montre le dessin dans la console.

Code de départ

Ouvrez CoddyRun et partez d'un programme vide : tout commence ici.

Besoin d'aide ?
Indice 1

Le mur de la maison : rectangle(scene, 230, 150, 110, 80, #F4E1C1).

Indice 2

Le toit dépasse un peu du mur : ses sommets sont (220, 150), (285, 100) et (350, 150).

Indice 3

Une fenêtre a disparu ? Elle a sans doute été dessinée avant le mur, qui l'a recouverte.

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
scene est une toile

@ Le décor
dimension(scene, 400, 300)
remplir(scene, #87CEEB)
rectangle(scene, 0, 220, 400, 80, #4CAF50)

@ La maison
rectangle(scene, 230, 150, 110, 80, #F4E1C1)
triangle(scene, 220, 150, 285, 100, 350, 150, #C0392B)
rectangle(scene, 272, 185, 26, 45, #8B5A2B)
rectangle(scene, 245, 165, 20, 20, #AED6F1)
rectangle(scene, 305, 165, 20, 20, #AED6F1)

affiche scene