====== Je teste l'app et je la termine ======
Mon application doit me permettre de **colorier un rectangle** en **choisissant** les valeurs de rouge, de vert et de bleu.

Pour cela, je dois **utiliser un canevas**, en anglais **canvas**, pour pouvoir dessiner.

  * l'interface de mon application doit me permettre de **choisir** la valeur des couleurs rouge, vert et bleu. Voici l'interface de mon app que je dois réaliser :
{{ :icn:codeorg:couleur01.png |}}

  * J'utilise les **noms de composants** suivant :

^Nom des couleurs^Nom du slider^Nom des labels affichant les valeurs^ 
|labeRouge|sliderRouge|labelRougeValeur|
|labeVert|sliderVert|labelVertValeur|
|labeBleu|sliderBleu|labelBleuValeur|

<WRAP center round info >
Par défaut, le composant slider génère un nombre compris entre 0 et 100. Il est alors nécessaire de **modifier** les **propriétés** des composants slider pour **définir 255 comme valeur maximale**.
</WRAP>

====== Tester l'app ======

Voici le lien vers l'**app partiellement réalisée** et qui est **à finir** :
  * [[https://studio.code.org/projects/applab/SDbk5g6SV9_M7am_9WpKzg|App à tester puis à finir]]

====== Commentaires du code de l'app ======
  * J'active le canevas,
  * et je dessine un grand rectangle de couleur noire : rgb(0,0,0)
{{ :icn:codeorg:couleur03.png |}}
  * dès que le **slider** gérant l'**intensité du rouge** est modifié, je redessine mon rectangle avec la nouvelle couleur. La **valeur numérique** du slider est **mémorisée** dans une **variable** qui est ici appelé **rouge** :  
{{ :icn:codeorg:couleur04.png |}}

<WRAP center round important>
Attention, le composant **slider** génère un **chiffre de 0 à 100**. Il est important de **modifier les propriétés** des composants slider pour que la **valeur maximale** soit **255**. 
</WRAP>

===== Quelques explications ... =====

La fonction **setFillColor()** permet de définir  la couleur de remplissage des dessins. En paramètre, on définit une couleur au **format rgb** de la manière suivante : **setFillColor("rgb(0,0,0)")**.

<WRAP center round tip>
Pour définir le paramètre couleur de la fonction setFilColor() en **fonction de l'intensité du rouge**, je **concatène** des caractères et le **contenu** de la variable **rouge** :
  * "rgb(" + rouge + ",0,0"
{{ :icn:codeorg:dessine07.png |}}
  * ce qui donne setFilColor("rgb(" + rouge + ",0,0");
{{ :icn:codeorg:dessine08.png |}}
</WRAP>

====== Je termine l'app======
  * Je clique sur le bouton **Make my own** pour enregistrer l'application,
  * je **modifie** l'application pour pouvoir définir l'**intensité des autres couleurs verte et bleue**.

==== Retour à l'activité : la codification des couleurs dans les images====
  * [[:icn:codeorg:imagecouleur|Activité Code.org : la codification des couleurs dans les images]]