Introduction à Processing [3.0]

Processing est un langage de programmation open source basé sur JAVA et un IDE (integrated development environment) créé par Ben Fry et Casey Reas en 2001. Leur projet était de créer un langage simple, destiné aux graphistes et artistes, afin de répondre à certains de leur besoins tel que la visualisation de données ou la production de visuels génératifs. Processing est le prolongement « multimédia » de Design by Numbers, l’environnement de programmation graphique développé par John Maeda au MIT Media Lab.

Processing a bien évolué depuis sa création en 2001. S’il est toujours un véritable outils de production pour les artistes et designers interactifs il est également une plateforme d’apprentissage de la programmation à destination de l’éducation. Lors de sa conférence à Eyeo 2015, Casey Reas présenta notamment l’évolution de Processing mais également le developpement de la Fondation Processing autour de nouveaux outils tel que P5.js et Processing.py.

Processing est basé sur JAVA, rendant ainsi le langage plus facile d’accès par le biais d’une syntaxe simple sans pour autant simplifier JAVA, cela permet notamment d’accéder à l’ensemble de possibilités offertes par JAVA. Il intègre également OpenGL permettant ainsi d’accéder à de plus grandes capacités graphiques dans le traitement d’éléments 2D et 3D.

Si nous devions faire un rapide état des lieux des principaux langages utilisés dans le design génératif ou l’art numérique en règle générale nous aurions :

  • C/C++ avec des librairies tel que OpenFramework, Cinder…
  • Java en natif ou via Processing
  • Javascript en natif ou via des frameworks tel que Angular.js, Tree.js, Backbone.js…
  • Les langages de type nodal avec VVVV, Max MSP/Jitter ou Pure Data

Il existe évidement de nombreux autres langages utilisés dans l’expérimentation interactive et visuelle tel que Flash (même si son utilisation se fait rare de nos jours) ou encore Touch Designer.

Les cours de l’option «Digital Lab» à e-art sup Paris porteront sur les expérimentations visuelles et interactives, qu’elles soient sur écran ou hors écran et ce à travers l’utilisation de Processing. Cette option a pour but d’expérimenter de nouvelles techniques de design apportées par le design par le code et de sortir des techniques habituelles de conception. Il sera une initiation à l’expérimentation interactive et aux cours de développement interactif apportés par la filière Design Interactif d’e-art sup.

Cette année (2015-2016) l’enseignement portera essentiellement sur Processing 3.0, la dernière version stable de Processing.

Introduction et nouveautés

Septembre 2015 a vu la sortie de la version 3.0 de Processing. Cette nouvelle version offre sans doute l’un des plus grands changements de Processing, son IDE devient plus développé et sa base a été repensé. Cet article s’adresse aussi bien aux néophytes qu’aux personnes utilisant déjà Processing. Nous couvrirons aussi bien les bases du langage que ses nouveautés. Afin d’être plus accessible à tout le monde, les paragraphes traitant des nouveautés et d’informations nécessitant une plus grande connaissance du langage seront marqués du signe § orange.

§ Parmi les grands changements de Processing 3.0 nous noterons :

  • La reconstruction du moteur de rendu OpenGL (2D et 3D) aujourd’hui plus rapide et sans saccade. On note également l’apparition d’un nouveau moteur de rendu, le Java FX2D.
  • La création d’un nouvel éditeur comportant :
    • Une numérotation des lignes
    • La possibilité d’utiliser de l’autocomplétion
    • L’ajout d’un debugger simple (temps réel) et avancé
    • L’ajout du TweakMode en natif (souffre encore de quelques bugs sous windows 7, 8, 8.1 et 10)
  • Le support des résolutions retina via les méthodes pixelDensity() et displayDensity()
  • Le retrait de l’utilisation de variables avec la méthode size(). Il est toujours possible de changer la taille du programme via la méthode surface.setSize(w, h)
  • L’objet frame devient l’objet surface
  • La réécriture de l’objet PApplet. De part ce changement de nombreux sketch et librairies risquent de ne pas être compatible de processing 2.0 à processing 3.0. Beaucoup ont déjà été mis à jour pour Processing 3.0
  • L’ajout d’une méthode fullScreen() simplifiant la création d’un programme plein écran et offrant la possibilité d’explorer le multi-screen.
  • L’objet PVector supporte désormais la désignation chaînée
  • L’ajout de l’export SVG

