Aujourd'hui, on se retrouve autours d'un nouveau langage, j'ai nommé Processing.
Vous pouvez aussi télécharger l'IDE ICI

Mais c'est quoi encore que ce truc ? ;)
Processing c'est un IDE (vous êtes incollable sur cet acronyme maintenant) et aussi et surtout un langage de programmation dédier au graphisme et à la programmation générative.
En gros Processing c'est LE langage pour les artistes.

Mais pourquoi ce langage et pas un autre ?
Et bien, tout simplement parce que entre Arduino et Processing, c'est une grande histoire d'amour !
Pour vous donner un exemple d'utilisation, c'est simple. Imaginez un capteur cardiaque (oui oui il y en a un pour Arduino ;) ), vous l'avez posé sur vous et écrit le programme pour récupérer votre fréquence cardiaque.
Seulement voilà, récupérer des valeurs, ça ne vous indique pas franchement clairement votre rythme. c'est là que Processing entre en jeu !

Comment ? allez-vous vous demander !
Tout simplement en ouvrant un “canal” de communication entre les deux IDE afin d'envoyer les données d'Arduino vers Processing et les traiter.

Il est bien sur à noter que l'inverse est tout aussi possible ! Rien ne vous empêches d’écrire un programme en Processing qui, sous l'action d'un clic sur une tuile verte, allume une LED verte dans Arduino.

La seul limite à la réalisation de vos idées, sont, justement vos idées ;). En programmation, rien n'est impossible, seule votre imagination compte et en ça, je n'ai aucun doute que vous excellez !

Vous le constatez vous-même, en ce qui concerne l'interface des IDE, c'est kif-kif et bourricot ;)
Nous retrouvons:

• le bouton (en haut à gauche) pour exécuter le code,
• l'espace d'écriture
• la console (en bas) qui affiche les erreurs.

Mais il y a aussi des fonctions propres à l'IDE Processing comme le bouton de débogage (en haut à droite) et juste à côté, la possibilité de sélectionner le langage utilisé (par défaut, java).

Et bien là aussi, nous retrouvons beaucoup de similitudes !
Comme pour Arduino, et beaucoup de langage d'ailleurs, nous retrouvons deux fonctions essentiels, à savoir “void setup” et “void draw”.

Euh ! coco dans Arduino c'est “void loop” tu me racontes quoi là ?
C'est très juste ! Dans le langage Arduino, la fonction loop devient draw dans Processing.
Mais cela ne change rien, ce sont des noms choisis arbitrairement par les développeurs de Processing (Ben Fry et Casey Reas).
Comme il s'agit d'un langage destiné aux artistes, ils se sont sûrement dit que nommé la fonction “draw” (dessin en Anglais) illustrait bien la fonction… de cette fonction ;).

De la même manière qu'en Arduino, la fonction “void setup” sert à stocker des instances d'initialisations qui seront placés dans une partie de la mémoire de l'ordinateur et exécuté une seule fois au lancement.
Le programme lie et stocke ces infos sans jamais y revenir par la suite.
A l'inverse, la fonction “void draw” tout comme la fonction “loop” est lue et interprété à l'infini par le programme, sauf code contraire, bien sur, mais je vous le déconseille ;)

void setup(){
    size(300, 300);
    background(0);
}
 
void draw(){
    text("Hello world !", width / 2, height / 2);
}

Allez, pour une fois, abrégeons la théorie et passons à la pratique.
Pourquoi si vite me direz vous ? Et bien tout simplement parce que expliquer ce que nous allons voir avec des mots est bien plus complexe qu'une mise en pratique.

Cela dit, il faut mal-grès tout avoir une petite notion en tête pour bien tout comprendre !
J'ai nommé les coordonnées. vous voyez ? Comme les latitudes et longitudes que l'on retrouve sur une map monde. Ici c'est le même principe mais appliqué à une fenêtre.

En math, il y a deux notions fondamentales quand on souhaite réaliser des graphiques, les abscisses (X) et les ordonnées (Y).
Jusque là tout va bien, on place notre point 0-0 puis on trace une ligne verticale (Y) et une ligne horizontale (Y).
Nous obtenons alors ceci :

