title: Crayons de couleurs level: Scratch 1 language: fr-FR stylesheet: scratch embeds: ".png" base: translators: Eve OK reviewers: status: translating ... materials: ["Club Leader Resources/.","Project Resources/.*"] ...

Introduction { .intro }

Dans ce projet, tu vas faire ton propre logiciel de peinture !

Etape 1: Faire un stylo { .activity }

Commençons par faire un stylo, qui sera utilisé pour dessiner sur la scène.

Liste d'activités { .check }

Commence un nouveau projet dans Scratch, et efface le personnage de chat de façon que ton projet soit vide. Tu peux trouver l'éditeur de Scratch en ligne à l'adresse jumpto.cc/scratch-new.
Pour ce projet, tu dois avoir un répertoire appelé 'Project Resources', contenant les images dont tu as besoin. Vérifie que tu trouves bien ce répertoire, et demande à ton enseignant si tu n'arrives pas à le trouver.
Maintenant, ajoute la surface ('drawing canvas') (l'arrière -plan) où dessiner dans ta scène. Clique sur la scène, et ensuite clique sur 'importer l'arrière-plan depuis un fichier".
Trouve le répertoire 'Project Resources' et choisi le fichier appelé 'frame.png'. Si tu n'as pas ce fichier, tu peux créer ton propre arrière-plan ! Ta scène doit maintenant avoir cette apparence :
Ajoute maintenant un crayon à ton projet. Clique sur "importer le lutin depuis un fichier' et choisis l'image appelée 'blue-pencil.png' dans ton répertoire 'Project Resources'. Si tu n'as pas cette image, tu peux dessiner la tienne. Clique sur l'icone i {.blockmotion} et donne lui le nom de 'Crayon'.
Si tu veux utiliser la souris pour dessiner, tu voudras que le crayon suive la souris. Ajoute ce code à ton crayon :
```
  when flag clicked
  forever
    go to [mouse pointer v]
  end
```
Teste ce code en cliquant sur le drapeau et en bougeant la souris sur la scène. ça marche comme prévu ?
As-tu remarqué que c'est le centre du crayon et non la pointe, qui suit le pointeur de la souris ?

Pour corriger cela, clique sur le costume 'blue-pencil' de ton crayon et clique sur 'Définir le centre du costume' en haut à droite.
Tu remarques qu'un axe apparaît sur le costume. Tu peux alors faire glisser cet axe jusqu'au bout de ton crayon, pour définir ce point comme le centre du costume.
Clique sur l'onglet 'Scripts' et essaye à nouveau ton crayon - ça marche mieux qu'avant ?

Ensuite, il faut faire en sorte que le crayon dessine quand la souris est pressée. Ajoute ce code à ton crayon :

  when flag clicked
  forever
    go to [mouse pointer v]
    if <mouse down?> then
      pen down
    else
      pen up
    end
  end

Tu as utilisé une boucle `répéter indéfiniment` {.blockcontrol} (forever) pour faire que le crayon suive la souris, et tu as utilisé une condition `si` {.blockcontrol} (if) pour dessiner quand tu appuies sur ta souris. - Teste de nouveau ton code. Déplace le crayon autour de la scène et appuie sur la souris. Peux-tu dessiner avec ton crayon ? ![screenshot](paint-draw.png)

Il y a encore un problème avec le crayon - tu peux dessiner partout sur la scène, y compris l'espace en dessous de la surface de dessin !

Pour régler ça, tu dois dire au crayon de dessiner seulement quand la souris est pressée et si la y-position de la souris est plus grand que -110 (mouse y{.blocksensing}> -110 {.blockoperators}). Change la condition de ton crayon if {.blockcontrol} de cette façon :
```
  when flag clicked
  forever
    go to [mouse pointer v]
    if < <mouse down?> and < (mouse y) > (-110) > > then
      pen down
    else
      pen up
    end
  end
```
Teste ton projet ; tu ne dois pas pouvoir dessiner hors de la surface de dessin.

Sauvegarde ton projet { .save }

Etape 2 : Les couleurs { .activity }

Ajoute différentes couleurs de crayon à ton projet et permet à l'utilisateur de choisir entre elles !

Liste d'activités { .check }

D'abord, ajoute un autre costume vert à ton crayon. Clique sur ton crayon et clique sur 'importer le costume d'un fichier' et choisi l'image du crayon vert appelée 'green-pencil.png'. N'oublie pas de définir le centre de ton nouveau costume.
Tu dois maintenant ajouter deux lutins (ici des boutons), qui seront utilisés pour choisir la couleur du crayon. Clique sur 'Importer le lutin depuis un fichier' et ajoute les images des boutons bleu et vert appelées 'blue-selector.png' et 'green-selector.png'.

Ta scène doit maintenant ressembler à ça :
Quand tu cliques sur le bouton vert (green selector icon), tu dois envoyer {.blockevents} un message à ton crayon (lutin) pour lui dire de changer de costume et de couleur de crayon. Pour faire ça, ajoute ce code à ton bouton vert :
```
  when this sprite clicked
  broadcast [green v]
```

Pour créer l'élément envoyer {.blockevents}, clique sur << message1 >> et sélectionne dans le menu déroulant 'nouveau message'.

screenshot

Tu peux écrire 'vert' comme nouveau message.

screenshot

Maintenant, tu dois dire à ton crayon (lutin) ce qu'il doit faire en recevant ce message. Ajoute ce code à ton crayon (lutin) :
```
  when I receive [green v]
  switch costume to [green-pencil v]
  set pen color to [#00FF00]
```

Pour choisir la couleur verte, clique sur la case colorée dans le bloc de sélection choisir la couleur pour le stylo {.blockpen} puis clique sur l'image du bouton du vert afin de sélectionner le vert comme couleur de ton crayon.

Tu peux maintenant faire la même chose pour le crayon bleu, ajoute ce code à ton bouton de sélection bleu :
```
  when this sprite clicked
  broadcast [blue v]
```

...et ajoute ce code à ton crayon :

        when I receive [blue v]
        switch costume to [blue-pencil v]
        set pen color to [#0000FF]

Enfin, tu dois dire à ton crayon quel costume et quelle couleur choisir, ainsi que l'effacement de l'écran, quand ton projet est commencé. Ajoute ce code au début du script quand drapeau pressé {.blockevents} (avant la boucle répéter indéfiniment {.blockcontrol} ) :
```
    clear
    switch costume to [blue-pencil v]
    set pen color to [#0000FF]
```

Si tu préfères, tu peux commencer avec une autre couleur de crayon !

Teste ton projet. Peux-tu passer du crayon bleu au crayon vert ?

Sauvegarde ton projet { .save }

Etape 3 : Corriger les erreurs { .activity }

Parfois, nous faisons des erreurs, il faut donc ajouter à ton projet un bouton 'effacer' et la possibilité de gommer des dessins !

Liste d'activités { .check }

Pour effacer l'écran quand ton projet commence, ajoute un bouton pour effacer. Pour faire cela, ajoute un nouveau bouton (lutin) en prenant l'image 'cancel-button.png' dans ton répertoire 'Resources'.
Ajoute ce code afin d'effacer l'écran quand tu cliques sur ce nouveau bouton.
```
    when this sprite clicked
    clear
```

Tu n'as pas besoin d'envoyer un message pour effacer l'écran, et cela peut se produire avec n'importe quel crayon !

Tu peux aussi créer une gomme. Pour ça, ajoute l'image de la gomme 'eraser.png' comme nouveau costume à ton crayon (lutin) (n'oublie pas de centrer le costume) et aussi comme nouveau lutin.
Tu peux ajouter ce code au bouton (lutin) de sélection de la gomme, pour indiquer au crayon de devenir une gomme.
```
    when this sprite clicked
    broadcast [eraser v]
```
Quand le crayon reçoit ce message, tu peux créer une gomme en changeant le costume du crayon en celui d'une gomme, et en changeant la couleur du crayon en une couleur identique à celle de l'écran !
```
    when I receive [eraser v]
    switch costume to [eraser v]
    set pen color to [#8d8d8d]
```
Teste ton projet pour voir si tu arrives à effacer ce que tu as dessiné. Attention, le trait gris est fin, tu dois faire attention pour le voir.

Etape 4 : Changer l'épaisseur du trait { .activity }

Maintenant tu vas permettre à l'utilisateur de dessiner avec des crayons ayant différentes largeurs de trait.

Liste d'activités { .check }

D'abord, ajoute une nouvelle variable appelée 'width' (largeur). Si tu n'es pas trop sûr de savoir comment faire, le projet Ballons pourra t'aider.
Ajoute cette ligne de code dans la boucle répéter indéfiniment {.blockcontrol} du code de ton crayon et de ta gomme :
```
    set pen size to (width)
```

La largeur de trait de ton crayon va maintenant dépendre de la valeur de ta variable 'width'.

Tu peux changer le chiffre de la variable en faisant un clic droit dessus (dans la surface de dessin) puis en sélectionnant 'potentiomètre'.

Tu peux maintenant déplacer le curseur de façon à changer la valeur de la variable.
Teste ton projet et vérifie que tu peux changer la largeur du trait de ton crayon.

Si tu veux, tu peux définir les valeurs minimale et maximales de ta variable 'width'. Pour faire cela, fais à nouveau un clic droit sur ta variable et sélectionne 'définir le min et le max du curseur'. Défini le minimum et le maximum de ta variable, par exemple de 1 à 20.

Continue de tester ta variable 'width' jusqu'à ce que tu sois content du réglage.

Sauvegarde ton projet { .save }

Défi : Raccourcis clavier {.challenge}

Peux-tu créer un raccourci clavier pour tes commandes? Par exemple :

b = sélection du crayon bleu
g = sélection du crayon vert
e = sélection de la gomme
c = effacement de l'espace de dessin

Tu peux même permettre à l'utilisateur de modifier la largeur du trait en utilisant les flèches !

Sauvegarde ton projet { .save }

Défi : plus de crayons {.challenge}

Peux tu ajouter des crayons rouge, jaune et noir à ton logiciel de dessin? Tu trouveras toutes les images dont tu as besoin dans le répertoire 'Resources'. N'oublie pas d'ajouter les raccourcis claviers pour ces nouveaux crayons !

Peux tu utiliser tes crayons pour dessiner un dessin ?

screenshot