|
|
| 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] |
