Générateur de visuels sur Processing

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++;    
  } 
    
   
  } 
}

La programmation, ca parait complique comme ca, mais au final ecrire un programme, ce n’est ni plus ni moins qu’ecrire une recette de cuisine. Le plus chiant etant bien souvent de determiner quelles sont les etapes dont tu vas avoir besoin pour arriver a ton resultat.

Si tu es bloquee, et si tu veux apprendre par toi meme sans avoir la frustration de ne pas voir ton projet avancer aussi rapidement que tu le souhaites, tu peux suivre les cours dispos sur le site KhanAcademy en parallele

Garde bien en tete que ce n’est pas exactement le meme langage (JS et Java sont cousins eloignes, mais ont quelques differences assez fondamentales), mais ce que tu y apprendras restera applicable quelle que soit la technologie/le langage que tu aborderas. Les principes de base de programmation sont commun a quasi toutes les techs (les types, definir tes types, les structures de donnees, les collections, les algorithmes, etc).

En esperant que ca te debloque.

1 « J'aime »

Bon alors, ca marche ?

Je suis désolée de pas avoir répondu plutôt, j’ai chopée une gastro et bcp de boulot cette semaine. Bref.

C’est génial!! Oui c’est exactement ça que je cherchais. Bon maintenant je me rend compte que les lignes se croisent entre elles et que j’aimerais que chaque carré s’arrêtent là où un autre commence donc je suis repartie dans des recherches. Je regarde les forces sur java, je me dis que ça peut peut être être une solution. A moins que vous ayez une meilleure idée?

Je m’entraine sur https://codeacademy.com mais je vais aller voir du côté de Khan aussi alors :smile:

Merci beaucoup en tout cas, vous m’avez énormément aidée! :beers:

Moi je te conseille les cours de l’Ecole Polytechnique de Lausanne sur Coursera que je trouve vraiment pas mal. Il y a en plus des exercices pour s’entrainer.
Part 1 : https://www.coursera.org/course/initprogjava
Part 2 : https://www.coursera.org/course/intropoocpp

Pas de soucis :smile:

A bah super, content que ca fasse ce que tu voulais.

Si tu veux pas que les lignes se croisent et que chaque carré s’arrête où un autre commence, c’est plus complexe : il faut, avant de faire grossir le carré en cours, que tu verifies s’il ne va pas couper un autre carré, et donc parcourir tous les autres carrés pour tester leurs positions.
C’est un gros cran au dessus, mais c’est bien sur faisable :wink:

You’re welcome :smile:

Hello! Je suis de retour!
Je suis en train de connecter mon Arduino à Processing et je reçois ce message d’erreur quand je lance le programme : ArrayIndexOutOfBoundsException: 1
Il me semble que ça doit être un problème avec mon tableau qui n’est pas assez grand, mais je m’en sors pas trop. Une idée?

import glitchP5.*; //import Glitch P5
String portName = "/dev/cu.usbmodem1421"; 
String serial;   //déclaration de serial comme résultat de la communication
import processing.serial.*;
Serial myPort;
int linefeed = 10; 
int numSensors = 3; 
float sensors[]; 
float pSensors[];
float bornexinf=0; 
float bornexsup=0;
float borneyinf=0; 
float borneysup=0; 
float rotxold=0; 
float rotyold=0; 
//chaine pour la vibration
int end = 10;    //Le nombre 10 en ASCII pour linefeed marquant la fin du serial.println
GlitchP5 glitchP5;
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é
int longueur=10; // longueur du carré 
int largeur=10; //largeur du carré
float value=0; //variable pour la rotation
float mouseXold=displayWidth/2;
float mouseYold=displayHeight/2;

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

  myPort = new Serial(this, portName, 9600);
  myPort.bufferUntil(linefeed);
  serial = myPort.readStringUntil(end); // fonction qui lit la chaine de caractères depuis le port série jusqu'à println et ensuite assigne string à notre variable qui appelle serial
  serial = null; // initialisation de serial
 //noiseSeed(0);
 glitchP5 = new GlitchP5(this); // initiate the glitchP5 instance;
}


