Bonjour,

Pour former ton 4, la bibliothèque le construit avec un certain nombre de disques. Ce nombre varie en fonction de la police, la taille et le paramètre que tu passes avec la méthode RCommand.setSegmentLength(5). Pour le programme ci-dessous, j'ai 195 points de définis.
J'ai créé une classe permettant de stocker les différents éléments constitutifs dont tu as besoin.
C'est un 4 qui explose en fonction des mouvements sur l'axe X du pointeur.
Il te reste à intégrer la formation en cercle.

import geomerative.*;

RFont font;

ArrayList<Balle> balles;
String texte = "4";

void setup() {
  size(800, 800);
  background(255);
  smooth();
  RG.init(this); 
  font = new RFont("FreeSans.ttf", 200, CENTER);

  fill(255, 0, 0);
  noStroke();

  RCommand.setSegmentLength(5);//ASSIGN A VALUE OF 10, SO EVERY 10 PIXELS
  RCommand.setSegmentator(RCommand.UNIFORMLENGTH);

  RGroup myGroup = font.toGroup(texte); 
  myGroup = myGroup.toPolygonGroup();

  RPoint[] myPoints = myGroup.getPoints();
  balles = new ArrayList<Balle>();
  for (int i = 0; i < myPoints.length; i++) {
    balles.add(new Balle(myPoints[i].x + width /2, myPoints[i].y + height / 2));
  }
}

void draw() {
  background(255);
  for (Balle b : balles) {
    b.miseAJour((float)mouseX / width);
    b.affichage();
  }
}

class Balle {
  PVector origine, destination, position;
  
  Balle(float x, float y) {
    origine = new PVector(x, y);
    position = origine.get();
    destination = new PVector((int)random(0, width), (int)random(0, height));
  }
  
  void miseAJour(float parametre) {
    position = PVector.lerp(origine, destination, parametre);
  }
  
  void affichage() {
    ellipse(position.x, position.y, 10, 10);
  }
}

C'est très agréable d'aider quelqu'un qui a fait des recherches préalablement.

Si tu as Processing 2.1, ce que je te recommande, va dans Sketch > Import Library > Add Library …
Une fenêtre de dialogue s'ouvre.
Dans le champ de recherche tape geomerative puis clique sur geomerative
Un bouton installe apparaît et clique dessus

Dans la documentation de la méthode RFont :
http://www.ricardmarxer.com/geomerative … html#RFont(java.lang.String,%20int,%20int)

Le premier paramètre est le chemin pour trouver le fichier rtf de la police.
Soit tu copies la police que tu souhaites dans le répertoire data de ton sketch
Soit tu prends celle que je te joint

le merci pour ton code de craven est je trouve un peu bref, j'aimerais ajouter TRES JOLI CODE
Déjà faut connaître geomerative, ce qui est pas évident...
En plus faut avoir un peu pratiqué cette librairie et en fin faut avoir l'idée d'associer un objet balle pour dissocier les coordonnées de chaque point - objet formant la lettre, j'aime beaucoup BRAVO

Lorsque tu parles de texte simple, tu veux dire du texte qui n'explose pas !
Si oui alors, il faut le mettre dans le draw() normalement.
Si non, c'est la variable texte qu'il faut modifier.

Voici le code pour ton logo qui se transforme. C'est une touche qui fait office de déclencheur :

import geomerative.*;

RFont font;

ArrayList<Balle> balles;
String texte = "4";

void setup() {
  size(800, 800);
  background(255);
  smooth();
  RG.init(this); 
  font = new RFont("FreeSans.ttf", 200, CENTER);

  fill(255, 0, 0);
  noStroke();

  RCommand.setSegmentLength(5);
  RCommand.setSegmentator(RCommand.UNIFORMLENGTH);

  RGroup myGroup = font.toGroup(texte); 
  myGroup = myGroup.toPolygonGroup();

  RPoint[] myPoints = myGroup.getPoints();
  balles = new ArrayList<Balle>();
  for (int i = 0; i < myPoints.length; i++) {
    balles.add(new Balle(110 * cos((TWO_PI * i) / myPoints.length), 110 * sin((TWO_PI * i) / myPoints.length), 
    myPoints[i].x - 10, myPoints[i].y + 110));
  }
  println(myPoints.length);
}

void draw() {
  background(255);
  translate(width / 2, height / 2);
  for (Balle b : balles) {
    b.miseAJour();
    b.affichage();
  }
}

void keyPressed() {
  for (Balle b : balles) {
    b.etat = true;
  }
}

class Balle {
  PVector[] destination;
  PVector position;
  int compteurPosition;
  float compteur;
  boolean etat;

  Balle(float x, float y, float a, float b) {
    destination = new PVector[4];
    destination[0] = new PVector(x, y);
    destination[1] = PVector.random2D();
    destination[1].mult(random(500));
    destination[2] = new PVector(a, b);
    destination[3] = PVector.random2D();
    destination[3].mult(random(500));    
    position = destination[0];
    compteurPosition = 0;
    compteur = 0.0;
    etat = false;
  }

  void miseAJour() {
    if (etat) {
      compteur += 0.02;
      if (compteur > 1) {
        compteur = 0;
        compteurPosition = (compteurPosition + 1) % destination.length;
        if (compteurPosition % 2 == 0) {
          etat = false;
        }
      }
    }
    position = PVector.lerp(destination[compteurPosition], destination[(compteurPosition + 1) % destination.length], compteur);
  }

  void affichage() {
    ellipse(position.x, position.y, 10, 10);
  }
}

Dernière modification par Mushussu (2014-05-13 15:22:42)

Toute la partie propre à geomerative est celle que l'on retrouve dans mes exemples.
On obtient un tableau de points correspondant au contour du chiffre.
Ensuite pour chaque points j'initialise les éléments d'une ArrayList.

C'est la construction de la classe Balle qui est primordiale.
Les variables de la classe :
J'ai fait un tableau des différentes destination de la balle que j'initialise dans le constructeur Balle()
destination[0] est le cercle
destination[1] une place aléatoire
destination[2] est le 4
destination[3] est une autre place aléatoire

position est la position de la balle qui est au départ celle du cercle.
compteurPosition indique quelle est la figure en cours
compteur sert pour le pas de l'animation
état indique si un changement est en cours

J'ai utilise des PVector pour les différentes coordonnées car ils disposent de fonction très avancées :
http://processing.org/reference/PVector.html

Notamment la méthode lerp() :
http://processing.org/reference/PVector_lerp_.html
Qui permet de déterminer un PVector situé sur la ligne formée par les deux autres en fonction d'un indice. Je l'ai utilisé dans la méthode miseAJour().

Pour l'animation, j'utilise la variable compteur qui s'incrément à chaque tour.
A chaque fois que compteur est supérieure à 1 on passe à la destination suivante. Elle s'arrête une fois sur deux c'est dire lorsque qu'il y'a une figure à la fin (cercle ou 4).

Voilà, j'espère avoir été clair.

Ce projet est pour un diplôme ?
Bon courage pour la suite.

Attention, ArrayList est une classe de Processing, c'est une forme de stockage des données dynamiques. Une forme de tableau dont on peut ajouter et enlever de éléments facilement.
http://processing.org/reference/ArrayList.html

Pour les autres objets, réfère toi à la documentation de geomeratoive :
http://www.ricardmarxer.com/geomerative … index.html