Le langage pour Processing 

.

Mise à jour le 25/12/2019 :Processing est tout particulièrement adapté à la création  graphique interactive , mais sa simplicité d’utilisation en fait aussi aussi un bon support pour l’apprentissage de  la programmation pour les non-programmeurs. 

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 () .

La fonction setup ()
Est exécutée une fois au démarrage du programme. Il est utilisé pour définir les propriétés initiales de l’environnement telles que la taille de l’écran et pour charger des supports tels que les images et les polices au démarrage du programme. Il ne peut y avoir qu’une seule fonction setup () pour chaque programme et il ne devrait plus être appelé après son exécution initiale.
Si l’esquisse est une dimension différente de celle par défaut, la fonction size () ou fullScreen () doit être la première ligne de setup () .
Remarque: Les variables déclarées dans setup () ne sont pas accessibles dans d’autres fonctions, y compris draw () .

La fonction draw ()


Appelée directement après la fonction setup () , la fonction draw () exécute en continu les lignes de code contenues dans son bloc jusqu’à ce que le programme soit arrêté ou que noLoop () soit appelé. draw () est appelé automatiquement et ne doit jamais être appelé explicitement. 
Le nombre de fois que draw () s’exécute en une seconde peut être contrôlé avec la fonction frameRate () .

Il est courant d’appeler background () au début de la boucle draw () pour effacer le contenu de la fenêtre, . Étant donné que les pixels dessinés dans la fenêtre sont cumulatifs, la suppression de background () peut entraîner des résultats inattendus.

La largeur et la hauteur minimales sont d’environ 100 pixels dans chaque direction. C’est la plus petite prise en charge sous Windows, macOS et Linux. Nous appliquons la taille minimale afin que les esquisses s’exécutent de manière identique sur des machines différentes.
Le paramètre de rendu sélectionne le moteur de rendu à utiliser. Par exemple, si vous voulez dessiner des formes 3D, utilisez P3D . Outre le rendu par défaut, les autres rendus sont:

  • P2D(Processing 2D): rendu graphique 2D utilisant un matériel graphique compatible OpenGL.
  • P3D (Processing 3D): moteur de rendu graphique 3D utilisant un matériel graphique compatible OpenGL.
  • FX2D (JavaFX 2D): Un moteur de rendu 2D qui utilise JavaFX, qui peut être plus rapide pour certaines applications, mais présente des problèmes de compatibilité.
  • PDF : Le moteur de rendu PDF dessine des graphiques 2D directement dans un fichier PDF Acrobat. Cela produit d’excellents résultats lorsque vous avez besoin de formes vectorielles pour une impression haute résolution. Vous devez d’abord utiliser Importer la bibliothèque → PDF pour pouvoir utiliser la bibliothèque. Plus d’informations peuvent être trouvées dans la référence de la bibliothèque PDF.
  • SVG: Le moteur de rendu SVG dessine des graphiques 2D directement dans un fichier SVG. C’est idéal pour importer dans d’autres programmes vectoriels ou pour une fabrication numérique. Vous devez d’abord utiliser Importer la bibliothèque → Export SVG pour pouvoir utiliser la bibliothèque

A partir de Processing 3.0, pour utiliser des variables en tant que paramètres de la fonction size () , placez la fonction size () dans la fonction settings () (au lieu de setup () ).

.

Retour au sommaire

.

Utilisation de l’écran

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

La fonction size ()

Définit la dimension de la largeur et de la hauteur de la fenêtre d’affichage en unités de pixels. Dans un programme doté de la fonction setup () , la fonction size () doit être la première ligne de code dans setup () , et la fonction setup () doit apparaître dans l’onglet de code avec le même nom que votre dossier de croquis.

La fonction size () ne peut être utilisée qu’une seule fois dans une esquisse et ne peut pas être utilisée pour le redimensionnement.

À partir de la version 3.x.x, pour exécuter une esquisse aux dimensions complètes d’un écran, utilisez la fonction fullScreen () , plutôt que l’ancienne méthode consistant à utiliser size (displayWidth, displayHeight) .

La largeur et la hauteur maximales sont limitées par votre système d’exploitation et correspondent généralement à la largeur et à la hauteur de votre écran actuel. Sur certaines machines, il peut simplement s’agir du nombre de pixels de votre écran actuel, ce qui signifie qu’un écran de 800 x 600 peut prendre en charge la taille (1600, 300)., puisque c’est le même nombre de pixels. Cela varie énormément, vous devrez donc essayer différents modes et tailles de rendu jusqu’à obtenir ce que vous cherchez. Si vous avez besoin de quelque chose de plus grand, utilisez createGraphics pour créer une surface de dessin non visible.

 

.

.

Retour au sommaire

.

Fonction fullSceen()

Cette fonction est nouvelle pour Processing 3.0. Il ouvre une esquisse en utilisant toute la taille de l’écran de l’ordinateur. Cette fonction doit être la première ligne de setup () . Les fonctions size () et fullScreen () ne peuvent pas être utilisées dans le même programme, il suffit de choisir un.

Lorsque fullScreen () est utilisé sans paramètre, il dessine l’esquisse sur l’écran actuellement sélectionné dans la fenêtre Préférences. Lorsqu’il est utilisé avec un seul paramètre, ce numéro définit l’écran à afficher pour programmer (par exemple, 1, 2, 3 …). Lorsqu’il est utilisé avec deux paramètres, le premier définit le moteur de rendu à utiliser (par exemple, P2D) et le second définit l’écran. Le SPAN Ce paramètre peut être utilisé à la place d’un numéro d’écran pour dessiner l’esquisse sous la forme d’une fenêtre plein écran sur tous les écrans attachés, s’il en existe plusieurs.

Avant Processing 3.0, un programme en plein écran était défini avec size(displayWidth, displayHeight).

.

Retour au sommaire

.

Couleur du fond d’écran. 

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

La fonction background ()

Définit la couleur utilisée pour l’arrière-plan de la fenêtre Processing. Le fond par défaut est gris clair. Cette fonction est généralement utilisée dans draw () pour effacer la fenêtre d’affichage au début de chaque image, mais elle peut également être utilisée dans setup () pour définir l’arrière-plan sur la première image de l’animation ou si l’arrière-plan n’a besoin d’être défini qu’une seule fois.

Une image peut également être utilisée comme arrière-plan pour une esquisse, bien que la largeur et la hauteur de l’image doivent correspondre à celles de la fenêtre d’esquisse. Les images utilisées avec background () ignorent le réglage de teinte actuel () . Pour redimensionner une image à la taille de la fenêtre d’esquisse, utilisez image.resize (largeur, hauteur).

Il n’est pas possible d’utiliser le paramètre alpha de transparence avec des couleurs d’arrière-plan sur la surface de dessin principale. Il ne peut être utilisé avec un PGraphics objet et CreateGraphics () .

.

.

Retour au sommaire

.

 

Différentes formes 

 

.

Le rectangle (a,b,c,d)

Dessine un rectangle à l’écran. Un rectangle est une forme à quatre côtés avec chaque angle à quatre-vingt-dix degrés. Par défaut, les deux premiers paramètres définissent l’emplacement du coin supérieur gauche, le troisième définit la largeur et le quatrième définit la hauteur. La manière dont ces paramètres sont interprétés peut toutefois être modifiée avec la fonction rectMode () .

Pour dessiner un rectangle arrondi, ajoutez un cinquième paramètre, utilisé comme valeur de rayon pour les quatre coins.

Pour utiliser une valeur de rayon différente pour chaque coin, incluez huit paramètres. Lorsque vous utilisez huit paramètres, les quatre derniers définissent le rayon de l’arc à chaque coin séparément, en commençant par le coin supérieur gauche et en se déplaçant dans le sens des aiguilles d’une montre autour du rectangle.

Syntaxe :

  • rect ( a , b , c , d  )
  • rect ( a , b , c , d , r )
  • rect ( a , b , c , d , t1  , tr , br , bl )

 Paramétre : 

  • 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

.

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

.