====== Découverte du langage Processing ======
===== Processing, vous avez dit Proce55ing ? =====
{{:ateliers:robotique:processing.png?nolink&240 | }}
Aujourd'hui, on se retrouve autours d'un nouveau langage, j'ai nommé [[https://processing.org/|Processing]].\\
Vous pouvez aussi télécharger l'IDE [[https://processing.org/download/|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 !
===== Côté interface =====
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).
{{:ateliers:robotique:arduino_ide_-_blink.png?direct&500 |Arduino}}
{{ :ateliers:robotique:processingide_english.png?direct&450|Processing}}
===== Et la syntaxe dans tout çà ? =====
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 ([[https://en.wikipedia.org/wiki/Ben_Fry|Ben Fry]] et [[https://en.wikipedia.org/wiki/Casey_Reas|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);
}
===== Et si on f'sais un Mondrian ? =====
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 :
{{:ateliers:robotique:abscisseordonnee.png?direct&400|}}
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.
{{:ateliers:robotique:coordo.png?direct&400|}}
En Processing, nous commençons toujours par les X et ensuite les Y.\\
Dans la ligne de code
ellipse(110, 160, 10, 10);
110 est en X alors que 160 est en Y ! Quant au 10, 10 il s'agit de la dimension de l'ellipse. Là aussi on commence par les X (largeur) et Y (hauteur).
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)
}
===== RGB - RGBA RJB - CMJN - Exadécimal =====
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 (**C**yan, **M**ajenta, **J**aune et **N**oir)\\
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 (**R**ouge, **J**aune et **B**leu)? \\
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).
==== On passe à l'action ? ====
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.
{{:ateliers:robotique:mondrian.png?direct&400|}}
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 !
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);
}
===== Aller plus loin dans la syntaxe =====
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 !
Vous retrouverez l'ensemble des syntaxes sur le [[https://processing.org/reference/|site de processing]].\\
Ainsi que des exemples, que vous trouverez dans votre IDE (Fichier > Exemples) ou en faisant un **CTRL-Maj-O**.
==== Eclipse ====
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);
}
===== Dessine moi un programme =====
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);
}
}
==== On s'ajoute des fonctions ? ====
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 !
Allez, un petit coup de pouce quand même ;)
• Pour une sauvegarde il vous faudra utiliser une condition avec un "key" et la fonction save(),\\
• Pour une nouvelle page, facile, c'est un nouveau "background",\\
• Pour les traits, encore plus simple, on change le paramètre de "strokeWeight()", mais l'encapsulation sera plus compliquée !
N'hésitez jamais à vous aidez des références [[https://processing.org/reference/|ICI]]\\
Et pour tester votre code en ligne c'est par [[https://editor.p5js.org/|ICI]]
==== Footer P5.js ====
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();".
===== Ressources =====
• Pour la bible des codes Processing c'est sur [[https://openprocessing.org/|OpenProcessing]] (le google du code Processing).\\
• Bien sur [[https://processing.org/|Le site de Processing]].\\
• Une série de Tuto vidéo à retrouver [[https://www.youtube.com/watch?v=Y6MsuAOAShs&list=PLsJom-jnI-g19b6rz3U2-ZUGIEe4TQHv_|ICI]].\\
• Le site de [[https://p5js.org/|P5.JS]].\\