Pour plus d’informations sur les changements de Processing 3.0 je vous invite à explorer la liste présente sur le GitHub du projet ou à regarder la vidéo de présentation de Daniel Shiffman.

L’environnement

En tant que Graphiste, l’interface de Processing peut paraitre un peu “aride” lors de son premier lancement. En effet nous sommes tous des habitués de Photoshop et ce qui se rapproche le plus du code pour nous reste Flash avec son interface proche du tableau de bord d’une formule 1. Et comme pour Photoshop ou la formule 1 il va nous falloir comprendre l’interface avant de se lancer dans la production.

L’interface de Processing peut se découper en trois zones :

  • La zone d’outils permettant d’exécuter ou stopper le programme et donnant accès au menu.
  • L’éditeur de texte où sera écrit le code.
  • La zone de console affichant les messages et les erreurs.

processing_interface_00

Trois autre fenêtres vont également nous être utile régulièrement à savoir :

  • La fenêtre Exemple regroupant les exemples fournis avec Processing ou importés avec les librairies
  • La fenêtre Sketchbook regroupant l’ensemble de nos créations et pouvant être paramétrée dans la fenêtre Préférences
  • La fenêtre Préférences regroupant l’ensemble des préférences du logiciel à savoir
    • L’emplacement du dossier sketchbook
    • La langue
    • Police utilisée dans l’éditeur et la console ainsi que leurs tailles respectives
    • La couleur d’arrière plan du mode présentation
    • Le lissage des polices
    • La saisie des caractères non latin
    • La détection des erreurs et affichage des avertissements
    • Utilisation de l’auto-complétion
    • Suggestion des imports
    • L’augmentation de la mémoire vive allouée (par défaut 256Mb)
    • Effacer le dossier précédent lors de l’export (évitant ainsi les nombreux fichiers issus de multiples exports)
    • Vérification des mises à jour au démarrage
    • Taille par défaut du fullscreen
    • Ouvrir tout les fichiers .pde avec processing

processing_interface_01

Dans la fenêtre préférences nous vérifierons que les éléments suivant sont actif :

  • Détecter les erreurs en continu
  • Afficher les avertissements
  • Autocomplétion du code ctrl+espace
  • Augmenter la mémoire vive disponible (augmenter la mémoire en fonction de la quantité de RAM dont vous disposez)

L’espace cartésien

Une fois l’interface appréhendée il est important de connaître la manière dont un programme gère son espace afin de pouvoir y dessiner. Si nous devions faire un rapprochement avec des logiciels que nous connaissons en graphisme cela serait les logiciels de la suite Adobe. Tout comme illustrator, par exemple, Processing possède un système de cordonnées cartésiennes qui nous permet de situer un point dans l’espace (x, y, z). Enfin, tout comme les logiciels que nous connaissons en design, l’origine de ce repère cartésien se trouvera en haut à gauche de notre fenêtre d’exécution.

processing_interface_02

Ainsi pour un programme d’une taille de 800 × 600 pixels, si je dessine un point rouge à la position 750 × 550, un point vert à la position 50 × 50 et un point bleu à la position 400 × 300; ces derniers seront respectivement en bas à droite, en haut à gauche et au centre du programme.

processing_interface_03

La structure du code

Tous programme se base sur un code écrit qui sera ensuite lu/exécuté ligne par ligne. Créer un programme est donc un acte d’écriture, il est donc important de connaître la manière dont le programme lit le code ainsi que la structure de celui-ci.

Les commentaires

Les commentaires sont des lignes de textes ignorées par le programme lors de son exécution. Ils sont à destination du ou des créateurs du programme et permettent de le commenter ou de laisser des notes souvent utiles afin de s’y retrouver. Ils sont notamment utiles lorsque l’on reprend un programme datant de quelques mois ou créé par un autre créateur et dont certaines fonctionnalités sont relativement complexes. Ils sont la syntaxe suivante :

Les déclarations

