Découverte de Processing

J’ai entendu parler plusieurs fois de Processing, sans trop savoir à quoi ça pouvait me servir ni comment l’utiliser. Et puis je me suis inscrite au cours « Art Numérique » des Beaux Arts de Quimper (site de l’école ou site de partage du cours). Et je m’y met.

Dans ce premier article sur Processing, dans la série , je vais simplement mettre des liens qui m’ont paru intéressants vers d’autres sites qui parlent de Processing.

Que peut-on faire avec Processing ?

Une réalisation d’une ancienne élève du cours Art numérique : ici sur le site du cours.

Le site Beautiful Programming qui présente de très beaux exemples d’art génératif et interactif. J’aime tout particulièrement le « Infinite Arboretum » qui dessine automatiquement un arbre et le modifie selon ce que l’on fait avec la souris ou le clavier :

Un exemple d’arbre généré automatiquement. En cliquant, vous allez sur le site de l’auteur.

 

Un site regroupe de nombreux exemples avec le code : OpenProcessing

Algorithm Ink de Aza Raskin montre une réalisation intéressante et son code (en cliquant sur le bouton edit)

Processing drawings présente des projets visuels et leur code.

Generative Art Links contient des liens vers des projets visuels mais aussi des logiciels utilisables pour de l’art numérique.

La page « processing : Ressources Processing et tutoriels en ligne » contient de nombreux liens vers des sites intéressants.

Le site GuruBlog contient une galerie de sketch Processing.

Le site de Jm Commenge contient des exemples intéressants.

Ce site présente un projet associant Processing et Twitter pour animer du plancton.

Sur CodePen.io on peut voir de nombreuses réalisations utilisant Processing.js et taggée « processing »., ou contenant « p5 » Par exemple cette réalisation de Kultur Design, une animation de polygones SVG :

See the Pen SVG Polygon Animation by Kultur Design (@kulturdesign) on CodePen.

Sur CodePen, Lionel Radisson a réuni une collection liée à Nature of Code (le livre je pense).

J’ai entamé une collection de travaux sur CodePen en lien avec p5.js, visible ici.

Références sur le code Processing

Processing.org est le site de référence pour Processing, et aussi pour p5.js une bibliothèque JavaScript qui lit le code Processing sur un site ou une application web.

The Nature of Code permet d’acheter un livre très intéressant sur Processing et aussi de le lire en ligne.

Contributed Tools, Projects, Demos · processing/p5.js est le Wiki pour p5.js, .

Education · processing/p5.js est un Wiki consacré à l’enseignement de p5.js pour Processing.

Des cours sur Processing sont disponibles sur le site de Electronic Media Studio. Le menu « Lectures » contient plusieurs cours et dans la barre latérale, on trouve de nombreux exemples d’exercices.

Le site Arts Numériques contient de nombreux tutoriels sur Processing.

Processing Quick Start nous parle de Processing.js, une autre bibliothèque JavaScript pour Processing.

Le site du livre Design Génératif : un livre excellent, mais cher. J’ai pu l’emprunter à la bibliothèque de l’école des Beaux Arts de Quimper. On peut télécharger tous les exemples de codes sur le site. Beaucoup sont très très intéressants.

Pour démarrer dans l’utilisation de svg créés avec Inkscape et utilisés dans Processing : how to use svg for rigged 2D-animations in processing.

Un lycée a mis en ligne quelques exemples et exercices lié à des oeuvres d’art.

Un cours en ligne, en anglais, très bien fait pour apprendre rapidement les rudiments de Processing : Le cours CS1335 de Karen Doore

Placer un sketch Processing dans un site WordPress

Embedding p5.js processing sketches in WordPress posts sur le site weegreenblobbie.com

Embedding p5.js · processing/p5.js sur GitHub explique comment on peut visualiser du code  Processing / p5.js sur un navigateur avec iframe dans une page html ou des sites de partage et visualisation de code tels que CodePen ou JSFiddle.

Creative Computation » Embedding a Processing Sketch expose diverses solutions pour placer un sketch Processing dans une page html.

Enfin, deux extensions WordPress paraissent intéressantes pour intégrer du Processing à un site :

Processing.js for WordPress et ProcessingJS for WordPress. Elles sont toutes deux gratuites et ont été mises à jour récemment.

Javascript ou Processing ?

Les bibliothèques javascript citées plus haut (P5.js ou processing.js) permettent de créer des scripts visualisables en ligne. C’est quand même très pratique….

Si on veut apprendre P5.js, un excellent tutoriel en français a été réalisé par B2renger.

Processing et Arduino ou Raspberry Pi

Ce tutoriel, en anglais sur Instructables, explique comment utiliser un Raspberry Pi pour des sketchs Processing.  Adafruit a également fait un tutoriel sur l’utilisation du Pi avec Processing 3.

L’article « Récupérer une valeur analogique Arduino avec Processing » me parait être une bonne base pour démarrer. On peut remplacer les photo-résistances par d’autres capteurs analogiques.

Il y a aussi un manuel Floss spécifique à Arduino et un Chapitre Arduino du Manuel Floss sur Processing.

Pour le Raspberry Pi, on peut lire Introduction to Processing sur le site Raspberry Pi Projects, ou Processing on the Raspberry Pi & PiTFT  sur le site Adafruit Learning System.

Et pour un ensemble Arduino Uno, Raspberry Pi utilisant Processing : Raspberry Pi + Processing + CT UNO (Part 2) , un tutorial de Cytron.

On peut contrôler l’arduino en C++ et simplement le faire communiquer avec Processing ou le contrôler en Processing. Voir les explications de Arduino Playground ou Learn Sparkfun.

Le site Arts Numériques contient  également des tutoriels sur Arduino.

Art et Arduino

Mes projets

Me familiariser avec Processing :

Et je veux également voir comment intégrer ces travaux dans des pages web. J’essaierai donc CodePen, JSFiddle et les deux extensions WordPress ci-dessus.

Ca m’intéresserait aussi de savoir faire les images suivantes, il me semble que Processing est bien adapté pour :

geralt / Pixabay
intographics / Pixabay

 

 

geralt / Pixabay

 

Vous verrez la suite dans les prochains articles de cette série !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *