Qu'est-ce que Processing?

Qu'est-ce que Processing?

Programmation et production visuelle

Qu'est-ce que Processing?

Programmation et production visuelle

Ben Fry & Casey Reas

Qu'est-ce que Processing?

Programmation et production visuelle

Casey Reas - Signals

Qu'est-ce que Processing?

Programmation et production visuelle

Ben Fry - Aligning Humans and Mammals

Qu'est-ce que Processing?

Programmation et production visuelle

John Maeda - design by numbers

Qu'est-ce que Processing?

Un langage de programmation

« un langage de programmation est une notation conventionnelle destinée à formuler des algorithmes et produire des programmes informatiques qui les appliquent. »

Source : Wikipedia France

Qu'est-ce que Processing?

Un langage de programmation

Fait pour des publics non-techniciens :

• "Cuisine interne" réduite au minimum (mise en place des projets, imports, ...)
• Mots clés évocateurs et liés au résultat : "line", "draw", "map", ...
• Une syntaxe assez souple

Mais pas non plus un "sous-langage"! Tout ce qu'on apprend est valide pour des langages plus experts (Java, C/C++, ...)

Qu'est-ce que Processing?

Un langage de programmation

En réalité ... Processing est plutôt une bibliothèque (library) pour le langage de programmation Java

Qu'est-ce que Processing?

Un environnement de programmation spécifique

C'est-à-dire un logiciel fournissant toutes les fonctionnalités nécessaires pour écrire, tester et préparer un programme Processing.
On parle d'IDE : "Integrated Development Environment"

Qu'est-ce que Processing?

Un environnement de programmation spécifique

... mais pas le seul (un code source processing est juste un texte!)!

Qu'est-ce que Processing?

Une communauté animée par l'esprit du logiciel libre

Des productions qu'on peut :

• Etudier
• Modifier
• Dupliquer
• Partager

Qu'est-ce que Processing?

Une communauté régie par l'esprit du logiciel libre

• De très nombreux contributeurs
• Des forums très actifs
• Des évènements réguliers (processing cities)
• De nombreux sites de "dépôts de codes"

Qu'est-ce que Processing?

Une communauté animée par l'esprit du logiciel libre

Ben Fry - évolution du nombre d'utilisateurs de 2005 à 2011

Un langage de création

Nativement, processing permet de produire :

• Des applications interactives
• Des images fixes(jpeg, pdf, ...)
• Des graphismes vectoriels (svg)
• Des vidéos
• Des formes 3D
• ...

Quelques exemples

de champs de création possibles

Images génératives

Casey Reas - Process 16

Typographie

Boris Muller - Poetry on the road 2009

Manipulation d'images

Emoc - paysages

Visualisation de données

Nicolas Feltron - Feltron Annual Report 2010

Manipulation de sons

Georg Reil et Kathy Scheuring - Fine collection of curious sound objects

Génération d'objets

Matthew Plummer Fernandez - Digital Natives

Sculptures

Hannes Jung - .fluid

Robotique artistique

Adam Ben-Dror, Shanshan Zhou, Joss Doggett - Pinokio

Processing + digital humanities

...quelques exemples

Phonologie

Manas Karambelkar, Momo Miyazaki, Kennetyh A. Robertsen - Silenc

Littérature

Stephan Thiel - Understanding Shakespeare

Sociologie

Jonathan Harris & Sep Kamvar - We feel fine

Histoire des sciences

Moritz Stefaner - Max Planck Research Network

L'IDE Processing

L'IDE Processing

Il sert à :

• Ecrire et corriger un programme
• Tester un programme
• Exporter un programme
• ...

Pour télécharger l'IDE Processing : https://processing.org/download/

L'IDE Processing

• Un programme Processing s'appelle un "sketch" (esquisse)
• Il est constitué d'un dossier contenant initialement un fichier .pde au nom de l'esquisse
• Une esquisse peut contenir également des images, fichiers de données, polices de caractères, ...

Votre premier programme Processing

Votre premier programme Processing

//Bonjour Processing!
					

file --> save

Quand vous sauvegardez un "sketch" processing (un programme), l'IDE créée :