Les déclarations sont les lignes lues par le programme. Elles composent le programme et ses fonctionnalités. Elles peuvent être assimilées à une phrase dans le langage. Comme pour une phrase dans la langue française, il est important d’indiquer à une déclaration qu’elle se termine pour laisser place à une nouvelle déclaration. Si nous utilisons des points pour clôturer nos phrases, dans Processing — comme dans de nombreux autres langages — une déclaration devra se terminer par un point virgule ;. Cela s’explique par l’utilisation du point qui en mathématique permet d’indiquer la présence d’une décimale. Ainsi pour écrire la phrase suivant x est égale à un plus un cela se traduira par :

Les fonctions

Les fonctions — ou méthodes— sont des regroupements de déclarations. Elle permettent notamment d’exécuter une suite de déclarations et sont donc des raccourcis extrêmement pratique. Elles sont reconnaissable par leur forme utilisant un nom — en bas de casse généralement — suivi de parenthèses de la manière suivante :

Les parenthèses d’une fonctions permettent de passer à celle-ci différents paramètres qui seront utilisés par la suite de déclarations présente dans la fonction. Processing possède un grand nombre de fonctions. L’exemple suivant montre la fonction permettant de définir la taille d’un programme de 250 × 500 pixels :

§ Il existe également des fonctions dites de retour. Il s’agit de fonctions dont les déclarations contenues ont pour objectif de renvoyer un résultat sous la forme d’une variable ou d’un objet. Par défaut toute fonction est une fonction de retour, cependant les fonctions de donnant pas résultat mais effectuant une action sont des fonctions dite void, ou ne renvoyant aucun élément. Dans l’exemple suivant, la fonction calcul() permet d’obtenir le résultat du calcul suivant : 1+1. Elle renverra donc une variable et s’utilisera de la manière suivante :

§ Comme vu précédent il est également possible de passer à une fonction de retour des paramètres afin que ceux-ci soit utilisés dans la suite de déclarations contenue dans la fonction. Dans l’exemple suivant, la fonction calcul(int x, int y) permet d’obtenir le résultat du calcul suivant : x+y ou x et y sont des entiers.

§ La création d’une fonction se fait de la manière suivante :

§ Le type présent en début de phrase correspond au type de résultat renvoyé par la fonction. Il peut être de type :

  • void
  • boolean
  • int
  • float
  • char
  • String
  • color
  • Objet

§ Le type void est un type de fonction spécial ne renvoyant rien et effectuant uniquement la suite d’instructions. Sa création se passera donc de la déclaration return.

§ À la suite du type de la fonction se trouve le nom de celle-ci suivi de parenthèses permettant d’accueillir des paramètres si nécessaire. Le nombre de paramètres n’est pas limité, il est également possible de ne pas en mettre si la fonction n’en a pas l’utilité. Afin de marquer le début et la fin de la fonction, sa suite de déclarations devra être précédée par une  accolade ouverte { et suivi d’une accolade fermée }. Enfin, toute méthode renvoyant un résultat devra se terminer par la déclaration suivante return leResultat avant l’accolade fermée marquant la fin de la fonction. Ainsi la fonction permettant de calculer le résultat de x*y, où x et y sont des nombre décimaux, s’écrira de la manière suivante :

Utilisation de la casse

Lorsque nous écrivons une phrase nous utilisons des bas de casse, des capitales et des espaces. Cela nous permet d’identifier certains mots ou nom mais également de se repérer à l’intérieur de la phrase. Dans de nombreux langages de programmation nous retrouvons également l’utilisation de la capitale et de la bas de casse.

Ainsi dans Processing les noms de variables, leurs types et les fonctions utilisent des bas de casse. Nous aurons donc :

L’utilisation des capitales se fait dans la déclaration d’un objet (ou classe). Par exemple, lorsque je déclare un objet de type String, le type de l’objet prendra une capitale à sa première lettre, son nom de variable quant à lui restera en bas de casse. Nous noterons ici que l’objet String est un objet réunissant des variables de type char une chaîne de caractères étant composée de caractères.

La capitale peut également être utilisée dans les noms des variables ou fonctions afin d’indiquer un espace à la lecture du nom. Cela est notamment utile lorsque nous créons des variables aux noms très descriptif. En effet il sera plus facile de lire angleDeRotationSurAxeX que anglederotationsuraxex. Nous noterons cependant que la première lettre de la variable ou de la fonction restera en bas de casse, l’utilisation de la capitale pour la première lettre étant réservée à la déclaration d’un objet comme vu plus haut.

