Introduction à Processing [2.03]

Nota Bene : Cette article est un mise à jour de l’article du 10 Mars 2013 sur l’introduction à Processing. Il reprend les grandes lignes de l’article d’origine mais adapté aux modifications apportées dans Processing 2.0

Processing est un framework de developpement et un langage simplifié de JAVA créé par Benjamin Fry et Casey Reas au MIT Media Lab 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 et est devenu un véritable outils de production pour les designer interactif et artistes.

Actuellement à sa version 2.03, processing est devenu une véritable communauté dont chaque membre apporte sa pierre à l’édifice que ce soit dans le framework directement, à travers des librairies ou par des extensions tel que processing.js ou ruby-processing.

Si nous devions faire un rapide état des lieux des principaux langages et/ou frameworks utilisés dans le design génératif ou l’art numérique nous aurions :

  • C/C++ avec des librairies tel que OpenFramework, Cinder…
  • Java en natif ou simplifié avec Processing ou Eclipse
  • 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 visuel tel que Flash (même si son utilisation se fait rare de nos jours) ou encore Touch Designer.

Les cours d’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 à pour but d’expérimenter de nouvelles techniques de design apporter 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 (2013-2014) l’enseignement portera essentiellement sur Processing 2.03, la dernière version stable de processing.

Processing et son 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 :
1_environnement

La première, que nous appellerons « header » contient les principaux éléments d’interface à savoir les boutons permettant :

  • 1 : l’execution du code
  • 2 : Stopper l’execution du code
  • 3 : Créer un nouveau sketch
  • 4 : Ouvrir un sketch
  • 5 : Sauvegarder un sketch
  • 6 : Exporter un Sketch (en applet web ou en stand alone)
  • 7 : Sélection du mode (Java, Android, javascript… de nombreux modes sont developpé par la communauté)
  • 8 : Créer une nouvelle tab, ou nouvelle feuille de code pour ce même sketch.

La seconde zone est notre zone de code. C’est ici que nous écrivons notre sketch.

Enfin la troisième zone est notre console de debug. C’est dans cette zone que s’affichera toute les données que nous demanderons d’afficher afin de debuguer notre sketch. Cette zone permet d’obtenir des informations textuelles sur un sketch sans que celles-ci soient affichées sur notre création.

Lorsque nous faisons « Executer le Code » ou ctrl+R (cmd+R pour OSX) une nouvelle fenêtre s’affiche. C’est notre fenêtre d’exécution. C’est ici que notre code s’exécute et affiche sa traduction graphique.

Maintenant que nous avons vu l’interface nous reste à faire un tour dans la façon dont processing fonctionne. Nous n’avons fasse à nous qu’une simple zone d’écriture, or nous voulons dessiner.

Il faut donc avant tout comprendre comment processing fonctionne afin de pouvoir traduire nos visuels en design par le code.

Si nous devions faire un rapprochement avec un des logiciels que nous connaissons en graphisme alors ce serait Illustrator. En effet, tout comme illustrator, il faut savoir que processing est un environnement de dessin vectoriel.

Et tout comme illustrator (et les autres logiciels de la suite adobe) Processing possède un système de cordonnées cartésien 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.

2_environnement

Processing : les bases

Dans son écriture, un sketch processing s’articule principalement entre deux fonctions.

La première : setup(), est la fonction constructeur. Cette fonction, appelée une seule fois lors du lancement du sketch permettra de définir la taille de notre skecth, ses propriétés de rendu, de frame rate, de position….

La seconde : draw() est la boucle, c’est dans cette fonction, qui se rappelle à chaque fois que la précédente est terminée, que nous dessinerons. Par défaut processing s’exécute avec un frame rate de 6O, c’est à dire que en 1 seconde la boucle draw() se sera effectuée 60 fois.

Tout langage de programmation repose sur des notions communes à tous, tous se rapportant aux mathématiques. Il est important de maitriser ces notions de bases afin de pouvoir faire ce que l’on veut de processing et non l’inverse.