Dans la logique Processing, c'est tout pareille, mais l'inverse ;).
On ne commence pas à calculer nos coordonnées à partir du coin inférieur gauche, mais bien du coin supérieur gauche.
De ce fait, nous avons nos coordonnées 0-0 en haut à gauche et nos coordonnées 100-100 (si on imagine un carré de 100px sur 100px) en bas à droite.
Dans l'exemple ci-dessous, les deux points bleu sont en 0-0 et en 100-100 (pixels).
Côté points vert, le premier est à 110px en X et 160px en Y et le second à 490px en X et 330px en Y.

Avant de passer à l'action, je vous invite à écrire ces lignes de code dans votre IDE et manipuler les données pour bien comprendre ce qui se passe à l'écran et dans votre tête. il s'agit de notion assez abstraites et donc un peu sportives à comprendre au début. C'est normal !!

void setup(){
  size(500, 500);
  background(255, 255, 255); // (rouge, vert, bleu)
}
void draw(){
  fill(226, 195, 101);       //fill(rouge, vert, bleu)
  ellipse(110, 160, 10, 10); //(posX, posY, L, H)
}

Nous voilà occupé d'entrer dans le cœur de la couleur numérique !

pour commencer, commençons par causer d'imprimerie.
En imprimerie, nous utilisons 4 couleurs, à savoir CMJN (Cyan, Majenta, Jaune et Noir)
De cette manière vous obtenez un énorme spectre pour imprimer vos magazines préférés.

Plus simplement, en ce qui nous concerne, vous connaissez tous les 3 couleurs primaire j'imagine RJB (Rouge, Jaune et Bleu)?
Avec ces simples couleurs il vous est possible d'obtenir n’importe quelle couleur du spectre visible et là aussi, ça en fait beaucoup !
Oui ! il faut aussi ajouter le blanc et le noir, mais ceci est une autre histoire :) Un peu de peinture rouge, un peu de peinture jaune et Pafff!, vous avez un sublime orange.

En informatique c'est aussi le système colorimétrique utilisé, mais légèrement différent, puisque chaque pixel de vos écrans sont composés de trois sous pixels RVG (et non plus RJB).

Vous voilà fin prêt à vous attaquer à Mondrian.
Bien sur, je ne résiste pas à vous toucher deux mots sur ce monstre de l'histoire de l'Art (déformation professionnelle :D ).
De son petit nom Pieter Cornelis Mondriaan aussi appelé tout simplement Mondrian est un artiste majeur du début du 20ème Siècle, reconnu comme l'un des fondateur de l'art abstrait (sans blague ;) ).

C'est justement çà son créneau, l'abstraction. Son idée est de synthétiser un paysage à l'extrême en remplaçant chaque élément par un rectangle coloré avec un aplat de couleur primaire.
Autant dire que pour aller plus loin en thermes d'abstraction et d'utilisation de la couleur, il faudra aller chez Malevitch et son fameux “carré blanc sur fond blanc”. Après çà LA on peu retirer l'échelle :D.
Enfin, refermons cette sympatrique parenthèse pour nous re-concentrer sur nos codes.

Pour réaliser votre propre Mondrian, rien de plus simple. Il vous faudra juste retenir cinq lignes:

size(X, Y);                           // qui crée une fenêtre de X et Y pixels de côté
background(R, V, B);                  // On affiche une couleur de fond Rouge, Vert, Bleu, mais vous pouvez aussi mettre un code hexadécimale (#123456)
strokeWeight(Xpx);                    // largeur des bordures ici 8 (sous entendu 8px)
fill(R, V, B);                        // On donne la couleur de la forme qui suite
rect(posX, posY, Largeur, Hauteur);   // On crée un rectangle avec en paramètre 
                                      // la position en X, 
                                      // la position en Y, 
                                      // la largeur
                                      // et la hauteur du rectangle

Et c'est tout !

mondrian.pde

void setup() {
  size(805, 1000);             // Taille de la fenêtre
  background(100, 100, 100);   // Couleur de fond (ici un gris)
}
 
