Cours:TDs 1103 : Différence entre versions
(→{{Bleu|Td 5}} Utilisation du clavier) |
(→{{Bleu|Td 7}} Transmission de données avec une carte arduino) |
||
Ligne 154 : | Ligne 154 : | ||
==[[Cours:ProcessingArduino|{{Bleu|Td 7}} Transmission de données avec une carte arduino]]== | ==[[Cours:ProcessingArduino|{{Bleu|Td 7}} Transmission de données avec une carte arduino]]== | ||
+ | |||
+ | ==[[Cours:ProcessingEval1|{{Bleu|Td 8}} Evaluation Processing]]== |
Version du 13 mai 2014 à 19:51
Sommaire
Td 2
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 :
colorMode(RGB, nbValeurs);
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 stroke
stroke(Rouge,Vert,Bleu);
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);
}
}
On prendra par la suite un écran de taille 400x200.
En vous inspirant du code précédent, tracez des lignes verticales dans un dégradé de bleu
Puis, tracez des lignes verticales dans un dégradé de vert
Faire ensuite un dégradé de rouge à partir de l'angle supérieur gauche dans les 2 directions
Exercice 2 : setup/draw
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++;
}
Explications :
- La fonction setup() est exécutée une seule fois au démarrage
- La fonction draw est ensuite exécutée en boucle :
Dès qu'elle est terminée, l'écran est mis à jour et on recommence la fonction draw().
Faire un programme qui remplit complètement l'écran en dégradés successifs de Bleu
Vous pouvez utiliser la fonction background.
Remplir ensuite l'écran avec un dégradé de Vert, et à chaque itération modifiez la quantité de Bleu
Exercice 3 : Déplacement
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 (ellipse()) à ces coordonnées de couleur violette (regarder la fonction fill())
- Déplacer la balle verticalement
Td 3
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 π.
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.
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
Il sera utile de se documenter sur les tableaux dans Processing
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] ;
- si (y[i] < ymin)
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.
Choisissez une taille d'écran et faire la mise à l'échelle
Tracé de la courbe
Utiliser les fonctions de tracé de processing ( [point()] ou [line()] pour représenter la courbe.