void draw() {
  
  while (myPort.available() > 0) { //tant qu'il n'y a pas de données provenant du port  on lit l'entrée série
    serial = myPort.readStringUntil(end);
  }
    if (serial != null) {  
      String[] a = split(serial, ','); //on créé un tableau qui définit une chaine séparée par des virgules. 
      println(a[0]); //on affiche la première valeur du tableau
      
    }
  
  if((pSensors != null)&&(sensors != null)) { 
    float  rotx = (sensors[0]*10);
    float  roty = (sensors[1]*10);
    float  rotz = (sensors[2]*PI)/180;
    
strokeWeight(1);
noFill(); 
stroke(random(255),random(255),random(255));
translate(500,150);
rectMode(CENTER);

for(j=0;j<max;j++){
    longueur=longueur+1; 
    largeur=largeur+1; 
    translate(width/2, height/2);
    rotate(value);
    translate(-width/2, -height/2);
    rect(rotx,roty,longueur,largeur); 
    redraw();
    bornexinf=rotxold-5; 
    bornexsup=rotxold+5;
    borneyinf=rotyold-5; 
    borneysup=rotyold+5; 
    if(bornexinf>rotx || rotx>bornexsup || borneyinf>roty || roty>borneysup){
    longueur=5;
    largeur=5;
    }
    rotxold=rotx;
    rotyold=roty;
}
  }
 glitchP5.run(); 
}


void serialEvent(Serial myPort) {

  String myString = myPort.readStringUntil(linefeed);
       if (myString != null) {
       myString = trim(myString);
       pSensors = sensors;
       sensors = float(split(myString, ','));

            for (int sensorNum = 0; sensorNum < sensors.length; sensorNum++) {
            print("Sensor " + sensorNum + ": " + sensors[sensorNum] + "\t");
    }
       println();
  }
}

void mousePressed()
{
 // trigger a glitch: glitchP5.glitch(  posX,       // 
 //                               posY,       // position on screen(int)
 //          posJitterX,     // 
 //          posJitterY,     // max. position offset(int)
 //          sizeX,       // 
 //          sizeY,       // size (int)
 //          numberOfGlitches,   // number of individual glitches (int)
 //          randomness,     // this is a jitter for size (float)
 //          attack,     // max time (in frames) until indiv. glitch appears (int)
 //          sustain      // max time until it dies off after appearing (int)
 //              );

 glitchP5.glitch(mouseX, mouseY, 200, 400, 200, 60, 120, 10.0f, 20, 1);
}

a première vu, il manque initialisation du tableau : float sensors = new float[6]; par exemple

Je pense que ca vient de la. L’erreur ArrayOutOfBoundException veut dire que tu veux acceder à un element d’un tableau qui n’existe pas.
Or cette partie de code ne teste pas le retour de ton split. Si le tableau est vide, ton sensors[sensorNum] tape dans une zone qui n’existe pas, et qui va te renvoyer une exception.

Rajoute un test sur sensors avant ton for.

Je comprends pas trop ce que tu me suggères :confused:

Cette ligne est censé te retourner dans le tableau sensors une liste de float séparé par des virgules.

Derrière, tu parcours le tableau (la boucle for) pour faire des trucs avec ces chiffres.
Tout marche bien si ta variable myString contient bien des floats séparés par des virgules.

Mais si il y a une erreur sur le contenu de myString (typiquement, il y a rien ou autre chose que des float séparé par des virgules), ton tableau sensors va etre vide, et ton sensors[sensorNum] va te renvoyer l’erreur ArrayIndexOutOfBoundsException.

Donc regarde partout dans ton code ou tu accèdes a des tableaux.