void draw() {
 
  strokeWeight(8);             // Taille des bordures
  fill(255,255,255);           // Couleur de la forme
  rect(0, 0, 200,400);         // On crée un rectangle en coordonnée 0X-0Y et 200px sur 400px
  fill(255,255,255);           // Ensuite, on recommence avec un second rectangle, ici on donne la couleur (blanc)
  rect(0, 400, 200,400);       // On crée un rectangle en coordonnée 0-400 et d'une taille de 200px sur 400px
  fill(0,0,255);               // Et ainsi de suite, vous l'aurez compris
  rect(0, 800,200,200);
  fill(255,0,0);
  rect(200, 0,600,800);
  fill(255,255,255);
  rect(200,800,500,200);
  rect(700,800,100,100);
  fill(255,200,0);
  rect(700,900,100,100);
 
}

Avec ces quelques lignes, vous n'allez pas aller très loin, puis avouons le, c'est pô super fun :)
Alors pour aller plus loin, voici quelques lignes de syntaxe supplémentaire:

// Commençons par ajouter l'utilisation de la souris
rect(mouseX, mouseY, 50, 50);     // La position du carré (50px * 50px) se fait en fonction de la position de la souris, c'est déjà plus fun non ?

Heu ! m'sieu mon carré il dessine, j'en ai 10.000 sur mon écran !

Hé bien oui et c'est normal, à votre avis pourquoi?
Si si, je suis sur que vous savez !

