Attention : ce document est en cours de rédaction.
Merci de me faire part de vos précieuses remarques (fautes, ommissions…).

1. Introduction

Processing, d’abord créé par des artistes et pour des artistes, est devenu très populaire dans beaucoup de domaines mais aussi dans l’enseignement. Voir cet article sur Floss Manuals.

2. Installation

Processing peut être utilisé en ligne (il faut alors penser à supprimer l’exemple fourni par défaut) ou installé localement en le téléchargeant ici.

On peut aussi intégrer Processing dans une page web. Voir la section suivante.

2.1. Déploiement

2.1.1. Dans une page web

Processing peut être très facilement intégré dans une page web (voir la démo). Il suffit :

• d’inclure Processing.js en insérant les balises : <script type="text/javascript" src="chemin/vers/Processing.js"></script>
  où chemin/vers/Processing.js pointe :
  • soit vers votre version téléchargée,
  • soit vers une version hébergée par un Content Delivery Network comme :
    • https://github.com/processing-js/processing-js/blob/v1.4.1/processing.js (non minifié),
    • http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing.min.js (minifié).
• de fournir le code source Processing :
  • soit directement dans la page, dans une balise
    <script type="application/processing"></script>
    et en fournissant une balise <canvas> vide pour accueillir l’animation :
    <canvas />
    Cette balise sert en quelque sorte de zone de dessin. Ce squelette peut vous aider.
  • soit en indiquant quel .pde vous voulez interpréter en insérant un balise :
    <canvas data-processing-sources="chemin/vers/mon.pde"></canvas>
    avec la limitation expliquée dans le paragraphe suivant.

Pour des raisons de sécurité, l’accès par Javascript à des fichiers locaux est restreint. Si vous vouler utiliser un .pde, il faut donc passer par un serveur :

• soit un vrai, distant, comme par exemple chez https://www.alwaysdata.com/,
• soit un local, voir l’activité Introduction au HTML dynamique et plus particulièrement la section Démarrage et premières requêtes.

Voir la section de liens vers des tutoriels pour approfondir l’intégration dans une page web.

2.1.2. Android

Je n’ai personnellement rien testé. Voir la section de liens vers des tutoriels pour exporter vers Android.

3. Principales fonctions

// Tout ceci qui suit "//" sur une même ligne est un commentaire.
// Processing n'en tient pas compte.

3.1. setup() et draw()

Ce sont les deux fonctions principales de Processing pour créer une animation.

• setup est exécutée une fois au lancement du programme
• draw est exécutée pour la construction de chaque image, en général 25 fois par seconde, sauf si on appelle noLoop().

3.2. Types

On déclare les variables en tête de fichier, avant setup.

Ensuite, avant de les utiliser, il faut les initialiser.

• int est le type des nombres entiers,
• float est le plus proche des nombres réels,

3.3. Graphismes

3.3.1. Fond

• background(code_monochrome)
• background(R,G,B)

3.3.2. Encre

• fill décide la couleur des prochains objets dessinés.
• fill(code_monochrome)
• fill(R,G,B)

3.3.3. Repère

Les ordonnées croissantes sont vers le bas. Cela correspond aux directions de lecture des occidentaux : de gauche à droite puis de haut en bas.

3.3.4. Texte

• text(str, x, y)

3.3.5. Dessins

• size(w, h)
• ellipse(cx, cy, dx, dy) // pas d’instruction pour le cercle
• rect(cx, cy, w, h)

3.3.6. Images

• image(img, x, y)
• pixels (variable de type tableau)
• loadPixels()
• updatePixels()

3.4. Structures de programmation

3.4.1. Structure conditionnelle

if (condition) {
    code à exécuter;
}

• OU logique  ||
• ET logique  &&

3.5. Entrées utilisateur

• mouseX, mouseY
• mousePressed

4. Références

4.1. Références officielles

• Le site officiel de Processing,
• la documentation officielle,
• le site de Processing.js,
• utiliser Processing en ligne :
  • http://sketch.processing.org/,
  • http://processingjs.org/tools/processing-helper.html.

4.2. Tutoriels

• L’activité de prise en main de Processing publiée sur ce site,
• http://hello.processing.org/ (anglais),
• un tutoriel très progressif en anglais sur l’intégration de Processing dans une page web,
• export d’un travail avec Processing pour Android :
  • http://processing.org/learning/android/
  • http://wiki.processing.org/w/Android
• …

4.3. Galeries, bibliothèques et environnements de travail

• http://processing.org/exhibition/ et sa version Android
• http://www.openprocessing.org/
• http://sketchpad.cc/
• An editor for Processing (Android)
• http://toxiclibs.org/
• http://processingjs.nihongoresources.com/
• http://www.wblut.com/topics/portfolio/ and his hemesh
• http://www.ricardmarxer.com/geomerative/
• http://www.caligraft.com/
• http://generative-typografie.de/