La structure d’un programme

Un programme se compose généralement de deux fonctions globales nécessaire à son fonctionnement. La première est la fonction permettant d’initialiser le programme. Il s’agit de la première fonction que lira le programme et qui ne sera exécutée qu’une seule fois. Celle-ci permet notamment de définir la taille du programme, son moteur de rendu — 2D ou 3D — ou de définir des variables.
La seconde fonction est la boucle. Il s’agit d’une fonction qui s’exécute en boucle, permettant ainsi de rafraichir l’affichage du programme et d’exécuter les opérations successivement.

Dans Processing la fonction permettant d’initialiser le programme est la fonction setup(). La fonction permettant d’exécuter le programme en boucle est la fonction draw(). Par défaut, cette dernière s’exécute 60 fois par seconde. Ainsi si je souhaite réaliser un programme affichant le nombre de frames écoulées et de taille 250 × 250 j’écrirai :

La grammaire du code

Les variables

La variable est un concept de base de la programmation, il s’agit d’un mot-clef associé à une valeur. Les variables permettent ainsi de nommer des valeurs. Nous utilisons également des variables dans la vie de tout les jours, par exemple chaque personne possède un nom et prénom qui permet de l’identifier. Il en est de même en programmation où nous pouvons nommer la coordonnée x d’une ellipse ellipseCoordX. Il sera alors plus facile d’appeler cette variable par son nom.

Processing possède plusieurs type de variables permettant ainsi de reconnaitre rapidement s’il s’agit d’un nombre entier, d’un nombre décimal ou d’un caractère. Nous pouvons compter parmi ces variables :

  • boolean etat = true; Variable de type boolean (ou binaire), il s’agit d’une variable ne pouvant renvoyer que deux valeurs : Vrai/Faux. Elle permet de faire des comparaisons. Par exemple la réponse à la question “Cette robe est-elle rouge?” est une booléenne car elle ne peut être que vrai ou faux : “Oui elle est rouge” “non elle ne l’est pas”
  • int x = 10; est une variable de type nombre entier (0, 1, 2,  3…)
  • float x = 3.141592; est une variable de type nombre décimal (0.001, 0.002, 0.003…)
  • String nom = “moi”; est un objet renvoyant une chaine de caractères, elle permet de stocker des mots. Il ne s’agit pas à proprement parler d’une variable cependant nous la considérerons comme telle.
  • char nom = “a”; est une variable de type caractère
  • color couleur = color(255, 255, 255); est une variable de type couleur

Les opérateurs (opérations, assignations, relationnels et logiques)

La seconde notion importante en programmation est la notion d’opérateurs. Ils permettent d’effectuer divers calculs ou comparaisons. Nous sommes ici dans des notions de bases des mathématiques. Nous avons différents types d’opérateurs.

Les opérateurs arithmétiques  :

  • +, , *, / qui permettent d’addition, soustraire, multiplier ou diviser des valeurs.
  • % le modulo qui permet de connaitre la valeur d’un reste d’une division (valeur résiduelle) par exemple 17%3 = 2 car 2 est le reste de la division de 17/3

Les opérateurs d’assignation :

  • = permet d’attribuer une valeur à une variable
  • +=, -=, *=, /= permettent d’incrémenter, soustraire, multiplier ou diviser des valeurs par exemple x = x+1 est la même chose que x +=1;

Les opérateurs relationnels (s’utilisant dans le cadre des structures itératives et conditionnelles)

  • >, <, <=, =>, == , != permettent de comparer deux valeurs afin de savoir si celles-ci sont supérieur, inférieur, supérieur ou égale, inférieur ou égale, égale ou différentes. Ces opérateurs ne renvoient que des valeurs booléennes, c’est à dire vrai ou faux. Par exemple 1 == 2 renverra la valeur “false” car 1 n’est pas égale à 2;

Les opérateurs logiques (s’utilisant dans le cadre des structures itératives et conditionnelles)

  • &&, || permettent d’effectuer des opérations booléennes de type ET et OU.

Des variables spécifiques à Processing