La première notion de base et la notion de variables commune à tout les langages. Une variable est un « mot clé » associé à une valeur. Cela permet de stocker en mémoire des valeurs sous un nom.

Par exemple si je place deux points de cordonnées 10, 10 et 20, 20 il me sera difficile en code de changer les coordonnées de mon deuxième point car je ne sais pas comment les appeler. Or, si je dis que mon premier point est placé en coordonnée x1, y2 et le seconde x2, y2 et que je défini par la suite x1 = 10 , y1= 10 et x2 = 20, y2 = 20 il m’est alors facile de changer la valeur de x1 en 30.

Il existe plusieurs types de variables dans processing mais nous ne commencerons ici que par les principales. Nous avons donc :

  • 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 « Cette robe est-elle rouge? » est un question demandant un réponse booleenne. « Oui elle est rouge » « non elle ne l’est pas »
  • int x = 10; est une variable renvoyant un nombre entier
  • float x = 3.141592; est une variable renvoyant un nombre décimal
  • String nom = « moi »; est une variable renvoyant une chaine de caractères, elle permet de stocker des mots.
  • char nom = « a »; est une variable ne pouvant stocker que un caractère.

La seconde notion commune 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.

  • +, , *, / 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 à un 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

  • >, <, <=, =>, == , != 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érateur ne renvoi 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

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

Enfin les dernières notions communes aux trois quart des langages et indispensable sont les structures conditionnelles et itératives.

Les structures conditionnelles permettent de comparer des valeur de d’attribuer des conditions.

Par exemple j’aimerai pouvoir marcher que si mes lacets sont fait sinon je tombe pourrai s’écrire :

En mathématique, un itération est l’action de répéter un processus. La structure itérative permet d’effectuer une suite d’opération. Très utiliser pour effectuer plusieurs actions simultanées.

Par exemple, si je désire dessiner des lignes verticales de 100 pixels de haut et ce tout les 10 pixels de large je pourrais très bien écrire :

Et ce pour autant de largeur que je veux pour mon dessins. C’est assez simple pour un dessin de 100 pixel de large mais que ce passe-t-il pour 1920 pixels de large.

Je ne vais pas écrire 1920/10, soit 192 fois la même ligne? C’est là où la structure itérative entre en action.

Elle va me permette de dire que pour une variable i égale 0 (mon départ); i toujours inférieur à 1920 (la limite de mon dessin) et i s’incrémentant de 10 pixels (cad pour i=0 puis 10, puis 20…)

alors je dessine mes lignes. Ce qui donne

Et me voila avec un dessin de 192 lignes de 100 pixels de haut espacées de 10 pixels entre elles. Bref l’itération est notre amie.

Nous venons donc de voir les bases communes aux trois quart des langages de programmation, il est grand temps d’entrer dans le vif du sujet avec les bases de processing.

Comme nous avons vu au début, processing est un dérivé du JAVA, il s’agit d’une version simplifiée de ce langage. Il nous offre donc plusieurs fonctions permettant de dessiner en quelques secondes.

Les deux premières fonctions que nous allons voir permettent de définir la taille de notre sketch, son moteur de rendu et son antialiasing.

Ces deux fonctions seront appelées dans le setup() de notre sketch.

Nous savons que processing est un environnement vectoriel mais de base il va tenter d’économiser un maximum de mémoire. C’est la raison pour laquelle il possède différents moteurs de rendu permettant de dessiner avec plus ou moins de lissage ou seulement en 2D ou avec de la 3D. Processing 2 possède 2 moteurs de rendus (basés sur OpenGL) :

P2D – moteur de rendu de processing pour des dessins 2D.

P3D – moteur de rendu 3D de processing.

Même si nous avons appelé un moteur de rendu performant (2D ou 3D) nous nous rendrons compte que notre ligne reste pixelisée. Cela parce que nous devrons appeler l’antialiasing afin de lisser notre dessin.

Voici donc comment ces fonctions vont s’écrire :

Les prochaines fonctions que nous verrons sont des fonctions de dessins.

background(valeur, valeur, valeur) permet de définir la couleur de notre fond.

