Démarrage

Ouvrir le logiciel Processing (sur le bureau Windows > répertoire ‘raccourci ISN’)

On pourra partager l’écran en 2 fenêtres (le navigateur et Processing) avec les touches : windows+flèche droite (ou gauche)

Copier/coller le code ci-dessous puis exécuter.

size(200,150);   // taille de fenêtre : 200 x 150 px
background(255,150,0); // fond orange (R=255 , V = 150, B = 0)

Modifier les nombres de ce programme pour expérimenter. Davantage d’explications sont données dans la partie, ici : Fenêtre graphique

Labyrinthes : Coordonnées et Boucles

Coordonnées

Voici des labyrinthes plus ou moins difficiles. Vous copiez/téléchargez une de ces images ci-dessous et vous l’insérez dans votre sketch Processing.
Lire le paragraphe : Insérer une image .

Pour trouver le nom de fichier complet de l’image (avec son extension .jpg ou .png ou .gif) il faut les propriétés du fichier :
clic droit > propriété > détails

      

La 1ère étape consiste à tracer le chemin allant du départ vers l’arrivée. Vous manipulerez les coordonnées graphiques et la fonction line().
Voir quelques exemples : traits : ligne, point

Boucle

La 2ème étape consiste à retracer ce chemin mais avec des motifs (des points, des carrées …) et par conséquent vous manipulerez des boucles.

Par exemple : pour remplacer la ligne line(50,100,80,100); on peut faire une série de 4 points :

point(50,100);
point(60,100);
point(70,100);
point(80,100);

automatisé par la boucle suivante :

for (int i = 50 ; i <= 80 ; i=i+10) {
  point(i,100);
}

Lire aussi l’exemple avec les « Hello » : Boucle itérative for ( .. ; .. ; .. )  { .. }

Les labyrinthes

Si besoin, on peut redimensionner l’image avec le logiciel Photofiltre 6.
Pr_TP3
Pr_TP4
Pr_TP5
Pr_TP2
Pr_TP1

Dessin : double boucle & random() & modulo %

une 1ère boucle

Mettre un fond vert avec background(.. , .. , .. );  et pour choisir cette couleur, il y a un sélecteur de couleur (menu outil > sélecteur de couleurs). Ainsi, on récupère les composantes R, G, B (entre 0 et 255) ou le nombre Hexadécimal (qui commence par #).

Faire une boucle de lignes verticales. Pour cela, on effectue progressivement :

  • d’abord, juste une ligne verticale.
  • puis une 2e ligne, puis une 3e.
  • puis on peut généraliser l’ensemble par une boucle.

plusieurs boucles successives

Puis ajouter une autre boucle de lignes horizontales cette fois (avec le même procédé).

Pour les gros traits blancs :

  1. D’abord, on change l’épaisseur du pinceau  strokeWeight(20); et sa couleur (blanc) stroke(255);
  2. Puis on trace les 3 traits.

Difficulté supplémentaire : Le tracé des « petits filets » sur les côtés (avec des lignes légèrement obliques).

double boucle

une 1ère boucle : Progressivement :

  • on trace juste une ligne (une diagonale de l’écran) : line(0,0,width,height);  ou bien avec une petite marge : line(20,20,width-20,height-20);
  • puis une 2e ligne, une 3e ligne.
  • puis on généralise avec une boucle

TP2_ligne1

Puis une double boucle, mais progressivement :

  • on garde la 1ère boucle.
  • puis on ajoute une 2e boucle avec des lignes plus basses (d’abord juste une ligne, puis 2, puis la boucle).
  • puis une 3e boucle encore plus bas.
  • Enfin, on généralise ces 3 boucles avec une double boucle (c’est-à-dire une boucle de boucle). Par conséquent, on utilise 2 variables, ex : i et j.

On pourra rajouter un peu de couleur aléatoire avec  random() :

  • random(255) : donne un nombre aléatoire entre 0 et 254,999999… (un float tel que  0 ≤ random(255) < 255 )
  • random(-10,15) : donne un nombre décimal aléatoire entre -10 (inclus) et 15 (exclu). C’est un float tel que  -10 ≤ random(-10,15) < 15.
  • (int)random(-10,15)   donne un entier aléatoire entre -10 (inclus) et 15 (exclu), donc entre -10 et 14.

Plus d’info sur les fonctions mathématiques dans la partie fonctions
TP2_ligne2

Cos et Sin dans une boucle

Puis une boucle avec les fonctions cos() et sin() et radians() – qui transforme les degrés en radians :

  • cos(PI/2) et sin(PI/5) : donnent les cos et sin d’un angle en radians.
  • radians(45) : convertit des degrés en radians. Donc radians(45) donne PI/4.

TP2_cercle2

Défis

Enfin, on peut utiliser des modulos (reste de la division euclidienne) avec % pour changer l’épaisseur d’un cercle sur 3 :

% (le modulo) : donne le reste d’une division euclidienne. Donc : 11 % 3 = 2 (car si on divise 11 par 3, le reste est 2).

TP2_cercle1 TP2_ligne3     TP2_cercle3

Animation

Structure d’une animation

  • les variables générales : la déclaration des variables entières, image … mais le chargement de l’image doit être faite dans le setup().
  • setup() : les quelques réglages initiaux et l’initialisation des images. La fonction n’est exécutée qu’une fois.
  • draw() : toutes les instructions de l’animation. Cette fonction tourne en boucle.

facultatif : une gestion de clavier keyPressed(), souris mousePressed(), …

Dessiner avec la souris

Créer une première animation : un dessin à la souris où la couleur du tracé varie selon l’ordonnée de la souris (mouseY).

On va donc améliorer le 1er programme d’animation (dessin avec la souris) de la page « animation »

Pr_tp_anim1_dessin_souris

Ajouter une barre de nuance de couleurs.

Tout d’abord il est impossible d’afficher TOUTES les couleurs car elles sont au nombre de 256*256*256 et la hauteur de votre fenêtre ne mesure que 800 pixels maximum.

1ère idée : Faire une triple boucle sur R, sur V, sur B dans lesquels R,V,B avancent de 32 en 32 … et prendre une fenêtre de hauteur 512 pixels !

Pr_TP_nuanceCouleur1

2ème idée : le nuancier de couleur manque d’uniformité, on aurait intérêt à quitter le mode RGB pour le mode HSB grâce à l’instruction colorMode(HSB); dans le setup().

H = Hue = teinte            S = Saturation           B = Brightness = valeur lumière

HSB

Ainsi il suffit de faire varier Hue de 0 à 255 pour retrouver toutes les teintes dans une certaine harmonie (avec une seule boucle … au lieu de 3 boucles imbriquées !).

Pr_TP_nuanceCouleur2

« Paint » : clic sur une couleur + dessin.

L’aboutissement de ce TP consiste à faire un petit « Microsoft Paint »  :

  • On récupère la couleur cliquée sur le nuancier de couleur (si la souris est sur la gauche).
  • On dessine dans la partie droite avec cette couleur choisie (si la souris est dans la partie droite).

NB : Pour récupérer la couleur d’un pixel (x,y) il suffit de faire  get(x,y)  par conséquent pour mettre cette couleur en couleur de tracé on écrit tout simplement :   stroke (get(x,y));

Pr_TP_paint