Processing : tracer un cercle avec des vertices et même un doughnut !

par Anne-Laure DELPECH | 27 Mai 2018 | Création numérique

Cet article décrit comment on peut tracer un cercle avec Processing sans utiliser ellipse(). C’est utile si l’on veut tracer un cercle vide (transparent) à l’intérieur d’un objet, rectangle (pour faire un cache comme un microscope) ou cercle (un doughnut!).

Les notions de PShape, vertex, Contour

Pour comprendre les bases, il faut se référer à l’aide de Processing, et en particulier le tutoriel en anglais sur PShape qui utilise PShape, des vertex, ainsi que beginContour() et endContour() pour « percer » des trous dans des formes.

Le principe général

Au départ, lorsque je me suis intéressée au tracé de cercle avec des vertices, c’était pour mettre un cache en forme de microscope sur un travail collectif utilisant Processing. Je voulais faire un rectangle qui fasse la taille de l’écran, et à l’intérieur un cercle transparent de diamètre 90% de la hauteur de l’écran. L’écran était variable et je ne voulais donc pas créer une forme fixe.

C’est ainsi que j’ai compris comment faire un « trou » dans un objet :

1. commencer la forme, avec beginShape() ;
2. dessiner un rectangle en le traçant dans le sens des aiguilles d’une montre : aller d’un sommet à l’autre dans ce sens ;
3. Démarrer un « contour » (un trou en fait) avec beginContour();
4. tracer un cercle en le traçant dans le sens inverse des aiguilles d’une montre ;
5. Arrêter le « contour » avec endContour();
6. finir la forme avec endShape(CLOSE);

L’exemple que j’ai créé pour comprendre

Dans l’exemple qui suit, la fonction drawCircle() trace un cercle :

