Cours:TDs 1103

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);

Exécuter le code suivant

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++;
}

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

Guide à suivre et à compléter

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

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.