Générateur de visuels sur Processing

Bonjour à tous, je suis novice ici et novice aussi en programmation et Julien m’a conseillé de venir vous voir :}
Je suis étudiante en design graphique multimédia et passionnée par le NetArt, mais voilà j’ai besoin de votre aide! :grin:

Je suis en train de réaliser un petit programme générateur de visuels grâce à un tracking de mouvement (je bosse avec un arduino) et je n’arrive pas à résoudre ce problème:
Pour l’instant un carré nouveau est généré à chaque foi qu’un nouveau X/Y est détecté et croit tant que la position en X et en Y ne change pas. J’aimerais garder ce principe mais ajouter à cela que les carrés précédant un nouveau carré n’arrêtent pas de grandir et ce de manière continue. J’imagine qu’il faut garder le principe de +1 sur la longueur et la largeur du carré à chaque boucle de draw mais je ne sais pas trop comment m’y prendre pour la suite. Faut-il une fonction qui garde en mémoire chaque carré et y ajoute +1 à chaque draw?

J’espère que vous pourrez me filer un coup de code, merci d’avance!

Voici une version du code test qui fonctionne au mouvement de la souris ( et non grâce au données de l’arduino) :

int j=0; 
int max=1;
int longueur=10; 
int largeur=10;
float value=0; 
int mouseXold=displayWidth/2;
int mouseYold=displayHeight/2;

void setup() {
 
 size(displayWidth, displayHeight);
 background (255);
 smooth();

}


void draw() {
strokeWeight(1);
noFill(); 
stroke(random(255),random(255),random(255));
rectMode(CENTER);

for(j=0;j<max;j++){
    if(mouseXold != mouseX ||mouseYold != mouseY  ){
      mouseXold = mouseX;
      mouseYold = mouseY;
      longueur=5;
      largeur=5;
    }
    longueur=longueur+1; 
    largeur=largeur+1; 
    translate(width/2, height/2);
    rotate(value);
    translate(-width/2, -height/2);
    rect(mouseX,mouseY,longueur,largeur); 
    redraw();
 }
}

Il faut que tu gères une liste ou un tableau de tes anciens carrés, et que ta fonction draw les dessines les uns après les autres.
La tu as des données que pour un seul carré, donc quand tu détectes un nouveau carré, l’ancien est perdu. Il faut donc le mémoriser.
Il faut aussi que tu ajoutes les conditions de fin d’agrandissement des carrés initiaux, à moins que tu ne veuillent qu’ils grossissent indéfiniment.

Tu programmes en quel langage ? Du C ? du C++ ?
en C, tu peux utiliser une structure carre qui contiendra tes données pour un carré et manipuler un tableau de carre.
en C++, tu peux utiliser des listes ou des vecteurs avec une classe carré qui contiendra les données de ton carré.

Dans tout les cas, la structure de ton programme sera :

main{
tant que pas fini
{
si (mouvement)
ajout d’un nouveau carré à ma liste de carré

pour chaque carré de ma liste de carré
{
agrandissement de la taille du carré courant
dessin du carré courant
}
}
}

Merci beaucoup pour ta réponse!
Je programme en Java, je pense que je vais essayer avec une classe
Je reviens vers toi quand j’aurai avancé :eyeglasses:

pas de problème :smile:

Regarde du coté des Vecteurs en Java. C’est une liste simple à gérer.

Mais qui est ce Julien qui conseille de venir ici :slight_smile: C’est pas moi deja!

Arraylist est son ami :smile:

Défini une classe carré avec tout ce qui correspond à un carré et stock ca dans une arraylist (arraylist …)

En java les vecteurs se trouvent dans vecmat et ce sont des vecteurs au sens mathématiques et pas « collection » alors que les arraylist sont de base dans java.

Processing (et surtout son ide) c’est tres bien pour faire des petits exemples mais rien ne t’empêche de l’utiliser avec éclipse par exemple, si ton projet est amené à grandir, se sera plus facile.

Je pensais que c’etait un certain Julien :innocent:

(je suis déjà loin)

3 « J'aime »

Bienvenue sur le forum. Pour ceux qui ne connaissent pas (rapport aux questions sur le langage utilise), Processing c’est ca https://processing.org/

Comme recommande plus haut, il faut que tu gardes quelque part les carres que tu vas creer. Pour cela, tu as plusieurs types de structures de donnees qui te permettent de conserver des collections d’objets.

  • les Tableaux (qui se declarent avec la syntaxe T[] - T etant le type des objets que tu veux conserver). Qui ont une taille fixe.
  • les “listes” (en l’occurence, ArrayList ici, qui est un tableau dynamique, et se redimensionne au besoin)

Tu trouveras un tutoriel ici sur l’utilisation des arraylists dans Processing. C’est un espagnol qui parle anglais, mais ca m’a l’air assez comprehensible.