Avant d’utiliser le tableau “sensors”, apres le split il faut s’assurer avec sensors.length qu’il y a bien le nombre d’éléments souhaité

Ok, je me replonge dedans! Merci!

hmmm ca fait une paye que je n’ai pas fait de java, mais la syntaxe ne serait pas plutot du style

float[] sensors;

les [] se declarent sur le type d’abord (en l’occurence, on declare ici un tableau de floats, qui s’appelle “sensors”), et ensuite on y accede en faisant sensors[index] ?

En fait les deux marchent. Mais ta syntaxe est plus propre et cohérente.

Enfaite dans la logique de Java les tableaux statistiques ne doivent pas être utilisés. De même les opérateurs +_*/ et les types primitifs devraient être remplacés par leur version objet (en java tout est objet)… Mais bon c’est pour les puristes :smiley:

Salut tout le monde!
J’ai tout repris à 0 et mon code est beaucoup plus propre et… ça marche! :tada:

Cependant il me reste un mini soucis à régler et je dois plus voir clair là mais je m’en sors pas et je suis à CA de terminer… ^^
Je cherche à envoyer des 1 et des 0 dans processing pour que le glitch soit initialisé quand il reçoit des 1.
Pour cela je prévois dans mon code arduino que lorsque le capteur de vibration n’est pas à 670 ou 671 (valeur au « repos ») et détecte donc du mouvement il m’envoie des 1, et des 0 si pas de vibrations.

Mais voilà, ça ne marche pas, il ne m’inscrit dans la console que les valeurs originales: 670,671,622…
Je ne vois pas trop où je me suis emmêlés les pieds, si quelqu’un peut jeter un œil frais dessus ce serait formidable!

Mille Merci :balloon:

#include<Wire.h>
#include<stdio.h> //librairie pour utiliser le printf
const int MPU=0x68;  // I2C address of the MPU-6050
int16_t GyX,GyY,GyZ;
int sensorValue1, sensorValue2, sensorValue3, sensorValue4;
int valVibrator=0; 
int val=0; 

void setup(){
  Wire.begin();
  Wire.beginTransmission(MPU);
  Wire.write(0x6B);  // PWR_MGMT_1 register
  Wire.write(0);     // set to zero (wakes up the MPU-6050)
  Wire.endTransmission(true);
  Serial.begin(9600);

}
void loop(){
  Wire.beginTransmission(MPU);
  Wire.write(0x3B);  // starting with register 0x3B (ACCEL_XOUT_H)
  Wire.endTransmission(false);
  Wire.requestFrom(MPU,6,true);  // request a total of 6 registers
  GyX=Wire.read()<<8|Wire.read();  // 0x43 (GYRO_XOUT_H) & 0x44 (GYRO_XOUT_L)
  GyY=Wire.read()<<8|Wire.read();  // 0x45 (GYRO_YOUT_H) & 0x46 (GYRO_YOUT_L)
  GyZ=Wire.read()<<8|Wire.read();  // 0x47 (GYRO_ZOUT_H) & 0x48 (GYRO_ZOUT_L)
  val=analogRead(A0); 
  Serial.println(val); 
 if(val!=670 || val!=671){
   valVibrator=1;  
 }
  sensorValue1 = GyX/10;  // read sensor in analog input 0
  sensorValue2 = GyY/10;  // read sensor in analog input 1
  sensorValue3 = GyZ;  // read sensor in analog input 2
  sensorValue4 = valVibrator;  // read sensor in analog input 3
  Serial.print(sensorValue1, DEC);  // print sensor 1
  Serial.print(",");                // print ','
  Serial.print(sensorValue2, DEC);  // print sensor 2
  Serial.print(",");                // print ','
  Serial.print(sensorValue3, DEC);  // print sensor 3
  Serial.print(",");                // print ','
  Serial.println(valVibrator, DEC);  // print sensor 4 and newline (println)
  delay(200);   // wait 200ms for next reading


  valVibrator=0;

}