Regardez votre code, le background() est placé dans le “void setup”.
L'ordinateur voit donc une couleur à mettre dans le fond, il le fait, puis passe au “void draw” sans JAMAIS y revenir.
Hors, si nous voulons un seul carré qui bouge sans se “copier/collé à chaque mouvement, il faut tout simplement placer un nouveau background entra chaque carré.
De ce fait, cela devient une sorte de “milles feuilles” composé de :

 couleurFond(#FFF);
 Carre(X+0, Y+0);
 couleurFond(#FFF);
 Carre(X+1, Y+1);
 couleurFond(#FFF);
 Carre(X+2, Y+2);
 couleurFond(#FFF);
 Carre(X+3, Y+3);
 ....

Pour cela, déplacé tout simplement le background du setup vers le draw, vous allez donc avoir :

void setup() {
  size(800, 1000);             
}
 
void draw() {
  background(100, 100, 100);  
  fill(255,200,0);
  rect(mouseX,mouseY,100,100);
}

Et là, plus de souci, votre carré bouge et il n'y en a qu'un !

noStroke();            // Est utilisé pour retirer la bordure des formes, il ne prend pas de paramètres
translate(X, Y);       // On opère une translation en X et en Y
textSize(Xpt);         // On donne une taille en "points" à notre texte affiché
text("hello word");    // On affiche du texte, ici "hello word"
 
// Les conditions, que vous connaissez maintenant sur le bout des doigts
if(condition){
  // code à exécuter "si" la condition est remplie
}
else if(condition sinon si){
  // code à exécuter "sinon si" la 1ère condition n'est pas remplie
}
else{
  // "Sinon" on exécute...
}

Pour se faciliter la vie quand on souhaite centrer automatiquement un élément au centre de notre fenêtre, on utilise width/2 ou height/2.

De la même manière si nous souhaitons dupliquer automatiquement des éléments, comme des lignes, sans écrire 100X “line(X1, Y1, X2, Y2); tout en gardant un espace identique entre elles, nous écrirons une boucle “for”

Voyons les résultats :

rect(width/2, height/2, 50, 50);     // place un carré de 50x50 au centre de notre fenêtre
 
for (int i = 0; i < 200; i = i+5) {
  line(0, i, width, i);
}
// On crée des lignes sur une auteur de 200px avec un espace de 5px entre chaque.
// **0, i** place le point **A** de la droite, **width, i** place le point **B** de la droite

Pour terminer cette mini intro à la syntaxe, il me faut vous avouez quelques chose, avec processing, on peu faire beaucoup, beaucoup, beaucoup plus !
• On peu récupérer le flux video d'une webcam,
• On peu importer des photos ou vidéos pour les manipuler ensuite,
• On peu utiliser notre clavier pour interagir avec notre programme (“s” pour sauvegarder notre visuel par exemple),
• On peu utiliser les boutons de la souris (clic, pression, relâchement,… ),
• On peu manipuler du son ou en générer (avec la bibliothème “MINIM”),
• On peu générer, importer et manipuler des objets 3D, oui oui !!,
• On peu manipuler des formats comme les PDF ou SVG,

Et j'en passe, beaucoup !

eclipse.pde

int step = 1;
int position;
 
void setup() {
  size(500, 600);
  background(#299598);
}
 
void draw() {
// couleur de fond
  background(#299598);
// couleur de forme, ici l'ellipse
  fill(#F0DA0F);
// On enlève le contour de la forme
  noStroke();
  //   Position en X, Position en Y, largeur du rect(); , auteur rect();
  ellipse(width/2, height/2, 52, 52);
// On indique la couleur de la seconde ellipse qui se superpose à la première
  fill(#0CEA97);
// On déclare la position + l'incrémentation de 1
  position = position + step;
// On décale de 25px pour que le bord de l’ellipse rebondisse bien sur le bord de la fenêtre 
  translate(25, 0);
// On crée la condition pour faire grossir l'ellipse jaune 
  if (position > 175 && position < 275) {
    fill(#F0DA0F);
    ellipse(width/2-25, height/2, 60, 60);
  }
// On crée les deux condition pour les rebonds
  if (position > 500 - 50) {
    step = -1 * step;
  }
  if (position < 0) {
    step = -1 * step;
  }
// On affiche un texte de 16pt, avec la position de l'ellipse grise ( oui c'est la lune :D )
  textSize(16);
  text(position, 0, 20);
// On donne une valeur de gris (entre 0 et 255) et on donne une transparence de 200 ( là aussi entre 0 et 255 )
  fill(100, 200);
// On crée l'ellipse
  ellipse(position, height/2, 50, 50);
}

int col = 0;
int tuileSize = 30;
void setup() {
  size(800, 600);
  background(255);
}
void draw() {
  smooth();
  noStroke();  
  fill(255, 0, 0);
  ellipse(15, 20, tuileSize, tuileSize);
 
  fill(0, 255, 0);
  ellipse(50, 20, tuileSize, tuileSize);
 
  fill(0, 0, 255);
  ellipse(85, 20, tuileSize, tuileSize);
 
  fill(255, 255, 0);
  ellipse(120, 20, tuileSize, tuileSize);
 
  fill(0);
  ellipse(155, 20, tuileSize, tuileSize);
 
  if (mousePressed == true) {
    stroke(col);
    strokeWeight(1);
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
}

Vous voilà maintenant avec une base, mais pouvez-vous aller plus loin?
J'en suis sur !
Vous pouvez imaginer d'ajouter une fonction de sauvegarde, une nouvelle page blanche, ou encore différentes tailles de traits.

Jetez-vous à l'eau sans craintes !

Quand Processing rencontre JavaScript ça donne P5.JS
Nous n'allons pas nous étendre sur cette techno pour l'instant, mais sachez simplement que c'est possible ;).

Passez votre souris dans le bas de page pour un petit exemple ! Et pour le code c'est juste en dessous.

function setup() {
  createCanvas(1900, 300);
}
 
function draw() {
    noStroke();
    background(#FFF);
  if (mouseIsPressed) {
    fill( 200 );
    background(#FFF);
  } else {
    randR = random(200, 255);
    randV = random(200, 255);
    randB = random(200, 255);
    fill( randR, randV , randB, 5 );
  }
  for(let i = 0; i <= 50; i++){
   ellipse(mouseX, mouseY, i, i);
  }
}

Vous remarquerez que la syntaxe est parfois différente de celle de processing, comme “createCanvas();” qui remplace le “size();”.

• Pour la bible des codes Processing c'est sur OpenProcessing (le google du code Processing).
• Bien sur Le site de Processing.
• Une série de Tuto vidéo à retrouver ICI.
• Le site de P5.JS.