En esperant que ca couvre ton cas d’utilisation et reponde a ta question.

En creusant un peu plus, je suis tombe sur ce post sur StackOverflow, en anglais aussi, mais qui m’a l’air assez exhaustif http://stackoverflow.com/questions/12532228/how-to-use-arraylist-in-processing

2 « J'aime »

oups, j’ai confondu :frowning: j’étais sur que l’arraylist s’appelait vector, chais pas pourquoi :smile:
Merci pour la rectification !

l’habitude C++ ?

C# peut etre. Je sais plus ou j’ai vu ca :slight_smile: Et comme ca fait un bail que j’ai pas touché à Java :smile:

Non non, tu avais raison. “Vector” est bien une liste en Java, et c’était bien la classe à utiliser jusqu’à l’introduction des “Collections 2” qui ont apportée la classe “ArrayList” qui fait la même chose mais sans synchronisation des accès (donc plus rapidement si tu n’as pas besoin de la dite synchronisation).

1 « J'aime »

Je me trompe peut etre mais dans les gideline de sun il me semble qu’il etait conseillé de ne plus utiliser vector mais d’utiliser des collections synchronisées (Collections.synchronizedCollections) Ce qui laisse la possibilité d’utiliser des implémentations différentes de List tandis que l’utilisation de Vector force à utiliser une implémentation proche d’ArrayList.

alors a voir si je fais de travers depuis tout ce temps ou pas :smiley:

C’est exact, ça fait 10 ans que je n’ai plus tapé “Vector” dans une ligne de code, elle n’est là que pour des raisons de compatibilité (mais fonctionne bien si tu en acceptes les limitations).

C’est moi Julien (et je comprends rien à ce thread) :D.

1 « J'aime »

Ca colle avec la dernière fois que j’ai dev en Java :smiley:

Merci pour les infos en tout cas :smile:

Bonsoir à tous,
merci pour vos réponses, j’ai remanié le code mais je ne pense pas y être encore, par ailleurs processing m’affiche l’erreur “the constructor Shape(int,int)” does not exist" et je ne comprends pas pourquoi.
Donc pour l’instant je suis bloquée là déjà parce qu’il m’est impossible d’exécuter le programme.

J’attends vos lumières pour ça, et pour la résolution du problème dans son ensemble haha ^^ merci merci merci !

ArrayList shapeArray; 
int mouseXold=displayWidth/2;
int mouseYold=displayHeight/2;

void setup() {
 
 size(displayWidth, displayHeight);
 background (255);
 smooth();
 //initialisation
 shapeArray = new ArrayList(); 

}


void draw() {
  
  Shape myShape = new Shape(mouseX, mouseY);
  shapeArray.add(myShape);
 
if(mouseXold != mouseX ||mouseYold != mouseY  ){
      
      mouseXold = mouseX;
      mouseYold = mouseY;
      Shape myShape = new Shape(200,200);
      shapeArray.add(myShape);

          for(int i = 0; i < shapeArray.size(); i++) {
          Shape nb = (Shape) shapeArray.get(i);
          nb.run();
          shapeArray=shapeArray+1; 
          shapeArray=shapeArray+1;  }
      }
}

Mon onglet de classe nommé “Shape”

class Shape
{ 
  color colour; 
  float shapeWidth=5; // largeur du carré 
  float shapeHeight=5; //hauteur du carré
  int j=0; //variable d'incrémentation carré dans carré
  int max=1; //nombre d'itération, soit le nb de carrés dans le carré
  
  //constructeur
  Shape (color colour, float shapeWidth, float shapeHeight)  { 
    this.colour = colour; 
    this.shapeWidth = shapeWidth; 
    this.shapeHeight = shapeHeight; 
  } 
  
  void display() 
  { 
    smooth(); 
    stroke(random(255),random(255),random(255)); 
    strokeWeight(1);
    noFill();
    rectMode(CENTER); 
    rect(mouseX, mouseY, shapeWidth, shapeHeight); 
    
    for(j=0;j<max;j++){
    shapeWidth=shapeWidth+1; 
    shapeHeight=shapeHeight+1;    
  } 
    
   
  } 
}

tu as cette ligne

Shape myShape = new Shape(200,200).

“new Shape( x, y )” c’est faire appel a ce que l’on nomme un constructeur. En l’occurence, tu appelles un constructeur avec 2 arguments qui sont de type entier, et qui ont comme valeur 200 et 200. Du coup, Processing s’attend a trouver un constructeur dans la classe Shape qui correspond a cette signature: Shape(int, int).

Or, dans Shape, on voit que le constructeur a la signature suivante: Shape(colour, float, float). Du coup, Processing il pige pas, il ne sait pas quoi creer vu que rien ne correspond.

