Fenêtre graphique

La fenêtre est munie de 2 axes : x et y.

Notez bien :

  • le sens de l’axe (Oy) : vers le bas !
  • l’origine du repère : (0,0) est en haut à gauche.

Pr_in_fenetreAxes

  • size(80,60);   met la fenêtre aux dimensions (en pixels) : largeur =80  x  hauteur = 60.
    Les pixels sur (Ox) sont alors numérotés de 0 à 79. Idem sur (Oy) : de 0 à 59.
  • background(255,150,0);  met une couleur de fond orange (Rouge = 255 , Vert = 150 , Bleu = 0).
size(200,150);   // taille de fenêtre : 200 x 150 px
background(255,150,0); // fond orange (R=255 , V = 150, B = 0)

Pr_in_fenetreBackground

Couleur

le codage RGB

Toute couleur est identifiée selon les 3 composantes de la lumière : RGB : Red (rouge), Green (vert), Blue (bleu) … ou RVB en français.

Chaque composante RGB  peut varier de 0 à 255.

couleur R G B
rouge 255 0 0
vert 0 255 0
bleu 0 0 255
blanc 255 255 255
gris clair 200 200 200
noir 0 0 0

NB : Pour choisir une couleur dans Processing : barre de menu :   Tools  >  Color Selector.

Pr_in_ColorSelector

NB : Il existe d’autres façons que le RGB pour définir une couleur : l’hexadécimal , en niveaux de gris ou bien en HSB (hue saturation brightness) .

couleur : de fond, de remplissage, de contour

Dans Processing, on peut colorier beaucoup de choses :

  • background(255,150,0);  pour le fond de la fenêtre (en orange)
  • fill(255,255,0);  pour remplir une forme (un rectangle, une ellipse .. )  en jaune.
  • stroke(0,255,255);  pour tracer le contour d’une forme (un rectangle, une ellipse .. )  en turquoise.
  • noFill();  : enlève la couleur de remplissage pour n’avoir que le contour.
  • noStroke();  : enlève le tracé du contour.
  • strokeWeight(10);  :  pour tracer les contours en épaisseur 10 px.

Il faut mettre l’instruction de couleur AVANT l’instruction de la forme … et toutes les formes suivantes seront de cette couleur. Pour changer de couleur, il suffit remettre une instruction de couleur puis de tracer la forme.

// La fenêtre de fond noir (0 = noir)
size(300, 200);
background(0);

// Deux formes en vert
fill(0,255,255); // on se met en mode remplissage : vert
rect(150,140,50,50);     // dessine un rectangle x,y,L,H
ellipse(50,50,200,100);  // dessine une ellipse x,y,L,H

// Une forme en bleu : 1 rectangle
fill(0, 0, 255); // on passe en mode remplissage : bleu
stroke(255, 0, 0);  //       et en mode contour : rouge
rect(50, 50, 200, 80);

 

Pr_in_colorFill

 

dessin

formes : rectangle, ellipse

Pr_in_rectEllipsePar défaut, une forme est définie par 4 paramètres : x, y, L, H .

  • rect(10,30,80,40);   : trace un rectangle ayant pour coin supérieur gauche (10,30) et pour dimensions 80 et 40 (L = 80 sur Ox  et  H=40 sur Oy).
  • ellipse(10,100,80,20);  : trace une ellipse ayant pour centre (10,100) et pour diamètres  80 et 20 (80 sur Ox  et  20 sur Oy).
size(200, 150);
rect(10,30,80,40);
ellipse(10,100,80,20);

NB : Il est possible de changer la façon de définir les paramètres avec rectMode() ou ellipseMode() ; de faire des triangles, des coins arrondis, des arcs de cercle … voir la doc officielle sur le site de Processing).

traits : ligne, point

  • line(10,30,80,40);   pour tracer un segment du point (10,30) au point (80,40).
  • point(10,30);   pour tracer un point (10,30).
  • strokeWeight(10);   pour prendre le pinceau d’épaisseur 10px.
  • stroke(255,0,0);   pour prendre le pinceau rouge.
line(20, 20, 80, 20);
point(100,20);