Processing possède également différentes variables pré-écrites permettant d’accéder à différentes valeurs numérales ou booléennes tel que :

  • width; Variable renvoyant la largeur du programme déclarée dans la fonction size() lors de l’initialisation du programme.
  • height; Variable renvoyant la hauteur du programme déclarée dans la fonction size() lors de l’initialisation du programme.
  • mouseX; Variable renvoyant la position actuelle sur l’axe X de la souris.
  • mouseY; Variable renvoyant la position actuelle sur l’axe Y de la souris.
  • pmouseX; Variable renvoyant la position précédente — à la frame précédente — sur l’axe X de la souris.
  • pmouseY; Variable renvoyant la position précédente — à la frame précédente — sur l’axe Y de la souris.
  • mousePressed; Variable de type booléenne indiquant si la souris est cliquée (true) ou non cliquée (false).
  • mouseReleased; Variable de type booléenne indiquant si le clique de la souris a été relâché (true) ou non (false).
  • keyPressed; Variable de type booléenne indiquant si une touche du clavier est appuyée (true) ou non (false).
  • keyReleased; Variable de type booléenne indiquant si une touche du clavier appuyée a été relâché (true) ou non (false).
  • frameCount; Variable renvoyant le nombre de frames écoulées.
  • frameRate; Variable renvoyant le nombre de frames par seconde à laquelles s’exécute le programme.

Des méthodes spécifiques à Processing (création, dessin, définition des couleur…)

Nous l’avons vu précédemment, Processing est un langage simplifié de JAVA permettant notamment d’accéder à de nombreuses fonctions de dessins pré-écrites plus rapidement. C’est cette approche qui en fait un langage d’apprentissage et de prototypage idéal pour les artistes, créateurs et graphistes. Parmi ces fonctions nous pouvons compter :

Les fonctions de création, celles-ci sont appelées dans la fonction setup() lors de l’initialisation du programme :

  • size(int largeur, int hauteur); Fonction permettant de définir la largeur et hauteur du programme.
  • size(int largeur, int hauteur, moteur); Fonction permettant de définir la largeur, hauteur et moteur de rendu du programme (P2D, P3D, PDF, FX2D).
  • smooth(int niveau); Fonction permettant de définir le niveau antialiasing. Par défaut l’antialiasing est activé. Le niveau de l’antialiasing peut être 2, 3, 4 ou 8 en fonction du moteur de rendu.
  • fullScreen(); Fonction permettant de définir la taille du programme en fullscreen.
  • fullScreen(int ecran); Fonction permettant de définir la taille du programme en fullscreen et de choisir l’écran sur lequel l’exécuter lorsqu’on possède plusieurs écrans (1, 2, 3 ou plus en fonction de son nombre d’écran). Nous noterons que l’utilisation de SPAN à la place du numéro de l’écran permet d’exécuter le programme réparti sur l’ensemble des écrans disponibles.
  • fullScreen(moteur); Fonction permettant de définir la taille du programme en fullscreen et de choisir le moteur de rendu (P2D, P3D, PDF, FX2D).
  • fullScreen(int ecran, moteur); Fonction permettant de définir la taille du programme en fullscreen, de définir son moteur de rendu (P2D, P3D, PDF, FX2D) et de choisir l’écran sur lequel l’exécuter lorsqu’on possède plusieurs écrans (1, 2, 3 ou plus en fonction de son nombre d’écran). Nous noterons que l’utilisation de SPAN à la place du numéro de l’écran permet d’exécuter le programme réparti sur l’ensemble des écrans disponibles.