Soit tu remplaces ton new Shape par quelque chose plus proche de la signature existante:
new Shape( , 200f, 200f);

Soit tu implementes un nouveau constructeur, avec la signature Shape(int, int), et tu fais les conversions et initialisations necessaires dans ce constructeur (une couleur, transformer les int en float, etc)

Merci Ravine, ça fonctionne! Cependant je n’arrive toujours pas à faire grandir tous les carrés indéfiniment.
De plus je n’arrive pas à faire en sorte que chaque carré créé par un nouveau mouseX, mouseY soit petit (tout grandit proportionellement), alors que j’avais réussi à le faire sans les Arraylist. Je sais que c’est un soucis « d’emboitement » mais là je bloque vraiment… Je suis novice en code et j’ai une formation limitée en mathématiques et je galère depuis 3 jours :confused:
Si quelqu’un pouvait m’aider à mettre les chose à la bonne place je lui serais ultra reconnaissante :pray:

ArrayList shapeArray; 
int mouseXold=displayWidth/2;
int mouseYold=displayHeight/2;
float shapeWidth=10; // largeur du carré 
float shapeHeight=10;

void setup() {
 
 size(displayWidth, displayHeight);
 background (255);
 smooth();
 //initialisation
 shapeArray = new ArrayList(); 

}


void draw() {
  
  Shape myShape = new Shape(int(10), int(10));
  shapeArray.add(myShape);
 
if(mouseXold != mouseX ||mouseYold != mouseY  ){
      
      mouseXold = mouseX;
      mouseYold = mouseY;
      shapeWidth=5;
      shapeHeight=5;
    }
   
      
      shapeArray.add(myShape);

          for(int i = 0; i < shapeArray.size(); i++) {
          Shape carre = (Shape) shapeArray.get(i);
          carre.run();
            }
      }

Onglet classe shape

class Shape
{ 
  float shapeWidth=5; // largeur du carré 
  float shapeHeight=5; //hauteur du carré
  int j=0; //variable d'incrémentation carré dans carré
  int max=1; //nombre d'itération, soit le nb de carrés dans le carré
  
  //constructeur
  Shape (float shapeWidth, float shapeHeight)  { 
    this.shapeWidth = shapeWidth; 
    this.shapeHeight = shapeHeight; 
  } 
  
  void run() {
    display();
    growth();
  }
  
  void display() 
  { 
    smooth(); 
    stroke(random(255),random(255),random(255)); 
    strokeWeight(1);
    noFill();
    rectMode(CENTER); 
    rect(mouseX, mouseY, shapeWidth, shapeHeight); 
  }
  
  void growth() {
    for(j=0;j<max;j++){
    shapeWidth=shapeWidth+1; 
    shapeHeight=shapeHeight+1;    
  } 
    
   
  } 
}

En fait, il y a plusieurs petits points qui ne sont pas à leur place :

  • Tu ajoutes des carrés à ta liste deux fois dans draw(); et deux fois le meme carré.
  • Tu utilises un constructeur avec une taille, mais finalement tu as aussi une taille de defini dans les membres de ta classe, et tu la passes en dur, c’est pas utile.
  • Tu memorises pas la position des tes carrées dans la classe. C’est ca qu’il faut passer au constructeur, pas la taille.

Essaye ca :

Main

ArrayList shapeArray; 
int mouseXold=displayWidth/2;
int mouseYold=displayHeight/2;

void setup() {
 
 size(displayWidth, displayHeight);
 background (255);
 smooth();
 //initialisation
 shapeArray = new ArrayList(); 
}


void draw() {
   if(mouseXold != mouseX ||mouseYold != mouseY  ){
         // on ajoute un carre que si on bouge la souris, à la nouvelle position, de taille initiale
         Shape myShape = new Shape(mouseX, mouseY); 
         shapeArray.add(myShape);
         mouseXold = mouseX;
         mouseYold = mouseY;
    }
    for(int i = 0; i < shapeArray.size(); i++) {
       Shape carre = (Shape) shapeArray.get(i);
        carre.run();
     }
 }

Onglet classe shape

class Shape
{ 
  float _shapeWidth=5; // largeur du carré 
  float _shapeHeight=5; //hauteur du carré
  int _posX, _posY;
  
  //constructeur
  Shape (float mouseX, float mouseY)  { 
    _posX= mouseX; 
    _posY = mouseY; 
  } 
  
  void run() {
    display();
    growth();
  }
  
  void display() 
  { 
    smooth(); 
    stroke(random(255),random(255),random(255)); 
    strokeWeight(1);
    noFill();
    rectMode(CENTER); 
    rect(_posX, _posY, _shapeWidth, _shapeHeight); 
  }
  
  void growth() {
    _shapeWidth++; 
    _shapeHeight++;    
  } 
    
   
  } 
}