Les lignes de code décortiquées une par une

Ici sont décortiquées une par une chaque ligne, pour qu'elles ne recèlent plus aucun mystère, plus aucun secret pour vous. N'hésitez pas à compléter les lignes ci-présentes avec la documentation de Processing - disponible uniquement en anglais.

Ne vous affolez pas s'il y a peu de lignes, il y en aura toujours plus !

Remarque : il est vivement conseillé de jeter un coup d'œil aux trucs et astuces de Processing si vous souhaitez insérer les lignes présentés, ou d'autres aussi !

Note : Les couleurs présentés tentent de reproduire le plus fidèlement possible l'affichage sur Processing.

int x=10;

Fonction "déclarer une variable", ici "x", qui prend une valeur entière, ici "10".

int[] x;

Fonction "déclarer une variable" générant un tableau nommé "x", auquel on pourra déterminer le nombre de cases et le remplir par la suite.

 Balle [] maBalle;

En programmation orientée objets, on crée un nouveau tableau d'objets "Balle" appelé "maBalle".

x=new int[10];

Fonction assigner "new" une valeur entière "int" au tableau "[]" qui a pour nom "x", valeur qui est "10" : le tableau "x" aura 10 cases.

int 

Si vous retrouvez ailleurs la fonction "int", c'est que vous déclarez une nouvelle variable prenant une valeur entière.

float

Si vous voulez manipuler des nombres autres qu'entiers, décimaux, utilisez "float" plutôt que "int". Même, il vaut mieux utiliser "float" kit à ne prendre que la valeur entière du nombre avec (int) : si vous avez "18.23" (les virgules pour les décimales sont des points en anglais), avec "(int)18.23", Processing ne prendra que le "18".

void setup() { 

     //instructions ;

}        

 Fonction vide - c'est-à-dire qu'elle ne prend aucun paramètre et ne renvoie rien sur le programme - "void", qui permet d'appliquer les instructions une seule fois au début du programme "setup".

void draw() {

     //instructions ; 

}                       

Fonction vide "void", qui permet d'appliquer les instructions à chaque rafraîchissement du programme "draw", c'est-à-dire 30 fois par seconde par défaut, mais réglable évidemment.

void xyz() {

     // instructions ; 

 }               

Fonction vide "void" dans laquelle on a regroupé plusieurs instructions, communes à la fonction "xyz". Ceci permet de stocker des lignes qui jouent à peu près le même rôle ensemble, et ainsi de rendre lisible les lignes de code. Il faut les placer en dehors du "void setup" et "void draw", de préférence après.

xyz(); 

Fonction "xyz" ; on "appelle" la fonction "xyz" contenant toutes les lignes insérés dans le "void xyz". Ainsi, au lieu d'avoir un ensemble de lignes codant pour la même chose, on se retrouve avec une ligne simple.

maBalle.bouge();

Lorsque l'on programme en programmation orientée objets, on peut définir une fonction, ici "bouge" s'appliquant à un objet, ici "maBalle", mais le principe est le même qu'avec "xyz" au-dessus.

for(int i=0; i<10; i++) {

     //instructions ; 

}                       

Boucle pour "for" où i, compteur de boucle, prend une valeur entière "int" de 0 "i=0" jusqu'à 10 exclus, donc 9 "i<10" de un en un "i++" (ou "i=i+1"). Les instructions seront donc appliqués pour i=0, puis pour i=1, etc jusqu'à i=9.

if(x<10) { 

      //instructions ; 

} else { 

      //instructions ; 

}              

Fonction condition : "si" x est inférieur à 10 "x<10" (on dit que x<10 est booléen : cela est vrai ou faux), on applique les instructions dans la condition ; sinon "else", on applique les instructions dans le "else". Remarque : il se peut que le else ne soit pas toujours présent. De plus, si l'on veut établir une comparaison, il faudra non pas un mais deux égal ; exemple : "if(x==10)" et non "if(x=10)".

rect(x, y, a, b); 

Fonction dessiner un rectangle "rect" qui prend 4 paramètres, à savoir son abscisse "x", son ordonnée "y" (donc les coordonnées, en pixels), sa taille horizontale "a" et sa taille verticale "b" (donc les dimensions, en pixels). "x" et "y" correspondent à l'angle gauche du rectangle, et "a" et "b" modifient donc sa taille respectivement vers la droite et vers le bas (voir image ci-jointe). Remarque : pour construire un carré, il suffit d'appliquer un "a" et un "b" égaux.

ellipse(x, y, a, b); 

Fonction dessiner une "ellipse" qui prend 4 paramètres, à savoir son abscisse "x", son ordonnée "y" (donc les coordonnées, en pixels), son rayon horizontal "a" et son rayon vertical "b" (donc les dimensions, en pixels). "x" et "y" correspondent au centre de l'ellipse, et "a" et "b" modifient son rayon respectivement horizontal et vertical (voir l'image ci-contre). Remarque : pour construire un cercle, il suffit d'appliquer un "a" et un "b" égaux.

