|
|
| (58 révisions intermédiaires par 2 utilisateurs non affichées) |
| Ligne 1 : |
Ligne 1 : |
| − | =={{Bleu|Td 2}}==
| + | __NOTOC__ __NOEDITSECTION__ |
| | | | |
| − | ==={{Vert|Exercice 1 : Couleurs}}=== | + | =ide= |
| | | | |
| − | Nous allons découvrir la gestion des couleurs dans processing. | + | Nous écrirons des programmes en c++ et utiliserons un ide en ligne, par exemple : |
| | + | *[https://www.onlinegdb.com/online_c++_compiler OnlineGDB] |
| | + | *[https://replit.com/languages/cpp replit] |
| | | | |
| − | 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 :
| + | =Enoncés de td= |
| − | <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]
| + | *[[Cours:Cin/Cout|TD 1 : Entrée-sortie en C++]] |
| − | <source lang=c>
| + | *[[Cours:Caisse|TD 2 : Caisse enregistreuse]] |
| − | stroke(Rouge,Vert,Bleu);
| + | *[[Cours:tabChar|TD 3 : Chaînes de caractères]] |
| − | </source>
| + | *[[Cours:TdComplexe|TD 4 : Utilisation d'une structure]] |
| | + | *[[Cours:TdFonctionsTableaux|TD 5 : Travail sur les fonctions et tableaux]] |
| | | | |
| − | {{Todo|Exécuter le code suivant}}
| + | =liens= |
| − | <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.
| + | *[[Media:InfoS1ReferencesPointeurs.pdf]] |
| | | | |
| − | {{Question|En vous inspirant du code précédent, tracez des lignes verticales dans un dégradé de bleu}}
| + | =Archives= |
| − | | + | [[Cours:historiqueInfoS1]] |
| − | {{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}}==
| |
| − | [http://profgra.org/lycee/activite_prise_en_main_Processing.html Guide à suivre et à compléter]
| |
| − | | |
| − | =={{Bleu|Td 4}} Tracé de fonction==
| |
| − | | |
| − | | |
| − | On cherche à tracer les variations d’une fonction f telle que:f: [xmin,xmax] → y=f(x).
| |
| − | | |
| − | Par exemple, on veut tracer y = sin(x)pour x compris entre 0 et π.
| |
| − | | |
| − | ==={{Vert|Préparation du tracé}}===
| |
| − | Pour pouvoir tracer une courbe sur un écran, quatre étapes sont nécessaires:
| |
| − | | |
| − | *l’échantillonnage
| |
| − | *la recherche des extrema en y: ymin et ymax
| |
| − | *la mise à l’échelle de la courbe
| |
| − | *le tracé sur l’écran.
| |
| − | | |
| − | ==={{Vert|Echantillonnage}}===
| |
| − | | |
| − | On cherche à prendre un certain nombre de points régulièrement espacés entre xmin et xmax.
| |
| − | La formule suivante: x[i]=xmin+i*(xmax-xmin)/N permet un échantillonnage sur N+1 points.
| |
| − | | |
| − | L’algorithme du calcul est alors le suivant:
| |
| − | * Pour i variant de 0 à N
| |
| − | **x[i]=xmin+i*(xmax-xmin)/N ;
| |
| − | **y[i]=sin(x[i]) ; // si on veut tracer sinus, sinon changer ici
| |
| − | | |
| − | [http://fr.openclassrooms.com/informatique/cours/processing-1/tableaux-4 Il sera utile de se documenter sur les tableaux dans Processing]
| |
| − | | |
| − | | |
| − | ==={{Vert|Recherche des extrema}}=== | |
| − | La recherche des extrema permettra de faire une mise à l'échelle lors du tracé.
| |
| − | | |
| − | On pourra s’inspirer de l’algorithme suivant:
| |
| − | *ymin=y[0];
| |
| − | *ymax=y[0];
| |
| − | *pour i variant de 1 à N
| |
| − | **si (y[i] < ymin)
| |
| − | ***ymin=y[i];
| |
| − | **si (y[i] > ymax)
| |
| − | ***ymax=y[i] ;
| |
| − | | |
| − | ==={{Vert|Mise à l’échelle de la courbe}}===
| |
| − | | |
| − | Pour tracer une courbe sur un écran d’ordinateur, il faut utiliser cet écran en mode graphique, c’est-à-dire sous forme de points (pixels)adressables individuellement.
| |
| − | | |
| − | En mode VGA standard, le coin en haut à gauche a pour coordonnées (0,0) et le coin diamétralement opposé (en bas à droite) (639,479). On dispose donc de 640 points en horizontal et 480 points en vertical.
| |
| − | | |
| − | Or, le tracé de la courbe consiste à placer les points de coordonnées(x,y=f(x)), sur l’intervalle [xmin, xmax], où la fonction f possède des extrema ymin et ymax.
| |
| − | Il nous faut donc déterminer une transformation qui permet le tracé sur cet écran.
| |
| − | | |
| − | Montrer que la transformation est la suivante:
| |
| − | *xp = 639*(x-xmin)/(xmax-xmin)
| |
| − | *yp = 479 *(y-ymin)/(ymax-ymin)
| |
| − | | |
| − | Ce sont ces coordonnées (xp,yp) qui vont nous permettre de tracer la courbe sur l’écran.
| |
| − | | |
| − | {{Question|Choisissez une taille d'écran et faire la mise à l'échelle}}
| |
| − | | |
| − | ==={{Vert|Tracé de la courbe}}===
| |
| − | | |
| − | Utiliser les fonctions de tracé de processing ( [[https://processing.org/reference/point_.html point()]] ou [[https://processing.org/reference/line_.html line()]] pour représenter la courbe.
| |
| − | | |
| − | | |
| − | ==[[Cours:ProcessingSouris|{{Bleu|Td 5}} Utilisation de la souris]]==
| |
| − | | |
| − | ==[[Cours:ProcessingClavier|{{Bleu|Td 6}} Utilisation du clavier]]==
| |
| − | | |
| − | ==[[Cours:ProcessingArduino|{{Bleu|Td 7}} Transmission de données avec une carte arduino]]==
| |
| − | | |
| − | ==[[Cours:ProcessingEval1|{{Bleu|Td 8}} Evaluation Processing]]==
| |