Les fonctions de dessin permettant de dessiner des formes géométriques prédéfinies en 2D ou 3D :

  • point(float x, float y); Fonction permettant de dessiner un point dans un espace 2D.
  • point(float x, float y, float z); Fonction permettant de dessiner un point dans un espace 3D.
  • line(float x1, float y1, float x2, float y2); Fonction permettant de dessiner une ligne dans un espace 2D.
  • line(float x1, float y1, float z1, float x2, float y2, float y3); Fonction permettant de dessiner une ligne dans un espace 3D.
  • triange(float x1, float y1, float x2, float y2, float x3, float y3); Fonction permettant de dessiner un triangle dans un espace 2D.
  • quad(float x1, float y1, float x2, float y2, float x3, float y3, float x4, float y4); Fonction permettant de dessiner un quadrilatère dans un espace 2D.
  • rect(float x, float y, float largeur, float hauteur); Fonction permettant de dessiner un rectangle dans un espace 2D.
  • ellipse(float x1, float y1, float largeur, float hauteur); Fonction permettant de dessiner une ellipse dans un espace 2D.
  • box(float taille); Fonction permettant de dessiner un cube dans un espace 3D.
  • box(float largeur, float hauteur, float profondeur); Fonction permettant de dessiner un parallélépipède dans un espace 3D.
  • sphere(float rayon); Fonction permettant de dessiner une sphère dans un espace 3D.
  • text(char caractere, float x, float y); Fonction permettant de dessiner un caractère dans un espace 2D.
  • text(char caractere, float x, float y, float z); Fonction permettant de dessiner un caractère dans un espace 3D.
  • text(String mot, float x, float y); Fonction permettant de dessiner une chaîne de caractères dans un espace 2D.
  • text(String mot, float x, float y, flaot z); Fonction permettant de dessiner une chaîne de caractères dans un espace 3D.

Les fonctions de remplissage permettant de définir la couleur de remplissage et de contour.

  • colorMode(mode, int max1, int max2, int max3); Fonction permettant de définir le mode colorimétrique utilisé. Le mode peut être RVB (rouge, verte bleu) ou HSB (teinte, saturation, luminosité). Par défaut Processing est en mode RVB .
    Les valeurs max correspondent aux valeurs maximum des trois composants. Lorsque nous travaillons en teinte, saturation et luminosité nous travaillons la teinte de 0 à 360°, la saturation et luminosité sont quant à elles travaillées de 0 à 100%. Nous écrirons alors :

    Dans le cas du mode colorimétrique RVB  nous savons que nos valeurs rouges, vertes et bleues seront comprises entre 0 et 255, nous écrirons alors :

    Il est également possible de définir la manière dont nous souhaitons traiter l’opacité; de 0 à 100% ou de 0 à 255. Pour cela nous rajouterons un quatrième paramètre au mode colorimétrique afin de définir la façon dont l’opacité sera traitée :

     
  • background(float rouge, float vert, float bleu); Fonction permettant de définir la couleur de fond du programme en RVB (ou HSB). On notera que les valeurs RVB sont comprises entre 0 et 255.
    Il est important de noter que sans couleur de fond, le programme dessinera en sur-impression, c’est à dire que les dessins effectués aux frames précédentes seront toujours visible en dessous du nouveau dessin. Cela reviendrait, dans Photoshop, à dessiner sur plusieurs claques superposés. La fonction background() a donc pour rôle «d’effacer» les dessins effectués aux frames précédentes.

    ixd_processingIntro_00
    Lorsque je dessine, à chaque frame, un cercle à la position de ma souris sans utiliser la fonction background() je remarque que les dessins se superposent au fil du temps.

    ixd_processingIntro_01
    Si pour ce même code j’utilise la fonction background(), alors je dessinerai un fond entre chaque frame. Les dessins des frames précédentes seront effacés et je verrai alors mon cercle se déplacer.
  • fill(float rouge, float vert, float bleu); Fonction permettant de définir la couleur de remplissage d’une forme en RVB (ou HSB). On notera que les valeurs RVB sont comprises entre 0 et 255.
  • fill(float rouge, float vert, float bleu, float opacité); Fonction permettant de définir la couleur de remplissage d’une forme en RVB (ou HSB) + Alpha. On notera que les valeurs RVB et Alpha sont comprises entre 0 et 255.
  • stroke(float rouge, float vert, float bleu); Fonction permettant de définir la couleur de contour d’une forme en RVB (ou HSB). On notera que les valeurs RVB sont comprises entre 0 et 255.
  • stroke(float rouge, float vert, float bleu, float opacité); Fonction permettant de définir la couleur de contour d’une forme en RVB (ou HSB) + Alpha. On notera que les valeurs RVB et Alpha sont comprises entre 0 et 255.
  • strokeWeight(float epaisseur); Fonction permettant de définir l’épaisseur d’un contour.

