Sites


PROCESSING - 2

Les bases de Processing

Processing propose à la fois un environnement de création complet et un ensemble de fonctionnalités supplémentaires qui viennent enrichir les possibilités du logiciel. Cet environnement permet d'écrire des programmes (appelés sketchs dans Processing), de les convertir en fichiers autonomes, de les publier ainsi que d'identifier et de corriger les erreurs. Il contient les fonctions essentielles à la programmation tout en étant simple d'utilisation.

Processing est basé sur le langage Java. C'est cette syntaxe qui sera utilisée lorsque vous allez programmer. Processing vous facilite la maîtrise de ce langage en se chargeant de manière transparente des opérations relativement complexes comme gérer les fenêtres, le son, la vidéo, la 3D et bien d'autres choses encore. Ce logiciel propose une large palette de fonctionnalités prédéfinies qui simplifie la conception de programmes créatifs, notamment pour les personnes ne maîtrisant pas les notions complexes de programmation et de mathématiques.

Ce chapitre vous présente les bases de l'interface de Processing et les notions minimales de la syntaxe Java à connaître pour bien débuter.

A ce jour, l'interface de Processing propose une interface d'application en français même si les messages d'erreurs restent pour l'instant en anglais. 

L'interface

L'interface d'utilisation de Processing est composée de deux fenêtres distinctes : la fenêtre principale dans laquelle vous allez créer votre projet et la fenêtre de visualisation dans laquelle vos créations (dessins, animations, vidéos) apparaissent.

On trouve plus précisément les éléments suivants dans l'interface :

  1. Barre d'actions
  2. Barre d'onglets
  3. Zone d'édition (pour y saisir votre programme)
  4. Console, qui comprend un onglet les messages affichés par programme un onglet pour les erreurs. Cette console indique aussi si des mises à jour (« updates ») sont disponibles pour les librairies et les modes. 
  5. Fenêtre de visualisation (espace de dessin)
  6. Liste déroulante pour les modes
  7. Bouton pour activer le mode debug (pas à pas)

 

 

Barre d'actions

Bouton "Run" : exécute votre sketch (votre programme).

 Bouton "Stop" : arrête l'exécution de votre sketch.

Processing permet de travailler dans plusieurs modes, un mode permettant de programmer dans un environnement spécifique à chaque plateforme visée (ex : application, application pour tablette Android, ...). Ces modes peuvent être gérés depuis une interface spécifique, le « Contribution Manager ».

Vous pouvez changer ce mode à tout moment depuis l’interface, en ayant au préalable sauvegardé votre sketch. Pour plus d’informations sur le rôle des modes dans Processing, veuillez consulter le chapitre à ce sujet. 

Le dossier de travail

C'est le dossier dans lequel seront enregistrés les sketchs et les librairies (des modules externes proposant des fonctionnalités supplémentaires). Par défaut ce dossier se nomme Processing et se trouve dans Documents (sous Mac) ou Mes Documents (sous Windows). Sous GNU/Linux, il est dans votre dossier personnel sous le nom de sketchbook.

Pour modifier ce dossier, allez dans le menu Processing > Préférences. Dans la boîte de dialogue qui apparaît, cliquez sur Naviguer pour choisir le dossier qui vous convient.


A tout moment, pour savoir quel est votre dossier de travail, sélectionnez, dans le menu Sketch > Afficher le dossier. Cette option est également accessible via le raccourci ctrl-k sous Windows/Linux ou cmd-k sur Mac.

Bases du langage

Processing utilise le langage Java pour créer vos programmes. Ce langage, qui va être lu par votre ordinateur après avoir cliqué sur le bouton de lancement du sketch, possède un certain nombre de règles de syntaxe qui si elles ne sont pas respectées empêcheront l'exécution correcte du programme. Il y a aussi un certain nombre de concepts de base nécessaires à connaître.

Majuscules et minuscules

Processing est sensible à la casse, il fait la différence entre les majuscules et les minuscules : libre est différent de Libre !

Le point virgule

A la fin de chaque instruction (dessiner un cercle, effectuer un calcul, etc.), vous devez mettre un « ; » afin de signaler à l'ordinateur la fin de l'instruction. Dans l'exemple ci-dessous, on utilise les caractères « // » pour insérer un commentaire qui sera ignoré lors de l'exécution (la présence de commentaires dans votre programme facilite sa compréhension ultérieure).

//Dessine un cercle
ellipse(10,10, 10, 10);

//Crée une variable
int chiffre = 10 + 23;

Appels de fonctions