• un cercle de centre Vcentre (un vecteur qui contient les coordonnées de ce point)
• un cercle de rayon r
• un cercle qui ressemble à un kaléidoscope si sides a une valeur faible, à un vrai cercle sinon
• un cercle qui est tracé dans le sens des aiguilles d’une montre (cas « false » ou non (cas « true »)

Processing : vertices, PShape, Contour…

Le fonctionnement

dans le setup(), on définit principalement les couleurs des différents éléments. colBkgnd utilisé pour le fond de l’écran est défini comme blanc #FFFFFF.

Dans draw() – on aurait tout pu mettre dans setup si on avait voulu – , on dessine le contenu de 4 quadrants différents.

Dans les 4 quadrants on trace un cercle en utilisant la fonction  drawCircle(PVector Centre, int sides, float r, boolean aclockw), définie à la fin du sketch.

Dans le premier quadrant (Nord Ouest), on trace un rectangle classique – avec rect() – puis on y trace un cercle qui est un PShape. Le cercle n’est pas vide. C’est un cercle plein. Le rectangle prend une couleur semi-transparente qui est diluée par le blanc du fond de l’écran. Le cercle est plus foncé, de la couleur de remplissage du rectangle mais sans la transparence pour une raison incompréhensible (et qui serait un bug de processing).

Dans le deuxième quadrant (Sud Ouest), on trace un rectangle puis un cercle selon le principe général décrit plus haut. On a bien un rectangle percé d’un cercle (on voit le fond blanc qui est le background.

Dans le troisième quadrant (Nord Est), on trace un premier cercle dans le sens des aiguilles d’une montre puis un deuxième cercle plus petit dans le sens inverse des aiguilles d’une montre. On obtient un doughnut (un cercle évidé) bleu sur le fond blanc.

Dans le quatrième quadrant (Sud Est), on trace un rectangle puis un cercle, comme dans le deuxième quadrant. Ensuite, une fois que l’on a refermé la forme avec endShape(), on trace une nouvelle forme avec un cercle plus petit. On obtient un rectangle évidé d’une forme de doughnut.

La fonction drawCircle( PVector Centre, int sides, float r, boolean aclockw )

Elle exécute un cercle comme on le ferait à la main si on disposait de l’équation d’un cercle, en traçant une succession de points de coordonnées x,y conformes à l’équation. Le tracé se fait dans le sens des aiguilles d’une montre si aclockw est vraie, dans le sens contraire sinon.

On trace autant de points que de « sides » : notre cercle est vraiment rond si on a défini une valeur élevée pour sides (plus de 30) et plus proche d’un quadrilatère ou d’un kaéliodoscope si l’on définit sides à une valeur faible.

Le code complet

Le code complet est disponible dans ce fichier texte téléchargeable : tracer cercles et autres PShapes

Le code complet est :

/* 
* tracer des cercles et autres objets avec des vertices

*
*/

PVector VCentre ; // centre du microscope
float r ;         // Rayon du microscope
int sides ;       // forme du cercle (sides faible = kaleidoscope plutôt)

color colBkgnd, colQ1, colQ2, colQ3, colQ4 ;

void setup() {

  size(600, 400) ;
  colorMode(HSB, 360, 100, 100, 100); 

  VCentre = new PVector( 0, 0) ;
  r = 70 ;
  sides = 30 ; // avec 30 on a un cercle très bien déjà

  colBkgnd = #FFFFFF  ;

  colQ1 = color(  random(100, 250) , random(50,100), random(60,90), random(60,80) ) ;
  colQ2 = color(  random(100, 250) , random(50,100), random(60,90), random(60,80) ) ; 
  colQ3 = color(  random(100, 250) , random(50,100), random(60,90), random(60,80) ) ;
  colQ4 = color(  random(100, 250) , random(50,100), random(60,90), random(60,80) ) ;
    
}

void draw() {
  
  background( colBkgnd ) ;
  
  // Quadrant 1 (Nord Ouest) on trace un cercle dans un rect()
  VCentre = new PVector( width/4,height/4) ;
  stroke(#FFFFFF) ;
  strokeWeight(2);
  fill( colQ1 ) ;

  rect(0,0,width/2,height/2) ;

  beginShape();
  drawCircle( VCentre, sides, r, true ) ; // true draws anticlockwise, false clockwise
  endShape(CLOSE);

  // Quadrant 2 (Sud Ouest) on trace  un trou circulaire dans un rectangle
  noStroke() ;
  fill( colQ2 );
  beginShape();
  vertex( 0, height/2 );
  vertex( width/2, height/2 );
  vertex( width/2, height );
  vertex( 0, height );
  VCentre = new PVector( width/4,3*height/4) ;
  stroke(#FFFFFF) ;
  strokeWeight(2);
  beginContour();
    // http://doc.gold.ac.uk/CreativeComputing/creativecomputation/?page_id=1142  
    // must be counterclockwise for a contour !!!!  
    drawCircle( VCentre, sides, r, true ) ; // true draws anticlockwise, false clockwise
  endContour();
  endShape(CLOSE);

  // Quadrant 3 (Nord Est) on trace  un doughnut 
  noStroke() ;
  fill( colQ3 );
  beginShape();

  VCentre = new PVector( 3*width/4,height/4) ;
  stroke(colQ3) ;
  strokeWeight(2);
  // on trace un cercle par dessus le rectangle
  drawCircle( VCentre, sides, 1.2*r, false ) ;  
  beginContour();
    // http://doc.gold.ac.uk/CreativeComputing/creativecomputation/?page_id=1142  
    // must be counterclockwise for a contour !!!!  
    drawCircle( VCentre, sides, 0.8*r, true ) ; // true draws anticlockwise, false clockwise
  endContour();
  endShape(CLOSE);  

  // Quadrant 4 (Sud Est) on trace  un doughnut dans un rectangle
  noStroke() ;
  fill( colQ4 );
  beginShape();
  vertex( width/2, height/2 );
  vertex( width, height/2 );
  vertex( width, height );
  vertex( width/2, height );
  VCentre = new PVector( 3*width/4,3*height/4) ;
  stroke(colQ4) ;
  strokeWeight(2);
  beginContour();
    drawCircle( VCentre, sides, 1.2*r, true ) ;  
  endContour();
  endShape(CLOSE);    
  beginShape() ;
  fill( colQ4 );

  drawCircle( VCentre, sides, 0.8*r, false ) ; // true draws anticlockwise, false clockwise

  endShape(CLOSE);    

}

void drawCircle(PVector Centre, int sides, float r, boolean aclockw) {
    
  // http://vormplus.be/blog/article/drawing-a-cylinder-with-processing
  float angle = 360 / sides;

    

  if ( aclockw ) {
    for (int i = sides; i >0 ; i--) {
        float x = Centre.x + cos( radians( i * angle ) ) * r; 
        float y = Centre.y + sin( radians( i * angle ) ) * r;
        vertex( x, y );        
        // println( i, " - ", i * angle ) ;
    }  
  }   else if ( !aclockw ) {
    for ( int i = 0 ; i < sides  ; i++) {
        float x = Centre.x + cos( radians( i * angle ) ) * r; 
        float y = Centre.y + sin( radians( i * angle ) ) * r;
        vertex( x, y ); 
        // println( i, " - ", i * angle ) ;
    }
  } 
  
}

Et maintenant ?

On sait tracer des cercles, faire des trous dans des objets. On peut explorer d’autres sujets !

Un sketch interactif (clavier ou souris) et des sauvegardes d’écran sous Processing 3

par Anne-Laure DELPECH | 18 Mar 2018 | Création numérique

Pour un projet je souhaitais pouvoir interagir avec un script Processing en utilisant le clavier ou les boutons de la souris. Et je voulais aussi pouvoir sauvegarder des « copies d’écran » en format image (png, tif, jpg) ou vectoriel (pdf). Enfin je voulais pouvoir changer l’écran temporairement pour afficher un « générique ».

J’ai réalisé un script de test qui montre comment réaliser des interactions (en Processing ou en Javascript avec p5.js). Je le met en ligne pour conserver la mémoire de ces essais. Et aussi pour le cas où ça puisse être utile à quelqu’un d’autre.

Le script de test

La version javascript (p5.js)

En javascript, il est visible sur CodePen :

See the Pen p5.js keyboard interactions and save by Delpech (@aldelpech) on CodePen.

En Processing 3.0

Le script peut être téléchargé ici : interactions_1.pde  (c’est un fichier zip, à décompresser)

Il fonctionne très bien et réalise les opérations suivantes :

Avec la souris :

• on trace des petits cercles colorés là où est la souris (avec Mouse X et Mouse Y)
• Lorsqu’on clique sur le bouton gauche de la souris, la saturation de la couleur est modifiée

Avec des touches du clavier

• z ou Z : on efface l’écran (ou canevas) ;
• g ou G : on affiche un nouvel écran jusqu’à ce que l’on appuie de nouveau sur g ou G
• r ou R : démarre puis arrête et sauvegarde l’enregistrement du dessin en mode vectoriel (pdf) ;
• p ou P : enregistre une seule itération de « draw » (1 frame) au format pdf ;
• w ou W : sauvegarder l’ecran en png ;
• 1 : modifie la teinte (entre 0 et 120)
• 2 : modifie la teinte (entre 120 et 240)
• 3 : modifie la teinte (entre 240 et 360)

Voici deux exemples d’images obtenues en tapant w ou W :

La conversion de Processing à p5.js

Je l’ai d’abord réalisé en langage Processing 3 avant de le convertir en p5.js avec cet excellent site de conversion. J’ai tout de même du faire des modifications manuelles, et en particulier :

• Supprimer les lignes :
  • import processing.pdf.*;
  • import java.util.Calendar;
  • textFont(createFont(« Arial »,30));
• La fonction de création d’un timestamp devient

ont à supprimer dans la version javascript

La fonction de création d’un timestamp devient

function timestamp() {

   var now = new Date();

   return  now.toISOString();

}

• Et pour la génération de pdf, elle ne fonctionne pas actuellement dans la version javascript. Si on veut vraiment que celà fonctionne, on peut essayer cet exemple sur github. Mais ca a l’air compliqué. D’ailleurs les auteurs du livre « generative design » ne mettent plus cette option dans les versions p5.js du code de la deuxième édition (qui sera disponible en anglais en octobre 2018 🙂 ).

Les interactions souris ou clavier : explications

tracer des petits cercles colorés à la position de la souris

Comme le script est très simple, je peux l’afficher en ligne et il fonctionne.

int r ;            // radius
float hue ;        // HUE of shape
float compHue;      // complementary hue
float sat ;        // saturation of shape's color

void setup() {

  size(600, 400) ;
  colorMode(HSB, 360, 100, 100, 100); 
  

  r = 40 ;
  hue = random(360) ;
  compHue = 0 ;
  sat = 50 ;
  background(0,0,99,100) ;  // white

}

void draw() {
 
    smooth();
    strokeWeight(6);
    compHue = (hue + 180) % 360 ;  // modulo 360 to turn in a circle !
    stroke( compHue, sat, 100, 70 );
    fill( hue, sat, 100, 70 );
    ellipse( mouseX, mouseY, r, r );

}

Le contenu du script est très simple. La seule difficulté se trouve en ligne 24 : compHue = (hue + 180) % 360  ; permet de « tourner dans un cercle » pour que la teinte complémentaire compHue  ne dépasse jamais 360 et soit toujours à 180 degré de la teinte hue .

Pour comprendre les interactions clavier et souris, j’ai regardé comment fonctionne le script P_2_0_03.pde des auteurs du livre Generative Design. Le code est en ligne ici.

Modifier la saturation de la couleur lorsqu’on clique sur le bouton gauche de la souris

Ca se fait en ajoutant une fonction void mouseReleased()  dans laquelle on définit la valeur de la variable sat .

Faire des choses différentes selon les touches de clavier utilisées

On peut le faire en utilisant switch et case (c’est propre) :

void keyReleased() {
  
  switch(key){
  case '1':
    // DO SOMETHING
    break;
  case 'w':
    // DO SOMETHING
    break;
  }
}

ou en utilisant des if

void keyReleased() {
  
  if (key == DELETE || key == BACKSPACE)  // DO SOMETHING ;
  if (key=='s' || key=='S') // DO SOMETHING;
}

Avec des touches du clavier

• z ou Z : on efface l’écran (ou canevas) ;
• g ou G : on affiche un nouvel écran jusqu’à ce que l’on appuie de nouveau sur g ou G
• r ou R : démarre puis arrête et sauvegarde l’enregistrement du dessin en mode vectoriel (pdf) ;
• p ou P : enregistre une seule itération de « draw » (1 frame) au format pdf ;
• w ou W : sauvegarder l’ecran en png ;
• 1 : modifie la teinte (entre 0 et 120)
• 2 : modifie la teinte (entre 120 et 240)
• 3 : modifie la teinte (entre 240 et 360)

Les sauvegardes d’image : explications

Je suis partie des scripts suivants :

• P_2_0_03.pde ( livre Generative Design
• Script de Jeff Thompson sur l’export de pdf ;
•  Script de Jeff Thompson sur la création d’images jpg, gif, png ou tif.

Je n’ai pas tout compris. En particulier j’ai longtemps essayé de créer des images plus grandes que le canevas, sans grand succès malgré deux sources très intéressantes (une question sur stackoverflow et l’idée 16 de cet article sur 25 solutions miracles pour Processing, en anglais) .

Pour réaliser des pdf avec processing

On doit utiliser la bibliothèque pdf, que l’on déclare par  import processing.pdf.*; .

Ensuite l’enregistrement du pdf se fait en indiquant :

beginRecord(PDF, "framePDF/" + timestamp() + ".pdf");

Cette ligne indique qu’il faut commencer à enregistrer en mode vectoriel tout ce qui se passe (tout ce qui avait été réalisé avant n’apparaît pas dans le pdf). Et le nom du fichier sera timestamp() + « .pdf, enregistré dans le répertoire « framePDF/ », qui sera créé si nécessaire.  timestamp() est une fonction tout à la fin de mon script : interactions_1.pde , qui nécessite la bibliothèque java.util.Calendar.

L’enregistrement du pdf s’arrête, et le fichier est enregistré, lorsque le script exécute la commande :

endRecord();

Pour les images, c’est encore plus simple. L’instruction suivante sauvegarde une « copie » du canevas dans un fichier timestamp_##.png du répertoire Wsaved.

save("Wsaved/" + timestamp() + "_##.png");

Le changement d’écran (générique par exemple) : explications

Enfin je voulais pouvoir changer l’écran temporairement pour afficher un « générique ».

J’ai utilisé presque tel quel ce que proposent les idées idées 14 & 15 de cet article, en anglais, sur 25 solutions miracles pour Processing.
Je trouve que c’est une solution élégante.

Et maintenant ?

Petit à petit j’ai constitué toutes les briques d’un travail que je veux réaliser avec une collègue. Il ne me reste plus qu’à les assembler. C’est chouette !

Processing : exploration des couleurs HSB et de l’ordre des dessins

par Anne-Laure DELPECH | 28 Fév 2018 | Création numérique

Je cherche à mieux comprendre comment gérer les superpositions d’objets et de  couleurs. Je vais tenter de comprendre progressivement et de noter au fur et à mesure ce que je comprends.

La boucle « draw »

Essayons d’abord un sketch simple pour explorer les notions de transparence de couleur, et de boucle ‘draw’.

J’ai préparé un sketch qui illustre les impacts des choix d’ordre d’affichage et de transparence.

Couleurs en HSB

Jusqu’à présent j’ai toujours utilisé des couleurs en RGB ou Hexadécimal (cf article ancien : choisir les bonnes couleurs pour un site (hexa, rgb) ) et j’ai toujours ignoré le mode HSB. Pourtant ce mode permettrait d’avoir plus de subtilité pour les choix de couleur automatique, comme dans Processing.

Pour définir que mon script Processing utilise HSB, j’indique colorMode(HSB, 360, 100,100,100) ;  dans le setup :

• Hue :  0  ou 360 est rouge,  60 est jaune, 120 est vert, 180 est cyan, 240 est bleu, 300 est mauve ;
• Saturation : 0 gris, 50 clair, 100 saturé ;
• Brightness : 0 noir, 50 foncé, 100 plus clair – Quelle que soit le Hue, un brightness faible donne une couleur noire ;
• Alpha transparency 0 = transparent, 100 = opaque

Les couleurs sont représentées sur un cone, expliqué très bien sur ce site en anglais : HSB: hue, saturation, and brightness, de  Tom Jewett. Sur cette page, en anglais, il y a des exemples très clairs et on comprend bien ce que sont les couleurs RGB, HSL et HSV. On pourra aussi lire cet article, toujours en anglais : The HSB Color System: A Practitioner’s Primer.

Le sketch qui suit utilise les couleurs suivantes (dans leur ordre d’apparition dans le code) :

• Canevas de taille 640×360 pixel et de fond blanc : background(360) ;  dans setup()
•  Grand Rectangle bleu violet opaque : fill(271, 100, 89, 100);
• Arc de cercle cyan avec transparence : fill(180, 100, 100,20);
• Cercle tracé par la souris rouge sang, opaque visible dans le coin en haut à gauche au démarrage du script : fill(353, 95, 73, 100); 
• Triangle jaune doré avec transparence :  fill(43, 94, 72, 10);
• Petits ronds de couleurs avec Hue variant de 0 à 360 par pas de 60 en haut (avec la boucle

for (int i = 0; i<=360; i+= 60) {

      fill(i, 100, 100, 100);

      ellipse( 150+i, 10 , 20, 20);

  }

On obtient ainsi l’écran suivant au démarrage du script :

L’impact de l’ordre des dessins dans Setup() et draw()

Voici le code en Processing

void setup() {
  size(640, 360, P2D);
  colorMode(HSB, 360, 100,100,100) ;
  background(360) ;  // white
}

void draw() {
  // Rectangle opaque (sans transparence) blue violet
  fill(271, 100, 89, 100);  
  rect(40, 50, 150, 200);
  
  // Arc de cercle (avec transparence) cyan (bleu clair) 
  fill(180, 100, 100,20);  
  arc(479, 300, 280, 280, PI, TWO_PI);  
  
  // Cercle tracé par la souris rouge sang opaque
  fill(353, 95, 73, 100);  
  noStroke();
  ellipse(mouseX, mouseY, 20, 20);
  
  // triangle avec transparence jaune doré  
  fill(43, 94, 72, 10);  
  triangle(100, 25, 150, 340, 450, 260); 
  
  for (int i = 0; i<=360; i+= 60) {
      fill(i, 100, 100, 100);
      ellipse( 150+i, 10 , 20, 20);
  }
}

Je l’ai converti en Javascript avec ce site puis mis, sans aucune modification, dans Codepen :

See the Pen Exploration des couleurs et layers Processing – 1 by Delpech (@aldelpech) on CodePen.

On obtient des écrans comme celui-ci par exemple lorsqu’on manipule la souris dedans :

Ce que je comprends à ce stade :

• Le Canevas de fond blanc est défini dans le setup() et n’est donc plus jamais redessiné. C’est pourquoi on voit la trace de la souris dessus. Si background() était défini au tout début de la fonction draw(), on ne verrait pas la trace du passage de la souris.
• Tous les objets qui sont dessinés dans draw() effacent les traces de la souris lorsqu’ils sont dessinés. C’est pourquoi les traces ne sont visibles que dans le canevas sans objets.
•  Le grand Rectangle bleu violet opaque est dessiné en premier. Il apparaît donc sous tous les autres objets.
• L’Arc de cercle cyan avec transparence est dessiné ensuite. Il a beau être transparent, il n’y a pas de trace de souris en dessous puisque la souris est dessinée après.
• Lorsqu’on bouge la souris, un cercle rouge sang est. Il est visible par dessus les objets déjà présents. Attention on le voit dans le triangle jaune car il est transparent. S’il ne l’était pas le cercle de la souris ne serait pas visible car il est dessiné après.
• Triangle jaune doré avec transparence : on observe en dessous les traces de la souris et il laisse voir également le cercle de la souris à l’instant de la capture d’écran car il est dessiné par dessus l’arc de cercle et sous le triangle.

Et maintenant ?

Oui, j’ai déjà un peu mal à la tête !

Dans le prochain article, ce sera encore plus compliqué car nous explorerons les calques. Maintenant que nous avons vu l’impact de la transparence, nous n’utiliserons que des couleurs sans transparence pour ne pas brouiller le message !

Processing : exploration des formes (class, pshape,…)

par Anne-Laure DELPECH | 11 Fév 2018 | Création numérique

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.