triangle(x1, y1, x2, y2, x3, y3);

Fonction "triangle" permettant de tracer un triangle ABC avec A(x1, y1) B(x2, y2) et C(x3, y3).

line(x1, y1, x2, y2);

Fonction ligne "line" qui permet de créer une ligne allant ici des coordonnées x1, y1 jusqu'aux coordonnées x2, y2.

size(1920, 1080);

Fonction taille "size" qui prend pour paramètres le nombre de pixels voulus en abscisse, ici "1920" puis en ordonnée, ici "1080". Elle se met dans le "void setup". Le positionnement du texte se fait comme pour le rectangle (voir schéma rectangle).

background(#000000); 

Fonction colorier le fond d'écran "background" qui prend 1 paramètre (la couleur). Ici, on a affaire à du noir. Pour sélectionner la couleur de votre choix, utilisez le sélecteur de couleur. Plus de renseignements à cette page.

Remarque : placez cette fonction dans le "void draw" pour masquer les traces des objets mouvants. Certains utilisent aussi un rectangle qui fait la taille de l'écran à la place.

fill(#000000); 

Fonction colorier l'objet "fill" qui prend 1 paramètre (la couleur).

noFill();

Fonction ne pas colorier l'objet "no fill" qui ne prend donc aucun paramètre.

stroke(255); 

Fonction colorer les contours "stroke" qui prend 1 paramètre (la couleur).

noStroke();

Fonction ne pas colorier les contours "no stroke" qui ne prend donc aucun paramètre.

random(1, 10);

Fonction aléatoire "random" qui permet de sélectionner une valeur aléatoire, ici comprise entre 1 et 10.

frameRate(30);

Fonction modifier le taux de rafraîchissement "frame rate" qui prend 1 paramètre (le nombre d'actualisations par seconde), ici 30 (30 actualisations chaque seconde) - par défaut (si l'on n'insère pas cette ligne), le taux de rafraîchissement est de 30 actualisations chaque seconde. Cela permet de modifier le nombre d'actualisations du programme à chaque seconde. Ainsi, ici, le "void draw" ré-exécutera chaque instruction placé dans le "void draw" 30 fois par seconde.

Remarque : cette fonction se place sous "void setup" puisque qu'elle définit [une seule fois] le taux de rafraîchissement du programme. 

Note : l’œil humain voit un mouvement fluide à partir de 16 images par seconde. Si vous choisissez une valeur inférieure ou trop proche de 16, les mouvements risquent d'être saccadés. Et si au contraire vous choisissez une valeur trop élevée, les appareils exécutant votre programme risquent de l’exécuter plus difficilement voire de crasher. Ainsi, 30 est un bon compromis.

Attention : si vous changez le taux de rafraîchissement, pensez aussi à changer les vitesse, afin de garder les mêmes allures : eh oui, pour une vitesse de 10 à 30 actualisations par seconde, vous aurez une vitesse de 5 à 15 actualisations par seconde (soit deux fois moins) !

println(xyz);

Fonction "print line" permettant d'afficher la donnée du paramètre "xyz" dans la console - donc invisible pour les utilisateurs du programme ; sert juste au programmeur à voir la donnée ; cela n'apporte rien au programme.

smooth();

Fonction lisser "smooth" qui a pour but d'enjoliver les objets et le texte. Il ne prend aucun paramètre et se met dans le "void setup".

noSmooth();

Fonction ne pas lisser "no smooth" qui n'applique pas de lissage aux objets et au texte du programme.

noCursor();

Fonction pas de curseur "no cursor" qui permet de ne pas afficher le curseur de la souris lorsque l'on est sur le jeu - surtout si l'on a un viseur par exemple.

text("hello", 20, 100);

Fonction insérer du texte "text" qui prend trois paramètres, le texte à insérer, ici "hello", sa position en abscisse, ici "20" pixels et sa position en ordonnées, ici "100" pixels.

textSize(30);

Fonction taille du texte "text size" qui prend pour paramètre la taille du texte en pixels, ici "30".

millis();

fonction milliseconde "millis" qui comptabilise le nombre de millisecondes qui s'est écoulé depuis le lancement du programme.

mousePressed

Paramètre "mouse pressed" qui indique quand on clique sur la souris.

mouseX

Paramètre "mouse x" qui indique la coordonnée en abscisses du curseur de la souris.

mouseY

Paramètre "mouse y" qui indique la coordonnée en ordonnées du curseur de la souris.

width

Paramètre largeur "width" qui prend pour valeur la taille de l'écran - le nombre de pixels - en abscisse.

height

Paramètre hauteur "height" qui prend pour valeur la taille de l'écran - le nombre de pixels - en ordonnée.