Bonjour à tous !
Je suis nouvelle sur Codelab, et je suis également débutante sur Processing.
Je dois réaliser un projet pour un cours à la fac et j'ai donc choisi de faire ça sur Processing.
Mon projet est assez compliqué (je sais pas pourquoi j'ai voulu faire un truc si compliqué avec aussi peu de connaissances sur processing, mais bon...) : l'idée c'est de : créer un petit organisme (de forme ronde) qui se déplace de façon aléatoire sur l'écran. Quand quelqu'un vient déplacer la souris de l'ordinateur pour venir toucher l'organisme, celui-ci émet un son et se sépare en deux petites formes rondes. (j'ai pleins d'autres idées, mais on va s'arrêter là. Si j'arrive à faire ça, ça sera déja bien !)
Alors pour commencer j'ai écrit ça :
float x, y;
void setup()
{
// Taille de la page
size(1024,728);
smooth();
x = 500;
y = 400;
}
void draw()
{
//frameRate(7);
background(255);
x = x + random(2)-1;
y = y + random(2)-1;
if (x > 0) {
x = x - 10;
}
if (x < 1000) {
x = x + 10;
}
if (y > 0) {
y = y - 10;
}
if (y < 700) {
y = y + 10;
}
noStroke();
fill(231,62,1);
ellipse(x, y, 50, 50);
strokeWeight(15);
stroke(220,20,60);
noFill();
ellipse(x, y, 90, 90);
}
Mais comme vous pouvez le voir, ça marche pas terrible. Ma forme ronde ne se déplace pas de façon aléatoire sur l'écran. Pour l'instant on dire qu'elle tremblotte sur elle-même.
Toute la partie avec les flaot, x,y et if, je l'ai repris d'un exemple et je l'ai un peu modifié mais apparament c'est pas ça qu'il faut.
Comment faire pour que ma forme se déplace de façon aléatoire sur l'écran ??
Je vous remercie d'avance pour vos réponses !
Hors ligne
Hey, ci-joint un code trouvé dans les exemples fournis avec Processing qui semble faire ce que tu veux, à toi de re-adapter le truc ;-)
/** * Bounce. * * When the shape hits the edge of the window, it reverses its direction. */ int size = 60; // Width of the shape float xpos, ypos; // Starting position of shape float xspeed = 2.8; // Speed of the shape float yspeed = 2.2; // Speed of the shape int xdirection = 1; // Left or Right int ydirection = 1; // Top to Bottom void setup() { size(640, 200); noStroke(); frameRate(30); smooth(); // Set the starting position of the shape xpos = width/2; ypos = height/2; } void draw() { background(102); // Update the position of the shape xpos = xpos + ( xspeed * xdirection ); ypos = ypos + ( yspeed * ydirection ); // Test to see if the shape exceeds the boundaries of the screen // If it does, reverse its direction by multiplying by -1 if (xpos > width-size || xpos < 0) { xdirection *= -1; } if (ypos > height-size || ypos < 0) { ydirection *= -1; } // Draw the shape ellipse(xpos+size/2, ypos+size/2, size, size); }
Have fun !
Hors ligne
Merci ! je vais aller m'amuser avec ça !!
Hors ligne
Salut Ryne,
Si tu veux réaliser ton petit ecosysteme il te faudra bosser avec les classes.
http://processing.org/reference/class.html
C'est un peu casse tête au début, mais infiniment plus souple par la suite.
Je te conseilles aussi de te faire un petit organigramme :
https://fr.wikipedia.org/wiki/Organigra … grammation
Tu peux le faire de façon moins formel, du type :
J'ai besoin d'une classe qui possède tel caractéristique et exécute telle action... une sorte de scénario.
Réalise d'abord ta petite cellule (avec une classe), du type :
class Cellule{ Cellule(){ } }
puis fait la bouger de manière aléatoire (avec random ou noise).
Après tu peux utiliser des choses comme ça pour vérifier si le pointeur de ta souris est au dessus de ta forme :
http://processing.org/learning/topics/button.html
notamment cette partie du code :
boolean overCircle(int x, int y, int diameter) { float disX = x - mouseX; float disY = y - mouseY; if(sqrt(sq(disX) + sq(disY)) < diameter/2 ) { return true; } else { return false; } }
que tu devras intégrer à ton sketch.
Une fois tout ça de fait tu pourras vérifier si tu es au dessus ou non d'une de tes cellules, et alors à toi d'effectuer une action à ce moment là (son, méiose de ta cellule etc.)
voili
Hors ligne
Hello,
Si tu veux un mouvement aleatoire un peu sympa, il y a la fonction noise() de processing
En plus des exemples ci dessus, tu peux regarder sur http://funprogramming.org/ ou tu trouveras des exemples pour des balles qui se deplacent et rebondissent, et aussi sur le deplacement grace à noise()
Hors ligne
Merci pour vos réponses !!
Je suis en train de bosser dessus. J'avoue que les classes, c'est pas ma tasse de thé pour l'instant.
Hors ligne
Alors voila ce que j'ai réussi à faire pour l'instant :
Dans une première page :
Cellule[] cellules = new Cellule[5];
boolean clic=false;
void setup() {
size(1024,728);
//colorMode(HSB); // HSB simplifie les couleurs aléatoires
smooth();
// pour chaque objet, choisir une taille & une position de départ
for(int i=0; i < cellules.length; i++) {
float taille = random(20,150);
float depart_x = random(width);
float depart_y = random(height);
cellules[i] = new Cellule(depart_x, depart_y, taille);
}
}
void draw() {
background(255);
for(int i=0; i < cellules.length; i++) {
cellules[i].draw();
}
if (clic==true){
// Pour l'instant ça marche pas.
}
}
void mousePressed(){
if ((mouseX>100) && (mouseX<300) &&
(mouseY>100) && (mouseY<300)){
if(clic==false){
clic=true;
}else{
clic=false;
}
}
}
et dans une autre page pour que ça soit plus lisible :
class Cellule {
color couleur;
float x, y, taille;
Cellule(float depart_x, float depart_y, float t) {
x = depart_x;
y = depart_y;
taille = t;
couleur = color(231,62,1);
}
void draw() {
apparaitre();
bouger();
}
void apparaitre() {
// comme chaque bestiole change l'orientation, il faut mémoriser
// l'orientation d'origine pour pouvoir y revenir après chaque dessin
pushMatrix();
// dessiner le corps
fill(couleur);
noStroke();
ellipse(x, y, 50, 50);
// dessiner le contour
strokeWeight(15);
stroke(220,20,60);
noFill();
ellipse(x, y, 90, 90);
popMatrix(); // revenir à l'orientation d'origine
}
void bouger() {
// bouger aléatoirement en fonction de sa taille
x += random(-taille/15,taille/15);
y += random(-taille/15,taille/15);
// boucler sur les bords du Sketch
if (x > width + taille) x = -taille;
if (x < -taille) x = width + taille;
if (y > height + taille) y = -taille;
if (y < -taille) y = height + taille;
}
}
J'ai deux questions par rapport à ça :
- Comment on peut faire pour que les cellules aient un mouvement fluide et non pas "tremblotant" comme c'est le cas actuellement ??
- Comment je peux faire pour que certaines soient plus grosses ou plus petites ??
Je souhaiterais également que lorsque quelqu'un clique avec la souris sur une cellule celle-ci émette un son et se sépare en deux petites cellules.
J'ai regardé le lien que Oyster_twiter a écrit : http://processing.org/learning/topics/button.html, pour vérifier si le pointeur de la souris est au dessus de la forme, mais l'exemple est pour une forme fixe. Mes cellules sont en mouvement, cela ne pas poser un problème ?? J'ai essayé avec boolean clic=false; et MousePressed mais ça a pas l'air de marcher...
Sinon j'ai regardé aussi pour créer un son lors du clic de la souris, mais je n'ai pas trouvé grand chose. A par peut être la librairie Sound Cipher, http://explodingart.com/soundcipher/index.html. Qu'est ce que vous en pensez ?
En tout cas grâce à vos réponses, je maitrise beaucoup les classes maintenant !
Merci beaucoup pour votre aide !!!!
Hors ligne
citation :
- Comment on peut faire pour que les cellules aient un mouvement fluide et non pas "tremblotant" comme c'est le cas actuellement ??
En ayant recours au noise plutôt qu'au random : http://processing.org/reference/noise_.html
citation :
- Comment je peux faire pour que certaines soient plus grosses ou plus petites ??
Tu fais un random sur ta taille en lui fixant une valeur de départ et une de fin : random(debut,fin)
Hors ligne
Merci cgilles !
J'ai encore une autre question : Comment peut on faire pour que le pointeur de la souris réagisse à une couleur ?
Par exemple dans mon projet, mes cellules sont en mouvement et ont un "coeur" orange. J'aimerais que lorsque le pointeur de la souris passe sur le "coeur" orange, il "s'active" et transforme ma cellule en deux plus petites cellules.
Je sais pas si c'est très clair...
Hors ligne
Salut,
Tu peux utiliser get();
http://processing.org/reference/get_.html
et comparer la couleur sous le pointeur avec une couleur en mémoire, en l'occurence ton orange.
Hors ligne
Pages: 1