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 sontnécessaires: l’échantillonnagela recherche des extrema en y: ymin et ymaxla mise à l’échelle de la courbele tracé sur l’écran.Echantillonnage On cherche à prendre un certain nombre de points régulièrement espacésentre xmin et xmax. La formule suivante: x[i]=xmin+i*(xmax-xmin)/N permet un échantillonnagesur 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 }Recherche des extrema 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é (enbas à droite) (639,479). On dispose donc de 640 points en horizontalet 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èdedes extrema ymin et ymax. Il nous faut donc déterminer une transformation qui permet le tracé surcet é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 lacourbe sur l’écran. Tracé de la courbe Pour pouvoir tracer une courbe sur l’écran en langage C, il faututiliser une librairie graphique. Bien évidemment, plusieurs librairiesgraphiques existent (et petit détail, ne sont bien sûr pas compatiblesentre elles). Ce qui suit présente un exemple avec la librairie SDL qui est principalementutilisée pour écrire des jeux.