strokeWeight(4);  //on se met en mode : épaisseur 4px
line(20, 40, 80, 40);
point(100,40);

strokeWeight(10);  //on se met en mode : épaisseur 10px
line(20, 70, 80, 70);
point(100,70);

Pr_in_linePoint

Insérer une image, un son, police de caractère

  • Pr_prg_inserePhotomenu : Sketch > Add File (ou Ajouter un Fichier)  pour donner le fichier image/son/font au logiciel.
    Un dossier data se crée et le fichier y est copié.
  • PImage maPhoto;   pour déclarer une variable maPhoto (de type PImage c’est-à-dire Processing Image).
  • maPhoto = loadImage("nousDeux.jpg");   pour charger l’image dans la variable.
  • image(maPhoto,0,0);    pour afficher l’image dans la fenêtre en (0,0).

 

size (250,320); //taille assez grande
PImage maPhoto;  // Déclaration de la variable maPhoto (de type image)
maPhoto = loadImage("nousDeux.jpg"); //chargement 
image(maPhoto,0,0); //affiche l’image au point (0,0)
  • maPhoto.resize(250,300);    pour redimensionner l’image (penser à respecter les proportions de l’image)
  • image(maPhoto,x,y,largeur,hauteur);    pour afficher l’image en (x,y) avec des dimensions (largeur, hauteur).
  • imageMode(CENTER); image(maPhoto,x,y);   pour que (x,y) soit le centre de l’image lors de l’affichage.
    imageMode(CORNER); est le mode normal (avec le coin supérieur gauche).
    imageMode(CORNERS); image(maPhoto,10,10,90,40); pour un affichage du coin (10,10) au coin (90,40).

écrire et calculer

On peut écrire dans la fenêtre graphique ou dans la console (pour un débogage).

dans la fenêtre : text();

Pr_in_text

  • textSize(22);  :  pour se mettre en mode : taille 22.
  • fill(0,50,150);   :  pour mettre une couleur d’écriture bleu foncé.
  • text("Hello !",10,30);   : pour écrire « Hello ! » avec pour coin inférieur gauche (10,30)
  • text("15 x 3.5="+15*3.5,0,110);   :  pour écrire un texte et concaténer avec le résultat du calcul. Il faut comprendre que : le texte entre guillemet « 15 x 3.5= » est juste affiché, puis le signe + signifie concaténer. Puis enfin,  15*3.5 est calculé car il n’est pas entre guillemets.
  • textAlign(CENTER); text("Hello",x,y);  pour centrer le texte sur (x,y).
    textAlign(CENTER,CENTER);  pour centrer en largeur et hauteur.
    Au choix :  LEFT, CENTER, RIGHT   et   TOP, BOTTOM, CENTER, BASELINE.
textSize(22);
fill(0,50,150);
text("Hello !",10,30);
text("15 x 3.5="+15*3.5,0,110);

dans la console : println();

  • println("-- deboguage  --")  :  écrit un texte dans  la partie « console » (en bas du programme). Puis le curseur va sur la ligne suivante [println = « print » et « va à la ligne »  ].
  • print("mon calcul :")  :  écrit le texte dans  la console mais le curseur reste  sur le dernier caractère.

Pour afficher le calcul, on peut concaténer avec le « + » ou bien faire calculer avec la virgule :

  • println("1.8 x 2.3 = ", 1.8*2.3);
  • println("1.8 x 2.3 = "+ 1.8*2.3);

Pr_in_println

Variable

Utilisation : déclaration et affectation

Pour se représenter une variable, il faut imaginer que la mémoire de l’ordinateur est composée d’une multitude de petites boîtes. Chacune de ces boîtes porte un nom et ne peut contenir qu’une valeur. Changer cette valeur signifie qu’on perd la valeur précédente (on dit qu’on écrase l’ancienne valeur).

0_case_variable

Pour utiliser une variable, il faut :

  • commencer par indiquer son type (entier, nombre à virgule, booléen, caractère …) : c’est la déclaration d’une variable.
  • puis lui donner une valeur : c’est l’affectation.

Ces deux étapes peuvent être faîtes en 1 instruction :

int monAge = 17; // déclaration et affectation de la variable monAge

