par Anne-Laure DELPECH | 11 Fév 2018 | Art numérique, Processing
Je prépare un travail avec Processing qui va nécessiter de faire bouger des formes assez nombreuses dans le canevas. Ces formes peuvent être générées par le sketch ou être des fichiers svg (ou png) associés au sketch. J’explore donc les moyens de les générer puis de les faire bouger. Cet article reprend mes étapes successives d’apprentissage.
Etape 1 : explorer la notion de classe d’objet
D’abord tester la notion de classe et créer manuellement des objets
J’ai utilisé le script proposé dans l’exercice 2 du Chapitre 8 sur les objets de Learning Processing de Daniel Shiffman.
Ce que j’en retiens :
Une classe d’objet est utilisée lorsqu’on programme en mode orienté objet. La classe contient toujours les éléments suivants :
// des variables
// un constructor
// des fonctions, dont celle qui affichera l’objet (void display() mais pas obligatoirement ce nom)
La convention est toujours de faire commencer le nom d’une classe par une lettre majuscule, comme ici Car.
Ensuite, utiliser un array pour créer et animer un grand nombre d’objets à partir d’une classe
J’ai testé le code proposé dans l’exercice 9 du Chapitre 9 sur les « arrays » (tableaux) de Learning Processing de Daniel Shiffman.
Avec une seule classe on peut créer un nombre infini d’objets semblables, la limite étant la capacité de l’ordinateur à générer et animer ces objets.
Etape 2 : explorer le mouvement « autonome » d’objets divers
D’abord créer des objets divers et les faire bouger de manière « autonome »
Je me suis inspirée des essais de l’étape 1 et de l’exercice 2 du Chapitre 10 sur les algorithmes de Learning Processing de Daniel Shiffman.
Le script avec les classes dans des fichiers distincts en format zippé : alObjets3_Knowledge alObjets3 (zip)
.
Dans ce script, je crée « manuellement » un objet « myCar1 » et un objet « myVelo1 » et les objets balls[0] à balls[MaxBalls] sont générés par un array.
On notera qu’ici les paramètres de chaque objet sont définis dans les classes et pas dans le programme principal (voir plus bas).
Ensuite, tester la gestion des interactions entre certains objets
Je me suis inspirée de l’exercice 3 du Chapitre 10 sur les algorithmes de Learning Processing de Daniel Shiffman.
Dans ce sketch, les balles s’arrêtent lorsqu’elles approchent un « vélo » du fait d’une fonction intersect(Velo b) définie dans la classe Ball. Dans le programme principal, fonction void draw(), les balles ne bougent que si la distance au vélo est suffisante par le biais de :
if ( !balls[i].intersect(myVelo1) && !balls[i].intersect(myVelo2) ) {
balls[i].move();
}
Le script avec les classes dans des fichiers distincts en format zippé : alObjets3 (zip)
.
Etape 3 : Explorer une classe pour le chronométrage et la gestion du temps
J’ai lu quelque part que le système utilisé pour l’étape 2 peut consommer énormément de ressources si on crée beaucoup d’objet. J’ai donc souhaité chronométrer le processus. Pour celà j’ai utiliser une classe « Timer » inspirée encore une fois du livre Learning Processing de Daniel Shiffman : exemple 4 et exemple 5 (timer OOP ou Programmation Orientée Objet) du chapitre 10.
Ca donne ce programme : alObjets5 (zip). Il est identique au précédent sauf que la console affiche le temps écoulé en fonction d’un compteur.
Etape 4 : utilisation de PShape
Dans ce tutoriel de Processing.org sur PShape, Daniel Shiffman explique que PShape est une solution pour éviter de saturer les capacités de l’ordinateur lorsqu’on veut créer un grand nombre de formes. J’ai donc décidé d’explorer PShape.
Je me suis inspirée du tutoriel et de Je me suis inspirée de File → Examples → Topics → Create Shapes → PolygonPShapeOOP que l’on trouve dans les exemples de Processing.
Ce script (alObjets6 (zip)) crée des étoiles comme indiqué dans le tutoriel ci-dessus et les déplace sur l’écran. J’ai ensuite créé des balles sur le même principe qui se déplacent comme dans alObjets5 de l’étape 3. Il y a aussi un chronomètre qui mesure le temps toutes les 100 boucles de draw().
Je ne peux pas afficher le résultat ici car l’extension que j’utilise ne gère pas correctement createShape et ça provoque une erreur dans la page. J’ai créé une version JavaScript (cf étape 8 pour la visualisation).
Syntaxe pour les objets prédéfinis et les objets à construire
La construction des objets PShape n’utilise pas exactement la même syntaxe lorsque l’objet est prédéfini (ici ellipse) ou pas (ici pour l’étoile) :
Dans la classe Star
createShape()
// code de construction de la forme, morceau par morceau
beginShape()
s.fill(105, 204);
s.noStroke();
endShape(CLOSE)
et dans la classe Ball
createShape(ELLIPSE, x, y, r*2, r*2);
b.setStroke(false) ;
b.setFill( c );
PShape manipule l’origine (0,0) du canevas
L’utilisation de PShape manipule l’origine (0,0) du canevas et il faut faire bien attention au moment du setup. J’ai mis beaucoup de temps à comprendre pourquoi mon canevas paraissait décalé. Puis en relisant pour la énième fois le tutoriel sur PShape, j’ai vu cette petite phrase : « when using PShape, what we’re really doing is configuring the geometry relative to the origin (0,0) » et j’ai enfin compris le sens des exemples qui suivaient !
Dans la fonction setup() on doit construire la forme à l’origine du canevas (0,0). Ainsi si je crée un rectangle avec PShape, je vais utiliser le code suivant (positionnement du rectangle dans la fonction setup à 0,0 :
PShape rectangle;
void setup() {
size(640,360,P2D);
rectangle = createShape(RECT, 0, 0, 100, 50);
}
void draw() {
background(51);
translate(mouseX,mouseY);
shape(rectangle);
}
Par contre, si je décide de positionner les objets par leur centre (avec shapeMode(CENTER); ) c’est plus compliqué, je n’ai pas compris comment faire.
La façon d’afficher les objets est différente
Maintenant la fonction display() utilise des nouvelles fonctions :
void display() {
pushMatrix();
translate(x, y);
shape(b);
popMatrix();
}
pushMatrix() et popMatrix() assurent le changement d’origine du canevas et son retour aux coordonnées initiales.
Etape 5 : manipulation de PShape par des variables définies dans le programme principal
La version 7 de alObjets ne crée plus que des balles (pas les étoiles) et les variables sont définies à l’intérieur de la classe, ce qui limite un peu les choses.
Télécharger la version 7 : alObjets7 (zip)
Dans cette version 8, je m’inspire du cours sur la Programmation Orientée Objet de Margaret Noble, une artiste et professeur d’art. Elle explique très clairement le fonctionnement des classes puis vers la fin, elle expose comment on peut transférer des variables du programme principal vers les classes en utilisant des variables _var au lieu de var .
Télécharger la version 8 : alObjets8 (zip)
Je ne peux pas afficher le résultat ici car l’extension que j’utilise ne gère pas correctement createShape et ça provoque une erreur dans la page.
J’ai converti un mix du code de alObjets6.pde et alObjets8.pde en Javascript (librairie p5.js). Si vous voulez voir le contenu de ce fichier, vous pouvez le télécharger : alObjets6_convertiJS (en p5.js)
En voici le résultat dans CodePen
See the Pen Moving stars (p5.js) by Delpech (@aldelpech) on CodePen.
Et maintenant ?
J’ai compris comment génerer et contrôler des formes via des classes et PShape.
Maintenant, je veux faire la même chose sur des images svg. En attendant, je vais aussi voir comment convertir un script processing en javascript pour pouvoir en présenter une version animée en utilisant codepen.
par Anne-Laure DELPECH | 27 Nov 2017 | Art numérique, Processing
J’essaie ici d’afficher un visuel écrit en processing (fichier .pde) tel quel sur mon site WordPress. J’utilise l’extension ProcessingJS for WordPress. Et ça fonctionne très bien, même s’il y a des limitations.
Installer et activer l’extension
Installer et activer l’extension ProcessingJS for WordPress par Rolf van Gelder.
Sous le nom de l’extension, dans la page des extensions, il y a un lien vers une page « instructions ». C’est là que j’ai copié puis collé les shortcodes à utiliser. Mais c’est la même chose que sur la page de présentation de l’extension.
Essai n°1 : taper le code directement dans le contenu WordPress
Je copie et colle ce qui est proposé par l’auteur de l’extension :
[pjs4wp]
void setup()
{
size(200, 200);
text(« Hello world! », 50, 50);
}
[/pjs4wp]
Et voilà le résultat, moche mais simple !
Essai n°2 : lire un fichier processing (.pde)
J’ai un fichier d’essai sollewitt4.pde. Je le renomme sollewitt4.js sans rien changer d’autre que le type de fichier (pde devient js).
Dans la bibliothèque de média, je charge ce fichier puis je note son url (https://knowledge.parcours-performance.com/wp-content/uploads/2017/11/sollewitt4.js).
Ensuite je saisis le shortcode suivant :
[pjs4wp url="/wp-content/uploads/2017/11/sollewitt4.js" bordercolor="#000"][/pjs4wp].
Voici le résultat :
On voit que l’écran ne s’adapte pas à la page (pas responsive) – L’écran fait 1200 px par 800 px comme défini dans le sketch.
Avec un éditeur de texte type notepad++, je modifie donc la taille de l’écran défini dans setup, pour le ramener à 600px par 400 px, je charge le nouveau fichier dans les médias, sollewitt4-600-400.js et j’utilise le shortcode [pjs4wp url="/wp-content/uploads/2017/11/sollewitt4-600-400.js" bordercolor="#000"][/pjs4wp]
Et voilà !
Les limites de l’extension
L’écran de visualisation du sketch Processing ne paraît pas responsive, en tous cas pas lorsqu’il est défini en « dur », en disant explicitement size(1200, 800);
Si j’essaie en remplaçant la taille de l’écran par fullScreen();
Ca ne fonctionne pas du tout…
Donc pour l’instant les limites de cette extension sont :
- impossible d’utiliser une fenêtre responsive ;
- pas de possibilité d’avoir des fichiers associés au script.
Mais je suis déjà très contente d’obtenir ce résultat.
Je ferai d’autres essais ultérieurement.
par Anne-Laure DELPECH | 26 Nov 2017 | Art numérique, 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 Découverte de Processing, 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 :
Vous verrez la suite dans les prochains articles de cette série Découverte de Processing !
Commentaires récents