Le langage pour Processing 

***

 

 

Mise à jour le 16/08/2017

 

Sommaire :

 

 

 

 

 

Présentation de Processing

Ci-dessous en gras un extrais du manuel sur le site : Flossmanuals 

Processing est un logiciel libre et gratuit. Il fonctionne sur les plates-formes Windows, Linux, Mac (et sur toute autre plate-forme pouvant faire fonctionner des logiciels conçus en Java). Il existe également des versions pour téléphones portables et des dérivés pour circuits électroniques.

 

Un programme Processing se dissocie en 3 partie comme sur le logiciel Arduino , une partie pour les inclusions de bibliothèque et des variables  , une autre pour la configuration  dans la partie void setup (), et enfin une partie similaire  à void  loop dans la partie void draw () .

 

 

 

 

Retour au sommaire

Utilisation de l’écran

Comment définir la taille de l’écran ou l’espace de travail ?

 

Retour au sommaire
 

 

 

 

Couleur du fond d’écran. 

Comment changer la couleur du fond de l’écran ou de l’espace de travail ?

Retour au sommaire

 

 

Différentes formes 

 

 

Tableau des différentes formes dans Processing ( utilisable avec la version Processing 3.3.4 ) .

Syntaxe Description
point(x, y); Dessine un point de grosseur de un pixel localisé dans la fenêtre en x et y
x => coordonnée x du point
y => coordonnée y du point

Exemple :

point(x, y, z); Dessine un point de grosseur de un pixel localisé dans la fenêtre en x et y .La 3 éme  valeur  étant optionnelle est la valeur de profondeur.Pour la création de ce point en 3D cela nécessite le paramètre P3D en combinaison avec la taille size()
x => coordonnée x du point
y => coordonnée y du point
z => z-coordonnée du point
line(x1, y1, x2, y2); Dessine une ligne à l’écran .Les lignes 2D sont dessinées avec une largeur d’un pixel par défaut .
x1 =>  coordonnée x du premier point
Y1 => coordonnée y ( vertical ) du premier point
x2 => coordonnée x du deuxième point
y2 => coordonnée y du deuxième point
line(x1, y1, z1, x2, y2, z2); La version avec 6 paramètres permet de placer la ligne n’importe où dans l’espace XYZ. Pour la création de cette ligne en 3D cela nécessite le paramètre P3D en combinaison avec la taille size()
x1 =>  coordonnée x du premier point
y1 => coordonnée y ( vertical ) du premier point
x2 => coordonnée x du deuxième point
y2 => coordonnée y du deuxième point
z1 => z-coordonnée du premier point
z2 => z-coordonnée du deuxième point
rect(a, b, c, d); Dessine un rectangle à l’écran avec tous les angles à 90°
a => coordonnée x du rectangle
b => coordonnée y du rectangle
c => largeur du rectangle
d => hauteur du rectangle
rect(a, b, c, d, r); Dessine un rectangle arrondi à l’écran , ajoutez un 5 éme paramètre, qui est utilisé comme valeur de rayon pour les quatre coins.
a => coordonnée x du rectangle
b => coordonnée y du rectangle
c => largeur du rectangle
d => hauteur du rectangle
r => rayons pour les 4 coins
rect(a, b, c, d, tl, tr, br, bl); Dessiner un rectangle avec un rayon différent pour chaque coin .
a => coordonnée x du rectangle
b => coordonnée y du rectangle
c => largeur du rectangle
d => hauteur du rectangle
tl => rayon pour le coin supérieur gauche

tr => rayon pour le coin supérieur droit
br => rayon pour le coin inférieur droit
bl => rayon pour le coin inférieur gauche

Retour au sommaire

ellipse(a, b, c, d); Dessine une ellipse (ovale) à l’écran. Une ellipse de même largeur et hauteur est un cercle. Les 2 premiers paramètres définissent l’emplacement sur l’écran .
a => coordonnée x de l’ellipse
b => coordonnée y de 
l’ellipse
c => largeur de l’ellipse
d => hauteur de l’ellipse

Retour au sommaire

triangle(x1, y1, x2, y2, x3, y3); Le triangle est une forme constituée de trois points
x1 => coordonnée x du premier point
y1 => coordonnée y du premier point
x2 => coordonnée x du 2 éme point
y2 => coordonnée y du 2 éme point
x3=> coordonnée x du 3 éme point
y3 => coordonnée y du 3 éme point

Retour au sommaire