Ou en 2 instructions :

int monAge; //déclaration variable entière "monAge"
monAge = 17; // affectation de la variable monAge

Ensuite, l’intérêt des variables est d’effectuer :

  • des calculs : addition (+), multiplication (*), …
  • des tests :   if (monAge > 18) { text("Je suis en âge de voter.",50,70); }
  • des boucles :   for (int i = 1 ; i<11 ; i++) { line(0,0,i,10*i); }

Types de variables

Les types de variables les plus utilisés  :

  • int :  pour stocker un nombre entier (integer).
  • float :  pour stocker un nombre à virgule (un flottant).
  • String :  pour stocker un texte (une chaîne de caractères).
  • boolean :  pour stocker un résultat « tout ou rien », car il n’y a que 2 valeurs booléennes :  TRUE et FALSE.
  • color :  pour stocker une couleur.

NB : L’avantage des booléens est qu’ils ne prennent que 1 bit en mémoire …

size(200,150);
int monAge = 17;
String monNom = "Milou";
color kaki = color(100,155,0);

fill(kaki);
text("Bientôt, "+monNom +" aura " +(monAge+1)+ " ans.",20,80);

Pr_pr_variable

Nom de variable

Le nom de variable accepte quasiment tous les caractères sauf les : point, virgule, lettre accentuée, espace ..
En revanche, il accepte l’underscore « _ » et les majuscules. D’ailleurs, on les utilise souvent pour distinguer les mots : monAge ou mon_age.

En principe, un nom de variable entièrement en majuscule symbolise plutôt une constante dans le programme. Exemple : float PI = 3.14;

fonctions