• Un dossier qui porte le nom de votre programme à l'adresse que vous avez indiqué
• A l'intérieur de ce dossier, un fichier .pde au nom indiqué

Attention! le nom du dossier et du fichier .pde d'un programme processing doivent toujours être les mêmes!

Point, ligne, forme

Dessinons une ligne

line(0,0,50,50);

Dessinons une ligne

Anatomie d'un appel de fonction

Dessinons une ligne

La grille des pixels

Dessinons une ligne

La grille des pixels

Dessinons un rectangle

Dessinons une ellipse

Changer la taille du sketch

On utilise la fonction size(). Elle prend pour argument la largeur du sketch, puis la hauteur du sketch

Par exemple : size(800,600);

A vous!

Dessiner une tête à toto

Un peu de couleurs

Un peu de couleurs

Deux fonctions pour changer les couleurs:

• "Dessines avec cette couleur" : stroke();
• "Remplis mes dessins avec cette couleur" : fill();

Plus noFill() et noStroke()

Un peu de couleurs

Nuances de gris

Les nuances s'échelonnent de 0 à 255 (=sur 8 bits) :

Exemple : stroke(200);

Un peu de couleurs

Rouge Vert Bleu (RVB)

Chaque couleur s'échelonne de 0 à 255 :

Exemple : stroke(200, 100, 300);

Un peu de couleurs

Le sélecteur de couleurs

Tools --> color selector

La notion d'algorithme

La notion d'algorithme

Johanna Kindvall - A recepe diagram for Yellow Beet Salad

La notion d'algorithme

Processing exécute les instructions du programme dans l'ordre où elles sont écrites :

size(800,600); // 1. règle la taille de la fenêtre à 800 par 600
stroke(0);     // 2. dessines avec du noir
fill(0,255,0); // 3. remplis avec du vert
ellipse(50,50,30,30); // 4. dessines une ellipse
noFill(); // 5. désactives le remplissage
stroke(255,0,0); // 6. dessines avec du rouge
ellipse(400,300,200,200); // 7. dessines une autre ellipse
					

Un peu de couleurs

La fonction background()

Elle correspond à "repeindre" tout le sketch de la couleur demandée.

Exemple : background(200,200,200);

Un peu de couleurs

Tout ensemble

A vous : Une tête colorée

Mettre en place --> dessiner

setup() et draw()

Mettre en place --> dessiner

Une modélisation "algorithmique" de la peinture

L'algorithme global d'une séance de peinture serait :

• Mise en place : tendre le châssis, sortir les pinceaux, regrouper les croquis, ...
• Exécution : peindre, dessiner, construire une couleur, ...

Mettre en place --> dessiner

Une modélisation "algorithmique" de la peinture

L'algorithme global d'un programme Processing est divisé en deux partie

• Mise en place : fonction setup()
• Actualisation : fonction draw()

Ce qui donne une structure toujours identique à tous les programmes Processing:

							
void setup(){
	//entre ces accolades, je mets tout ce qui concerne la mise en place de mon programme
}
void draw(){
	//entre ces accolades, je mets tout ce qui concerne l'exécution de mon programme en temps réel
}
					

Mettre en place --> dessiner

Deux blocs aux comportements différents

Ecouter la souris

• Position sur les abscisses : mouseX
• Position sur les ordonnées : mouseY
• Vous pouvez appliquer des opérateurs algébriques à ces "variables" : + - / *
• Exemple : mouseX*2 vous renverra la position de la souris sur les x en pixels, multipliée par deux

Petit résumé

• Le programme s'initialise avec void setup(){}
• Le programme s'actualise avec void draw(){}
• mouseX et mouseY sont des variables
• Elles peuvent être passées en argument de n'importe quelle fonction (sauf size() qui est fixée au début du programme)

A vous!
Une tête qui réagit à la souris (par la position des éléments, la taille, ou les couleurs)

Merci!

Cette après-midi : suite de la découverte!

@robindemourat - robin.demourat@gmail.com

Présentation réalisée avec la bibliothèque reveal.js, fabriquée par Hakim El Hattab