Introduction à Processing

Principe de Processing

• Une fonction setup()
  • Executée une seule fois au début du programme
• Une fonction draw()
  • Executée plusieurs fois très rapidement, en boucle
  • Jusqu'a la fin du programme




void setup()
{
 	// Code executé 
 	// UNE SEULE fois
}
void draw()
{
 	// Code executé 
 	// PLUSIEURS FOIS
 	// en boucle
}
						

Définir la taille de la fenetre

• La fonction size
  Deux valeurs largeur et hauteur

void setup()
{
 	size(50,100);
}

						

Définir la taille de la fenetre

• La fonction size
  Deux valeurs largeur et hauteur

void setup()
{
 	size(300,300);
}

						

Changer la couleur de fond

• La fonction background
  Une valeur entre blanc(255) et noir (0)

void setup()
{
 	size(300,300);
 	background(128);
}

						

Changer la couleur de fond

• La fonction background
  • Trois valeurs Rouge, Vert et Bleu

void setup()
{
 	size(300,300);
 	background(10,195,205);
}
		

Dessiner des formes
Le rectangle

• La fonction rect
  • Quatre valeurs :
    • La position
    • Les longueurs

void setup() 
{
  size(300, 300);
  background(128);
  rect(10,80,30,50);
}
		

Dessiner des formes
Le rectangle

• La fonction rect
  • Quatre valeurs :
    • La position
    • Les longueurs

void setup() 
{
  size(300, 300);
  background(128);
  rect(10,80,90,90);
}
		

Dessiner des formes
L'ellipse

• La commande ellipse
  • Quatre valeurs :
    • La position
    • Les longueurs

void setup() 
{
  size(300, 300);
  background(128);
  ellipse(150,100,60,120);
}
		

Changer la couleur de remplissage

• La fonction fill
  • Trois valeurs Rouge, Vert et Bleu
  • Change la couleur tout ce qui est dessiné après

void setup() 
{
  size(300, 300);
  background(128);
  fill(255,0,0);
  ellipse(150,100,60,120);
}
		

Beaucoup d'autres commandes

• Processing définit des variables
  • height et width (entiers) : la taille de la fenêtre
  • mouseX et mouseY (entiers) : la position de la souris
  • mousePressed (boolean) : vrai si un bouton de la souris est pressé, faux sinon
• Et beaucoup d'autres commandes
• La reference de Processing est ici

Dessiner dynamiquement
Premier exemple

• Dessiner une ellipse sous la souris

void setup() 
{
  size(300, 300);
  background(128);
  fill(255,0,0);
}
void draw() 
{
  ellipse(mouseX,mouseY,30,30);
}
		

Dessiner dynamiquement
Premier exemple - 2

• Effacer le fond
  • Remplir le fond avec la couleur de fond
• Dessiner une ellipse sous la souris

void setup() 
{
  size(300, 300);
  background(128);
  fill(255,0,0);
}
void draw() 
{
  background(128);
  ellipse(mouseX,mouseY,30,30);
}
		

Quelques exercices

1. Tracer un rectangle de taille 30 par 30 à une position demandée a l'utilisateur
2. Tracer une ellipse à une position aléatoire choisie dans la fenètre
3. Tracer un rectangle aux longueurs et à la position aléatoire

1. Reprenez un des exemples précedents et affichez une ellipse uniquement si un bouton de la souris est pressé
2. Dessiner un cercle de rayon 20 au centre de la fenetre. Ce cercle devra grossir (la variable contenant son rayon devra augmenter), jusqu'a atteindre le bord de la fenetre
3. Modifier l'exercice précedent pour faire diminuer le rayon du cercle une fois qu'il a atteint les bords de la fenetre

Quelques exercices

1. Dessiner cette fois un cercle de rayon 20, se deplacant sur l'axe des x. Ce cercle ne devra pas dépasser les bords de la fenêtre. Il devra rebondir losqu'il a atteind le bord de la fenetre et repartir dans l'autre sens
2. Modifier le code précédent pour faire augmenter la taille du cercle à chaque fois qu'il rebondit
3. Bonus : Vous pouvez également, avec un peu de trigonometrie, calculer des rebonds quelconques pour afficher un cercle partant avec une direction aléatoire et rebondissant à l'intérieur de la fenêtre.