Processing possède toutes les fonctions mathématiques et davantage encore :

  • 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.
  • % (le modulo) : donne le reste d’une division euclidienne. Donc : 11 % 3 = 2 (car si on divise 11 par 3, le reste est 2).
  • 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.
  • transtypage : pour changer un float en int, on rajoute (int) devant. Ex :  (int)2.999f donne 2  et   (int)-2.999f donne -2.
  • get(10,30)  donne la couleur du pixel (10,30) (ex : #000000).  Idem sur une image avec photo.get(10,30).
  • dist(10,30,mouseX,mouseY)  donne la distance entre le pixel (10,30) et la souris (mouseX,mouseY).
  • noLoop();   arrête l’animation. Puis reprendre l’animation :  loop();

Les angles sont en radians et le sens trigo est inversé (du fait du repère), donc utiliser le schéma suivant pour repérer le coefficient et le multiplier par PI.

Test : if ( ... ) { ... }

Un test a pour résultat TRUE ou FALSE. Pour cela, on utilise :

  • ==    pour une égalité.
  • < ou > pour une inégalité stricte.
  • <=  ou  >=  pour une inégalité large.

NB :  L’erreur classique est la confusion entre  =  et ==  c’est à dire l’affectation et le test.

int monAge = 17;  // une affectation
if (monAge == 18)  {  // un test
    text("J'ai 18 ans.",20,80); 
} else {
    text("Ce n'est pas l'année de mes 18 ans",0,40);
}
Pr_pr_test

Boucle itérative :  for ( .. ; .. ; .. )  { .. }

Lorsqu’on doit effectuer plusieurs fois la même instruction (ou un bloc d’instructions), on utilise une boucle for avec un compteur.

Voici un exemple qui écrit 10 fois le même message avec un compteur est i qui va de 1 à 10. De plus, on ne va évidemment pas écrire 10 fois au même endroit (ça serait illisible), donc on utilise la valeur de i dans les coordonnées du texte (et en faisant 20*i, les coordonnées avancent de 20 en 20) !

Le rôle de chaque paramètre :

  • i=5; ou int i=5;   signifie que la valeur de départ de i est 5. [De plus si la variable i n’a pas été déclarée on peut le faire ici.]
  • i<=10; la condition pour que la boucle continue (elle s’arrêtera que si i > 10 )
  • i++ signifie i=i+1 donc que i augmente de 1 à chaque tour de boucle [ on peut remplacer par i=i+10 si on veut que i aille de 10 en 10].

Ensuite, on met les instructions dans les accolades (ici, on change la couleur – juste la composante Verte – et on écrit « Hello »)

for (int i=5 ; i <= 10 ; i++) {
  fill(100, 20*i , 40);
  text("Hello",30,10*i);
}
Pr_pr_for

Boucle conditionnelle :  while ( .. )  { .. }

Lorsqu’on doit effectuer plusieurs fois la même instruction (ou un bloc d’instructions) tant qu’une certaine condition est vraie, on utilise une boucle while avec le test à l’intérieur.
NB : Une boucle for peut aussi s’écrire avec while.

size(200,150);
int i = 0;
while (i < 80 )  {
  line(30, i, 80, i);
  i = i + 5;
}
Pr_Prg_while

Liste d’éléments IntList, FloatList, StringList

Une liste se comporte comme un tableau dont on peut changer la taille : ajouter des éléments, ou en enlever.

Liste de types pré-définies : IntListFloatListStringList.

Liste de mots String

  • StringList listeDeMots;   et  listeDeMots = new StringList;   pour déclarer et créer une liste de mots (donc de type String).
  • listeDeMots.append("café");   pour ajouter le mot café à la liste (le 1er indice est le n°0).
  • listeDeMots.remove(3);   pour enlever le mot d’indice n°3. Les éléments suivants sont alors poussés vers la gauche et la taille de la liste diminue.
  • listeDeMots.get(2)   renvoie l’élément d’indice 2. Ex : text(listeDeMots.get(2), width/2, height/2);
  • listeDeMots.size();   donne la taille de la liste. Ex : println("nb = "+listeDeMots.size());
  • println(listeDeMots);   affiche dans la console la taille de la liste et ses éléments.
  • listeDeMots.set(4, "sucre");   pour insérer un élément à un index particulier.
    NB : S’il y avait déjà un élément à cette place, il est alors supprimé et remplacé par le nouvel élément.
    Si la taille de la liste est inférieure à cet index, alors la liste est agrandie (quite à ajouter des éléments vides "" ).
  • listeDeMots.hasValue("sucre")    renvoie true si la liste contient le mot « sucre » et false sinon.
  • listeDeMots.sort();   range la liste dans l’ordre alphabétique (tri croissant). sortReverse() pour un tri décroissant.
  • listeDeMots.shuffle();   mélange aléatoirement la liste.
  • listeDeMots.reverse();   inverse l’ordre des éléments de la liste.
  • listeDeMots.clear();   pour supprimer tous les éléments de la liste.

et aussi : lower(), upper().

Liste d’entiers int

  • IntList listeDEntiers;   et  listeDEntiers = new IntList;   pour déclarer et créer une liste d’entiers (de type int)
  • listeDEntiers.append(423);   pour ajouter l’entier 423 à la liste
  • listeDEntiers.remove(3);   pour enlever l’entier d’indice n°3. Les éléments suivants sont alors poussés vers la gauche et la taille de la liste diminue.
  • listeDEntiers.get(2)   renvoie l’élément d’indice 2. Ex : text(listeDEntiers.get(2), width/2, height/2);
  • listeDEntiers.size();   donne la taille de la liste. Ex : println(« nb = « +listeDEntiers.size());
  • println(listeDeMots);   affiche dans la console la taille de la liste et ses éléments.
  • listeDEntiers.set(4, 4045);   pour insérer l’élément 4045 à l’index n°4.
    NB : S’il y avait déjà un élément à cette place, il est alors supprimé et remplacé par le nouvel élément.
    Si la taille de la liste est inférieure à cet index, alors la liste est agrandie (quite à ajouter des éléments nuls 0 ).
  • listeDEntiers.hasValue(4045)    renvoie true si la liste contient l’entier 4045 ; et false sinon.
  • listeDEntiers.sort();   range la liste dans l’ordre croissant (tri croissant). sortReverse() pour un tri décroissant.
  • listeDEntiers.shuffle();   mélange aléatoirement la liste.
  • listeDEntiers.reverse();   inverse l’ordre des éléments de la liste.
  • listeDEntiers.clear();   pour supprimer tous les éléments de la liste.

et aussi : min(), max() et les opérations : add(index, montant), sub(), div(), mult().