PROCESSING

import processing.serial.*;
import glitchP5.*; //import Glitch P5
////codearduino/////////////////////////////
Serial myPort;
int linefeed = 10;   // Linefeed in ASCII
int numSensors = 4;  // we will be expecting for reading data from four sensors
int sensors[];       // array to read the 4 values
int pSensors[];      // array to store the previuos reading, usefur for comparing
// actual reading with the last one
String portname="/dev/cu.usbmodem1421";
/////codedessin/////
GlitchP5 glitchP5; // declare an instance of GlitchP5. only one is needed
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é
int longueur=10; // longueur du carré 
int largeur=10; //largeur du carré
float value=0; //variable pour la rotation
int mouseXold=displayWidth/2;
int mouseYold=displayHeight/2;
float bornexinf=0; 
float bornexsup=0;
float borneyinf=0; 
float borneysup=0; 

void setup() {
size(displayWidth, displayHeight);
 background (255);
 smooth();
 glitchP5 = new GlitchP5(this); // initiate the glitchP5 instance;
  myPort = new Serial(this, portname, 9600);
  // read bytes into a buffer until you get a linefeed (ASCII 10):
  myPort.bufferUntil(linefeed);
}

void draw() {
glitchP5.run(); 
strokeWeight(1);
noFill(); 
stroke(random(255),random(255),random(255));
rectMode(CENTER);
  if ((pSensors != null)&&(sensors != null)) {
   
    for (int i=0; i < numSensors; i++) {
      float f = sensors[i] - pSensors[i];  // actual - previous value
      if (f > 0) {
        println("sensor "+i+" increased by "+f);  // value increased
      }
      if (f < 0) {
        println("sensor "+i+" decreased by "+f);  // value decreased
      }
    }
    for(j=0;j<max;j++){
   longueur=longueur+1; 
    largeur=largeur+1; 
    translate(width/2, height/2);
    rotate(value);
    translate(-width/2, -height/2);
    rect(sensors[0],sensors[1],longueur,largeur); 
    redraw();
    
    bornexinf=mouseXold-50; 
    bornexsup=mouseXold+50;
    borneyinf=mouseYold-50; 
    borneysup=mouseYold+50; 
    if(bornexinf>sensors[0] || sensors[0]>bornexsup || borneyinf>sensors[1] || sensors[1]>borneysup){
    longueur=5;
    largeur=5;
    }
    mouseXold=sensors[0];
    mouseYold=sensors[1];
    
    if(sensors[3]==1)
    {
      // trigger a glitch: glitchP5.glitch(  posX,       // 
 //                               posY,       // position on screen(int)
 //          posJitterX,     // 
 //          posJitterY,     // max. position offset(int)
 //          sizeX,       // 
 //          sizeY,       // size (int)
 //          numberOfGlitches,   // number of individual glitches (int)
 //          randomness,     // this is a jitter for size (float)
 //          attack,     // max time (in frames) until indiv. glitch appears (int)
 //          sustain      // max time until it dies off after appearing (int)
 //              );

 glitchP5.glitch(sensors[0], sensors[1], 200, 400, 200, 60, 120, 10.0f, 20, 1);
    }
    }
   
    }
  }


void serialEvent(Serial myPort) {
  // read the serial buffer:
  String myString = myPort.readStringUntil(linefeed);

  // if you got any bytes other than the linefeed:
  if (myString != null) {

    myString = trim(myString);

    // split the string at the commas
    // and convert the sections into integers:

    pSensors = sensors;
    sensors = int(split(myString, ','));

    // print out the values you got:

    for (int sensorNum = 0; sensorNum < sensors.length; sensorNum++) {
      print("Sensor " + sensorNum + ":" + sensors[sensorNum] + "\t");
    }

    // add a linefeed after all the sensor values are printed:
    println();

  }
}