Pour rappel, nous savons que notre programme s’exécute de la première à la dernière ligne, de haut en bas. Ainsi je devrai définir la couleur d’une forme avant que celle-ci soit dessiné de la manière suivante :

Il existe évidement de nombreuses autres fonctions de dessin permettant de dessiner des courbes de Bézier, des courbes de Catmull-Rom ou encore des réaliser ses formes personnalisées. Je vous invite à les découvrir parmi les références présentes sur le site processing.org.

Les moteurs de rendu

Comme de nombreux autres langages de programmation, Processing possède différents moteurs de rendu. Un moteur de rendu permet de définir la manière dont le programme dessinera. Il peut être en 2D ou 3D. Comme vu plus haut, le moteur de rendu se défini dans la fonction size() . Dans Processing nous avons différent moteurs de rendu tel que :

  • JAVA2D : moteur de rendu 2D JAVA. Il s’agit du moteur de base de Processing.
  • P2D : moteur de rendu 2D utilisant OpenGL.
  • P3D : moteur de rendu 3D utilisant OpenGL.
  • PDF : moteur de rendu PDF.
  • FX2D : moteur de rendu 2D JAVA accéléré.

Aides

Autocomplétion

L’autocomplétion est la capacité pour un élément donné de se compléter de manière automatique. Il s’agit d’une des nouveautés de Processing 3.0. Une fois activée — via la fenêtre Préférences — elle permet à Processing de vous proposer la suite des éléments (ou paramètres) à écrire dans une fonction. Cela est très utile lorsqu’on ne se rappel plus des paramètres à passer dans une fonction. Pour l’utiliser, il nous suffit d’utiliser la commande CTRL+ESPACE lorsque nous écrivons notre fonction.

Ici, via la commande CTRL+ESPACE, Processing me rappel les paramètres possibles que peut prendre la fonction line().
Via la commande CTRL+ESPACE, Processing me rappel les paramètres possibles que peut prendre la fonction line().

Détection et correction des erreurs

La détection des erreurs en programmation est un élément extrêmement important. Qui n’a jamais été frustré par ce code de 4000 lignes qui refuse de compiler suite à un oublie de point virgule ou à une parenthèse manquante parmi ces lignes. La version 3.0 de Processing propose désormais des outils simple permettant de détecter ces erreurs mais également de nous indiquer où elles se trouvent.

Le premier outils pratique est la détection en continu des erreurs. Un fois activé dans la fenêtre Paramètres, il nous permet de détecter des erreurs durant l’écriture et de les indiquer dans la zone de message. Ainsi lorsque j’écris : background(255) la zone de message m’indiquera le message suivant : «Missing a semicolon « ; »» ou «Point virgule manquant». Par ailleurs la ligne où se trouve mon erreur sera indiquée à droite par un trait rouge et l’erreur en elle même sera souligné en rouge dans le code. Je pourrai alors aisément corriger mon erreur.

continousErrors

La zone de message n’indiquant que la dernière erreur je peux également accéder à la liste complète des erreurs via l’onglet Erreurs situé en dessus de la console. Dans cet onglet je découvre alors la liste complète des erreurs détectées ainsi que leurs lignes et les onglets dans lesquelles elles se trouvent. Je peux par un simple clique sur une ligne de l’onglet d’erreur, surligner la ligne comportant l’erreur en question et ainsi la corriger.

consoleError

§ L’onglet Erreurs me permet également de mettre en évidence des avertissements si cette option a été activé via la fenêtre de Préférences. Un avertissement n’est pas une erreur, il n’empêchera pas le code de compiler. Il s’agit d’avertissement concernant l’optimisation du code, notamment lorsqu’on déclare des variables qui ne sont pas utilisées dans la suite du code. En effet chaque variable déclarée prend une certaine place dans la mémoire allouée au programme, il est donc recommandé de ne pas déclarer des variables qui ne seront pas utilisée.

Les avertissement apparaissent dans l’onglet Erreurs sous la forme de pastilles oranges. Au clique sur la ligne le message d’avertissement apparait indiquant ainsi de quel type d’avertissement il s’agit.

warning

Pour aller plus loin

Si vous souhaitez approfondir la découverte de Processing et de ses nouveautés je vous invite à consulter les références suivante :