Introduction Processing

Posted by on octobre 12, 2011 at 12:17 .

Processing est un environement de programmation et un langage simplifié dérivé de java. On écrit dedans des commandes, des fonctions, des objets, … qui vont générer du graphisme, voir du son ou voir même contrôler des choses physique grâce à son ami Arduino. C’est un moyen accessible pour apprendre l’art du code.

Processing a été créé par Ben Fry et Casey Reas deux anciens étudiants de John Maeda dans le Aesthetics + Computation Group du MIT Media Lab. Ce projet est en grande partie inspiré de Design By Numbers de John Maeda.

Processing étant un projet open source il a reçu un grand soutien de la communauté des artistes, développeurs, designers et plus largement de ceux qui veulent créer et innover avec un ordinateur. Ce Projet a reçu le prix Golden Nica à Ars Electronica 2005.

Au sein de l’AOC nous utiliserons plus souvent Arduino car celui-ci est plus orienté sur le design d’objet physique et technologique ne nécessitant pas d’ordinateur car étant lui même un petit ordinateur. Il est cependant plus simple de commencer par apprendre certaines bases de programmation sous processing  qui ne demande pas de connaissance en électronique en plus. Processing se tourne de plus en plus vers les mobiles et ce sera donc potentiellement un sujet de développement aussi.

Nous allons donc voir très brièvement comment installer Processing et regarder un exemple de code simple. Vous trouverez ensuite un ensemble de lien vers des tutoriels en ligne mais également des livres qui couvrent largement l’ensemble des fonctionnalités de ce langage.

///// installation

Allez sur la page de téléchargement de processing : http://processing.org/download/ et sélectionner le paquet selon votre plateforme.

Sous windows vous aurez une fois le téléchargement achevé un dossier de type .zip à décompresser et installer de préférence dans votre dossier c:\Program Files\

Sous mac vous aurez un fichier image .dmg qui s’ouvrira automatiquement et vous proposera de glisser processing dans vos applications.

Sous Linux Vous pouvez suivre les quelques étapes ici

Voilà processing est maintenant installer dans vos dossier d’applications. Vous pouvez maintenant lancer le programme.

///// programmer un  Hello World

Nous allons créer et lancer un script :

commençons par l’exemple le plus simple possible. En général par autosatisfaction les programmeurs font un « hello world » pour bien vérifier que tout va bien. Ecrivez simplement dans la zone d’édition de code  ( zone blanche) de la fenêtre Processing :

text("Hello World", 10, 40);

comme dans l’image ci-dessous et appuyez sur le bouton en haut à gauche « run ».
une nouvelle fenêtre s’ouvre et vous pouvez voir votre script s’exécuter dans une nouvelle fenêtre.

Vous venez d’écrire un 1° code qui ne fait pas grand chose mais permet de s’assurer que tout est ok.

///// l’interface

nous allons maintenant faire un petit tour du propriétaire et voir quelque fonctionnalité du logiciel et de son interface.

Dans la zone ou vous avez précédemment appuyé sur « run » tout à gauche (ci-dessus) qui vous permettez d’exécuter votre code on parle de sketch dans processing (héritage graphique du projet). vous trouverez ainsi dans l’ordre :

« stop » pour arrêter le sketch en cours d’exécution,

« new », « open » (flèche vers le haut) et « save » (flèche vers le bas) sont des actions commune à n’importe quel éditeur de texte vous noterez cependant que Processing sauvegarde par défaut vos sketch dans un dossier Processing situé dans vos documents et c’est aussi ici que vous ajouterez plus tard des librairies (sorte de plugin pour ajouter des fonctionnalités).

Enfin le dernier bouton « export applet » vous permettra d’exporter votre projet pour le web.

à noter qu’il est aussi possible d’exporter votre sketch en fichier exécutable « export application »pour se lancer indépendamment de Processing.

Dans la barre des menus :

Vous trouverez également dans ce menu plusieurs outils pour créer d’autres typo que celle par défaut dans Processing, ainsi qu’un sélectionneur de code couleur ou encore un outil pour faire du ménage dans son code (enlever certains espaces superflu par exemple ou aligner des instructions).

Enfin dans la barre des actions vous verrez également complètement à droite un bouton  standard qui vous propose de passer en mode Android (l’OS de Google).Il faudra pour cela  installer un SDK en plus. Cette option est nouvelle depuis la version 1.5 de Processing vous  ne la verrez donc pas encore vraiment traitée dans les tutoriels. Mais c’est un point intéressant car Arduino peut depuis peu s’interfacer avec Android. Mais pour le moment restons simple.
///// un exemple de code génératif
Voici ci dessous un code informatique que vous pouvez copier et coller dans votre zone de code Processing et exécuter avec « run ».

// définir des variables qui vont stocker l'ensemble des informations des pixels d'une image
PImage ArduinoPict;
// définir deux variables qui vont stocker à différent moment du programme la position d'un pixel
int pixelX,pixelY;
// truc à faire au démarrage
void setup() {
// Ce code va chercher une image d'un Arduino sur le site Arduino.cc
  ArduinoPict = loadImage("http://arduino.cc/en/uploads/Main/ArduinoNG.jpg");
// il donne comme taille de fenêtre celle de l'image
  size(ArduinoPict.width, ArduinoPict.height);
// il place l'image à l'origine de la fenêtre x=0 et y=0 étant en haut à gauche
  image(ArduinoPict, 0, 0);

}

// truc à faire en boucle
void draw() {
// choisi une position aléatoire en X et Y dans la zone de l'image
pixelX =int(random(ArduinoPict.width));
pixelY =int(random(ArduinoPict.height));
// prend la couleur du pixel
color pixcolor = ArduinoPict.get(pixelX,pixelY); fill(pixcolor);
// choisir une taille de texte aléatoire et écrire le texte "AOC" à la place du pixel
textSize(int(random(24)+10));
text("AOC",pixelX,pixelY);
} 

Vous ne comprendrez certainement pas tout dans ce code bien que j’ai placé des commentaires « // » au dessus de chaque instruction. un commentaire dans la programmation permet de vous écrire des notes par exemple pour se souvenir 3 mois après à quoi pouvez bien servir cette ligne de code.

Juste un dernier détail intéressant par rapport à mon code « hello world » d’avant, ici ça bouge et ça ne s’arrêtera jamais comme une boucle infinie sauf en cas de rupture de courant.  Tout simplement car il y a dans le code un mot clé « draw » c’est une méthode qui permet de répéter tout ce qui est compris entre : { …. }

///// Quelques références pour aller plus loin  :

– Cours de programmation avec Processing. Un cours de Douglas Edric Stanley, prof à Aix-en-Provence. un des auteurs du livre open Source Processing – dessiner et créer avec du code informatique

– un autre cours de Jean-Noël Lafargue maître de conférences associé à l’Université Paris 8, professeur à l’École Supérieure d’Arts du Havre. Co-auteur, avec Jean-Michel Géridan, de l’ouvrage Processing : Le code informatique comme outil de création.

– Quelques livres en plus  :

Processing: A Programming Handbook for Visual Designers and Artists by Casey ReasBen Fry and John Maeda

Learning Processing: A Beginner’s Guide to Programming Images, Animation, and Interaction (Morgan Kaufmann Series in Computer Graphics) by Daniel Shiffman

Processing: Creative Coding and Computational Art (Foundation) by Ira Greenberg

OpenProcessing pour partager ses codes

CreativeApplications pour avoir une idée de tout ce que l’on fait avec Processing et d’autres outils de créations par le code

Comments are closed.