Il me semble que tu es sur processing et pas sur p5.js, si tu peux corriger le tag stp.
Ce que je te conseil dans un cas comme celui-ci c’est de simplifier ton problème. Pour l’instant, tu as 6 images, un tableau de fleur qui évolue au cours du temps, des positions aléatoires, des évênements… Ca fait beaucoup de chose à gérer est comprendre.
Commence par faire simple: 1 seule image et une seule fleur dont tu connais la position. Par exemple comme ceci:
PImage img;
Fleur fleur;
void setup() {
size(400, 400);
background(0);
img = loadImage("1.png");
fleur = new Fleur(img, 100, 100);
}
void draw() {
background(0);
fleur.a = PI / 4;
fleur.affiche();
}
class Fleur {
PImage im;
int x, y; // position
int w, h; // dimension
float a ; // angle de rotation de l’image
Fleur(PImage _im, int _x, int _y) {
im = _im;
x = _x;
y = _y;
w = 50;
h = 50;
a=0;
}
void affiche() {
image(im, x, y, w, h);
}
}
J’en ai profité pour mettre un F majuscule au nom de ta classe par convention.
Tout ce que fais ce code c’est dessiner indéfiniment une fleur (= img1) à la position (100, 100) sur l’écran.
Maintenant, on peut essayer de la faire tourner de 45°. On modifie la fonction affiche:
void affiche() {
pushMatrix();
rotate(a);
image(im, x, y, w, h);
popMatrix();
}
Et on oublie pas de mettre à jour notre boucle pour faire tourner l’image:
void draw() {
background(0);
fleur.a = PI / 4;
fleur.affiche();
}
Bon… ça tourne mais pas tellement comme on aimerait =/
La raison c’est que la fonction rotate() fait tourner l’ensemble du canvas mais à partir de son centre (0,0) qui est le coin en haut à gauche.
Comme ce qu’on fait c’est mettre une image à la position (100, 100) et qu’ensuite on fait tourner notre canvas, ça explique le résultat qu’on voit à l’écran.
Pour éviter ça, il faut donc qu’on place notre image au centre, qu’on la tourne de 45° et qu’ensuite on la place ou on veut. Et pour cela, on peut utiliser la fonction translate:
void affiche() {
pushMatrix();
translate(x, y); // 4- On déplace notre image à la position souhaitée. /!\ C'est maintenant la position du centre qu'on indique puisqu'on a appliqué le point 2-
rotate(a); // 3- On applique la rotation
translate(-w / 2, -h / 2); // 2- On déplace notre image en son centre
image(im, 0, 0, w, h); // 1- On place notre image aux coordonnées (0, 0) /!\ c'est le coin supérieur gauche de l'image qui est positioné à (0, 0), pas son centre => On déplace l'image grâce à la fonction translate
popMatrix();
}
La façon dont j’aime pensé aux transformations, c’est de les appliquer du bas vers le haut. C’est plus logique pour nous de penser comme ça (d’où ma numérotation dans le code)
C’est bon, on se rapproche du but ! On sait maintenant faire tourner une Fleur. Par contre, il faut maintenant qu’on l’anime dans le temps.
Le problème avec ta première façon de faire (incrémenter a dans la fonction affiche) c’est que toutes les fleurs vont tourner à la même vitesse et surtout à partir du moment ou tu les affiches, tu vas les faire tourner. Peut-être que tu aimerais les afficher fixes pendant un certain temps et ensuite commencer à les faire tourner?
L’idée de base c’est que chaque fleur possède une vitesse de rotation et une nouvelle fonction pour les faire tourner.
Cette nouvelle fonction aura besoin de connaitre le temps écoulé par rapport à la dernière fois que la fleur ait été affichée pour savoir de combien de degrés la faire tourner.
La classe ressemblera donc à ça:
class Fleur {
PImage im;
float x, y; // position
float w, h; // dimension
float a ; // angle de rotation de l’image
float vitRot; // Vitesse de rotation en rad/seconde par exemple
Fleur(PImage _im, int _x, int _y) {
im = _im;
x = _x;
y = _y;
w = 50;
h = 50;
a=0;
vitRot = PI / 2;
}
void tourne(int tpsEcoule) {
// A définir
}
void affiche() {
pushMatrix();
translate(x, y); // 4- On déplace notre image à la position souhaitée. /!\ C'est maintenant la position du centre qu'on indique puisqu'on a appliqué le point 2-
rotate(a); // 3- On applique la rotation
translate(-w / 2, -h / 2); // 2- On déplace notre image en son centre
image(im, 0, 0, w, h); // 1- On place notre image aux coordonnées (0, 0) /!\ c'est le coin supérieur gauche de l'image qui est positioné à (0, 0), pas son centre => On déplace l'image grâce à la fonction translate
popMatrix();
}
}
On peut directement coder la fonction tourne. Le temps écoulé sera donné en milliseconde, on divise donc par 1000 pour avoir le temps en seconde et on multiplie par la vitesse pour obtenir l’angle de rotation:
void tourne(int tpsEcoule) {
a = a + vitRot * ((float)tpsEcoule / 1000);
}
La dernière chose à faire et de connaitre le temps écoulé, pour ça il faudra 3 variables. Une pour stocker le temps au début de ta boucle, une autre pour stocker le temps entre écoulé entre 2 boucles et une autre pour mémoriser le temps de de la boucle précédente.
En pratique, ça ressemble à ça:
void draw() {
tpsActuel = millis();
tpsEcoule = dernierTps - tpsActuel;
// Ici ton code pour modifier tes fleurs et dessiner sur ton canvas
background(0);
fleur.tourne(tpsEcoule);
fleur.affiche();
dernierTps = tpsActuel;
}
Pour exemple, voici un code complet qui reprend ce qu’on a vu avant. La fleur commence à tourner après le click souris:
PImage img;
Fleur fleur;
boolean tourner;
int tpsActuel, dernierTps, tpsEcoule;
void setup() {
size(400, 400);
background(0);
tourner = false;
dernierTps = 0;
tpsEcoule = 0;
img = loadImage("1.png");
fleur = new Fleur(img, 100, 100);
}
void draw() {
tpsActuel = millis();
tpsEcoule = dernierTps - tpsActuel;
background(0);
fleur.tourne(tpsEcoule);
fleur.affiche();
dernierTps = tpsActuel;
}
void mouseClicked() {
tourner = true;
}
class Fleur {
PImage im;
float x, y; // position
float w, h; // dimension
float a ; // angle de rotation de l’image
float vitRot; // Vitesse de rotation en rad/seconde par exemple
Fleur(PImage _im, int _x, int _y) {
im = _im;
x = _x;
y = _y;
w = 50;
h = 50;
a=0;
vitRot = PI / 2;
}
void tourne(int tpsEcoule) {
a = a + vitRot * ((float)tpsEcoule / 1000);
}
void affiche() {
pushMatrix();
translate(x, y); // 4- On déplace notre image à la position souhaitée. /!\ C'est maintenant la position du centre qu'on indique puisqu'on a appliqué le point 2-
rotate(a); // 3- On applique la rotation
translate(-w / 2, -h / 2); // 2- On déplace notre image en son centre
image(im, 0, 0, w, h); // 1- On place notre image aux coordonnées (0, 0) /!\ c'est le coin supérieur gauche de l'image qui est positioné à (0, 0), pas son centre => On déplace l'image grâce à la fonction translate
popMatrix();
}
}
Maintenant à toi d’adapter ce code avec plusieurs images, plusieurs fleurs, des positions aléatoires, des vitesses de rotations différentes etc.