arc(x,y,l,h, start, stop );  x , y définissent le centre du cercle, l et h définissent la dimension du cercle l pour largeur, h pour la hauteur, start et stop sont les paramètres qui définissent le début et la fin de l’arc.
x =>  coordonnée x de l’ellipse de l’arc
y => coordonnée y de l’ellipse de l’arc
l => largeur de l’ellipse de l’arc
h => hauteur de l’ellipse de l’arc
start => angle pour démarrer l’arc, spécifié en radians
stop =>  angle pour arrêter l’arc, spécifié en radians

Retour au sommaire

 bezier (ax,ay,c1x,c1y,c2x,c2y,bx,by)

Pour dessiner une courbe de bézier, il faut définir quatre points avec chaque fois 2 valeurs (x,y) . La première et la dernière définiront le début et le fin de la courbe. Les deux points intermédiaires définiront les contrôles de courbe 

ax,ay => définition du début de la courbe
c1x,c1y => premier contrôle de courbure
c2x,c2y => deuxième contrôle de courbure
bx,by => définition de la fin de la courbe

 –

Exemple :

 

   
A savoir :
La fonction delay ne peut être utilisé pour ralentir le dessin .
 

 

Le point :

Le point est l’équivalent d’un pixel localisé dans la fenêtre ou l’espace de travail

Syntaxe : point(x,y) ;

Exemple de programme sur le point :

 

Exemple de positionnement d’un point sur l’écran :

Retour au sommaire
 

 

 

 

Exemple de création d’une ligne avec un ensemble de point 

Retour au sommaire

 

 

 

La courbe de Bézier :

Pour dessiner une courbe de bézier, il faut définir quatre points avec chaque fois 2 valeurs (x,y) . La première et la dernière définiront le début et le fin de la courbe. Les deux points intermédiaires définiront les contrôles de courbe 

 bezier (ax,ay,c1x,c1y,c2x,c2y,bx,by);
  • ax,ay => définition du début de la courbe
  • c1x,c1y => premier contrôle de courbure
  • c2x,c2y => deuxième contrôle de courbure
  • bx,by => définition de la fin de la courbe
 

 

 –

 

 

 
 

Exemple d’utilisation de la courbe de Bézier :

  • La création d’un regard avec l’utilisation de la fonction courbe de Bezier et la fonction ellipse.

Tutoriel :

Programme du tuto ci-dessus 

 

Retour au sommaire

 

 

 

Utilisation de la souris dans Processing

Variable système attachées à l’utilisation de la souris 

Syntaxe Description

mouseX

La variable système mouseX contient toujours la coordonnée horizontale actuelle de la souris.

mouseY

La variable système mouseY contient toujours la coordonnée verticale actuelle de la souris.
pmouseX La variable système pmouseX contient toujours la position horizontale de la souris dans le cadre antérieur à la trame actuelle.
pmouseY La variable système pmouseY contient toujours la position verticale de la souris dans le cadre antérieur à la trame actuelle.
mousePressed

La variable mousePressed stocke si un bouton de la souris est ou non pressé. La valeur est vraie lorsque l’on appuie sur un bouton de la souris et à contrario est faux si aucun bouton n’est appuyé. 

mouseReleased ()

La fonction mouseReleased () est appelée chaque fois qu’un bouton de souris est relâché.

mouseClicked ()

La fonction mouseClicked () est appelée après avoir appuyé sur un bouton de la souris puis relâché.

mouseMoved ()

La fonction mouseMoved () est appelée chaque fois que la souris se déplace et que le bouton de la souris n’est pas appuyé. (Si un bouton est pressé, mouseDragged () est appelé à la place.)

mouseDragged ()

La fonction mouseDragged () est appelée à chaque fois que la souris se déplace  et si vous appuyez sur un bouton de la souris. (Si un bouton n’est pas pressé, mouseMoved () est appelé à la place.)

mouseButton

Quand un bouton de la souris est enfoncé, la valeur de la variable système mouseButton est réglé sur GAUCHE , DROITE , ou CENTRE , selon le bouton qui est enfoncé. (Si aucun bouton n’est appuyé, le bouton de la souris peut être réinitialisé à 0. Pour cette raison, il est préférable d’ utiliser en premier MousePressed pour tester si un bouton est pressé et seulement ensuite tester la valeur de mouseButton

mouseWheel() La fonction mouseWheel () renvoie des valeurs positives lorsque la roue de la souris est basculée vers le bas (vers l’utilisateur) et des valeurs négatives pour l’autre sens
Retour au sommaire

 

 

 

 

 

Un cercle qui suit les mouvements de votre souris

 

Processing : Un cercle qui suit les mouvement de votre souris - RedOhm

Processing : Un cercle qui suit les mouvement de votre souris – RedOhm

Retour au sommaire