Processing propose un grand nombre de fonctionnalités prédéfinies appelées méthodes : dessiner un rectangle, définir une couleur, calculer une racine carrée, etc. Ces méthodes ont chacune un nom spécifique. Pour faire appel à elles, il suffit de taper leur nom en respectant les majuscules et minuscules et de coller des parenthèses après le nom : parfois on doit préciser certaines valeurs à l'intérieur des parenthèses (couleur, position, taille, etc.). L'exemple ci-dessous affiche un cercle gris.

firstApp

fill(128);
ellipse(50, 50, 60, 60);

Affichage dans la console

La console (la zone 4 dans le schéma de l'interface présenté en début de ce chapitre) permet d'afficher du texte brut à des fins de test et de débogage (correction d'erreurs). Pour afficher quelque chose dans cette zone, il faut utiliser la méthode println();

println("Salut tout le monde!");

hello1

println(1000);

1000

Par extension, le terme console sert également à désigner la bande grise juste au-dessus de la zone noire de test/débogage : Processing y affiche un certain nombre de messages, notamment pour signaler des erreurs.

Opérations arithmétiques

Processing permet d'effectuer des calculs mathématiques. Tout au long de l'utilisation de cet environnement, vous serez amené à calculer des valeurs. Ne vous inquiétez pas : l'ordinateur le fera pour vous. Les opérations d'addition, soustraction, multiplication et division peuvent être combinées. Il est également possible d'utiliser des parenthèses pour définir l'ordre des opérations.

Attention aux nombres à virgule ! Dans Processing, les unités sont séparées des décimales par un point et non par une virgule.

Voici quelques exemples d'opérations arithmétiques :

println(10 + 5);
println(10 + 5 * 3); // 5*3 (soit 15) puis additionne 10
println((10 + 5) * 3); // 10+5 (soit 15) puis multiplie 15 par 3
println(10.4 + 9.2);

Cette suite d'instructions saisie dans la fenêtre d'édition de Processing va produire dans la console le résultat suivant :

add

Certaines opérations arithmétiques peuvent être contractées. Par exemple, i++ donne le même résultat que i = i + 1 . Et x+=10 donne le même résultat que x=x+10.

Maintenant que vous connaissez les bases de l'interface de Processing, il ne vous reste plus qu'à apprendre à écrire du code qui fonctionne pour dessiner et créer ce que vous souhaitez. C'est l'objet des prochains chapitres.

Affichage des erreurs

Processing dispose depuis sa version 3 d'un correcteur de syntaxe qui vous indique les erreurs au fur et à mesure que vous tapez des lignes de code. Il n'est pas possible d'éxécuter un programme qui comprend des erreurs.
Ces erreurs sont indiqués de deux manières différentes : 

  • en sous-lignant en rouge les éléments qui posent problème dans l'éditeur. 
  • en synthétisant l'ensemble des erreurs dans la console dans l'onglet « Erreurs », en précisant la nature du problème et l'onglet de code dans lequel celui-ci apparaît. Un double click sur une erreur vous amènera dans l'éditeur à l'endroit ou Processing a repéré cette erreur.
Parfois, la correction d'une erreur peut entraîner en cascade la résolution d'autres erreurs qui sont liées à cette erreur. Il est donc important de corriger les erreurs dans l'ordre dans lequel elles ont été signalées surtout si celles-ci sont « proches » dans l'éditeur de code.
 

Référence & exemples 

Comme vous allez le voir tout au long de ce manuel, Processing comprend beaucoup de fonctions et chacune d’elle a sa syntaxe propre. C’est tout naturellement qu’il est proposé avec l’installation de Processing un dictionnaire qui compulse toutes les fonctions, avec ses écritures possibles et des exemples associés. Cette référence est accessible depuis le menu Aide > Documentation (en)

Processing propose en outre une série d’exemples accessibles depuis le menu Fichiers > Exemples. Ces programmes, souvent courts, illustrent une notion fondamentale de programmation (dossier Basics) ou des notions plus avancées (dossier Topics).
Le dossier « Contributed Librairies » est un dossier spécial puisqu'il regroupe les exemples qui sont associés à l'installation d'une librairie.

Le bouton « Add Examples ... » de la fenêtre ouverte permet d'accéder au téléchargement et installation de nouveaux exemples et notamment ceux de livres écrits par des experts de Processing, citons notamment « The nature of Code » de Daniel Shiffman et « Processing Handbook » de Casey Reas et Ben Fry qui sont des références.

Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.

Vous devriez rafraîchir la page.