Attardons-nous un peu sur cette fonction.Celle-ci est assez particulière car il s’agit d’une fonction permettant de libérer de la mémoire. Nous le savons, notre code se lit successivement en boucle. Cela veut dire que processing va dessiner 25 fois par seconde. Imaginons un sketch de 710*200 où nous dessinerons un cercle de taille 20 à la position de la souris et ce sans background :

ixd_processingIntro_00

lors de l’exécution nous remarquons qu’au fur est à mesure les cercles que nous dessinons restent sur scène et forment une trainée. Nous savons que processing exécute la boucle draw 25 par seconde, or cette boucle dit de dessiner un cercle à la position de la souris. Il est donc logique que en 1 seconde j’ai 25 cercles, en 2seconde 50 et ainsi de suite…. Au bout d’un moment notre ordinateur va se mettre à chauffer et c’est normal car nous demandons pas mal de calculs.

C’est là que la fonction background entre en fonction. En insérant un background (noir par exemple) dans mon draw, je demande a processing d’effacer tout les cercle précédents sur scène pour n’afficher que celui de la boucle actuelle. Cela aura pour effet de nettoyer la mémoire de processing.
Cela nous donnera :

ixd_processingIntro_01

Pour écrire un background dans ma boucle draw j’utiliserai la syntaxe suivante :

Attardons nous un peu sur ces « valeurs » entre parenthèse. Processing me demande 3 valeurs pour définir la couleur de mon fond. Par défaut processing fonctionne en RVB, c’est à dire qu’il chaque couleurs est définie par ces valeurs rouge, verte et bleu, chacune d’entre-elles étant définie entre 0 et 255.

Ainsi background(0, 0, 0) sera noir alors que background(255, 0, 0) sera rouge.

Il faut aussi savoir que processing permet de simplifier son code. Ainsi si nous mettons background(0) processing comprendra que nos 3 valeurs seront égales à 0

Entrons maintenant plus en détail dans les outils de dessin. Processing va nous permettre de dessiner ce que l’on veut mais il nous offre aussi des fonctions pour dessiner des formes géométriques simples. Ainsi nous avons :

Enfin, pour terminer ce chapitre d’initiation sur processing regardons un peu les deux éléments de base qu’il nous manque pour faire notre premier dessin.

Nous avons vu les notions de base communes aux trois quarts des langages, nous avons vu les deux fonctions de base de processing setup() et draw() permettant de définir notre skecth et de dessiner à l’intérieur. Nous avons aussi vu comment définir la taille de notre sketch, son moteur de rendu, son antiliasing et comment dessiner un fond et des formes simples. Autrement dis il ne nous manque que de la mise en forme de ces dessins, à savoir comment définir leurs couleurs de fond et/ou de contour.

Pour cela processing nous met à disposition deux fonctions :

Mais que ce passe-t-il dans le cas où je veuille avoir un fond ou un contour avec de l’alpha? Qu’à cela ne tienne, processing à tous prévu. Il nous suffira d’ajouter une quatrième valeur à notre fill() ou notre stroke. Nous aurons ainsi défini des valeurs en RVB+Alpha. Mais n’oublions pas une chose, processing fonctionne sur des valeurs RGB de 0 à 255, il en va de même pour l’alpha. Ainsi un alpha de 50% correspondra à la valeur 255/2 soit 127.

enfin dans le cas où je ne veuille pas mettre de fond ou de contour à mon dessin il nous suffira d’écrire l’une des fonctions suivante : noFill() ou noStroke();

Nous avons donc vu toute les bases de processing pour effectuer notre premier skecth. Profitons en alors pour faire notre premier dessin en utilisant ce que l’on connait.

Nous allons dessiner une sketch de 710*500, contenant un grille de point espacer de 10 pixels chacun et avec un cercle de 100 pixel de diametre sans contour et de remplissage blanc à 50% d’alpha.

Cela nous donne donc

ce qui nous donnera :

ixd_processingIntro_02

Une réflexion au sujet de « Introduction à Processing [2.03] »

Les commentaires sont fermés.