|
|
Ligne 1 : |
Ligne 1 : |
− | =={{Bleu|Td 2}}== | + | ==[[Cours:ProcessingCouleurs|{{Bleu|Td 2}} Utilisons les couleurs]]== |
− | | |
− | ==={{Vert|Exercice 1 : Couleurs}}===
| |
− | | |
− | Nous allons découvrir la gestion des couleurs dans processing.
| |
− | | |
− | Une couleur est entièrement définie par 3 paramètres. Diverses représentation sont possibles, nous nous intéresserons ici à la représentation RGB.
| |
− | | |
− | On initialisera l'espace de couleur par une ligne :
| |
− | <source lang=c>
| |
− | colorMode(RGB, nbValeurs);
| |
− | </source>
| |
− | Une couleur est donc représentée par un triplet (Rouge,Vert,Bleu), avec nbValeur pour chaque composante.
| |
− | | |
− | Le choix de la couleur s'effectue avec la fonction [https://processing.org/reference/stroke_.html stroke]
| |
− | <source lang=c>
| |
− | stroke(Rouge,Vert,Bleu);
| |
− | </source>
| |
− | | |
− | {{Todo|Exécuter le code suivant}}
| |
− | <source lang=c>
| |
− | noStroke();
| |
− | colorMode(RGB, 100);
| |
− | for (int i = 0; i < 100; i++)
| |
− | {
| |
− | for (int j = 0; j < 100; j++)
| |
− | {
| |
− | stroke(i, j, 0);
| |
− | point(i, j);
| |
− | }
| |
− | }
| |
− | </source>
| |
− | | |
− | On prendra par la suite un écran de taille 400x200.
| |
− | | |
− | {{Question|En vous inspirant du code précédent, tracez des lignes verticales dans un dégradé de bleu}}
| |
− | | |
− | {{Question|Puis, tracez des lignes verticales dans un dégradé de vert}}
| |
− | | |
− | {{Question|Faire ensuite un dégradé de rouge à partir de l'angle supérieur gauche dans les 2 directions}}
| |
− | | |
− | | |
− | ==={{Vert|Exercice 2 : setup/draw}}===
| |
− | | |
− | | |
− | <source lang=c>
| |
− | int i = 0;
| |
− | | |
− | void setup()
| |
− | {
| |
− | noStroke();
| |
− | colorMode(RGB, 100);
| |
− | }
| |
− | | |
− | void draw()
| |
− | {
| |
− | for (int j = 0; j < 100; j++)
| |
− | {
| |
− | stroke(i, j, 0);
| |
− | point(i, j);
| |
− | }
| |
− | if (i==99) i=0; else i++;
| |
− | }
| |
− | </source>
| |
− | | |
− | {{Todo|Exécuter le code précédent}}
| |
− | | |
− | '''Explications''' :
| |
− | *La fonction setup() est exécutée une seule fois au démarrage
| |
− | *La fonction draw est ensuite exécutée en boucle :<br> Dès qu'elle est terminée, l'écran est mis à jour et on recommence la fonction draw().
| |
− | | |
− | {{Question|Faire un programme qui remplit complètement l'écran en dégradés successifs de Bleu}}
| |
− | | |
− | Vous pouvez utiliser la fonction [https://processing.org/reference/background_.html background].
| |
− | | |
− | {{Question|Remplir ensuite l'écran avec un dégradé de Vert, et à chaque itération modifiez la quantité de Bleu}}
| |
− | | |
− | ==={{Vert|Exercice 3 : Déplacement}}===
| |
− | | |
− | {{Question|Faire un programme répondant au cahier des charges suivant :}}
| |
− | * Remplir l'écran en blanc
| |
− | * Définissez 2 variable posX et posY correspondant à la position d'une balle, que l'on initialise au milieu de l'écran
| |
− | * Tracez une balle ([https://processing.org/reference/ellipse_.html ellipse()]) à ces coordonnées de couleur violette (regarder la fonction [https://processing.org/reference/fill_.html fill()])
| |
− | * Déplacer la balle verticalement
| |
− | | |
| =={{Bleu|Td 3}}== | | =={{Bleu|Td 3}}== |
| [http://profgra.org/lycee/activite_prise_en_main_Processing.html Guide à suivre et à compléter] | | [http://profgra.org/lycee/activite_prise_en_main_Processing.html Guide à suivre et à compléter] |