processing : Création d'un logo génératif pour le DSAA

CLXIX · 2014-05-06 14:22:50

Salut, je suis nouveau sur codelab et j’ai un problème ! Je suis étudiant en DSAA à Marseille, et pour un sujet de cours, on nous a demandé de faire un logo génératif avec les bases de nos cours sur processing.

Comme il y a quatre sections de dsaa à Marseille, j’ai décidé de représenter les quatre lycées via une forme qui les relie géographiquement (un quadrilatère).

Le but du logo et d’intégrer une typographie en dessous de la forme, et de faire bouger, ou plutôt vibrer chaque angle du quadrilatère aléatoirement (dans un premier temps) que la trace de ce mouvement reste quelque secondes puis s’efface. Faire une sorte de nuage (style data visualisation) à partir de ce quadrilatère.

Dans un second temps, je voudrais que chaque angle soit relié au mot que l’on tape dans le texte du dessous.
Quand on tape DESIGN 4 tous les angles vibrent (gros nuage) quand on tape DESIGN PRODUIT, seulement un angle vibre (pareil pour chaque option) et si l’on additionne deux ou trois options, chaque angle vibre en même temps.
En fait, chaque angle est individuellement lié à un mot --> chaque option du DSAA à son lycée.

Je recherche donc un coup de pouce pour pouvoir réaliser ce projet. J’ai commencé le code, mais j’ai déjà eu du mal à faire apparaitre le quadrilatère dans la fenêtre processing ... enfin j’ai du mal à commencer proprement le code de ce logo.

Merci d’avance pour votre aide !

Ps : je vous laisse l’amorce du code en fichier joint

Dernière modification par CLXIX (2014-05-06 14:30:43)

Mushussu · 2014-05-06 16:02:58

En gros tu nous demande de faire ton devoir ! ;-)

Angle[] q;

void setup () {
  size (700, 700);
  q = new Angle[4];
  q[0] = new Angle(131, 76);
  q[1] = new Angle(382, 191);
  q[2] = new Angle(425, 495);
  q[3] = new Angle(321, 364);
  smooth();
  strokeWeight (2);
}

void draw () {
  background(255);
  for (int i = 0; i < q.length; i++) {
    q[i].proximite(mouseX, mouseY);
    q[i].miseAJour();
  }
  quad(q[0].pos.x, q[0].pos.y, q[1].pos.x, q[1].pos.y, q[2].pos.x, q[2].pos.y, q[3].pos.x, q[3].pos.y);
}

class Angle {
  PVector ancre, pos;
  int rayonTremblement;
  boolean tremble;

  Angle(int x, int y) {
    ancre = new PVector(x, y);
    pos = new PVector(x, y);
    rayonTremblement = 3;
    tremble = false;
  }

  void miseAJour() {
    if (tremble) {
      pos = PVector.random2D();
      pos.mult(rayonTremblement);
      pos.add(ancre);
    } 
    else {
      pos = ancre.get();
    }
  }
  
  void proximite(int x, int y) {
    if (dist(ancre.x, ancre.y, x, y) < 10) {
      tremble = true;
    } else {
      tremble = false;
    }
  }
}

Voilà une piste de départ possible, lorsque tu approches le pointeur de la souris près d'un angle il tremble.
Bon courage.

CLXIX · 2014-05-08 18:36:34

Faire mon devoir non ^^mais juste un coup de pouce pour partir sur de bonnes bases oui
Merci beaucoup Mushussu ce que tu a fait m'aide pas mal !
Je donnerais des nouvelles si je suis encore en galère ^^

Annonce

#1 2014-05-06 14:22:50 Création d'un logo génératif pour le DSAA

Création d'un logo génératif pour le DSAA

#2 2014-05-06 16:02:58 Re : Création d'un logo génératif pour le DSAA

Re: Création d'un logo génératif pour le DSAA

#3 2014-05-08 18:36:34 Re : Création d'un logo génératif pour le DSAA

Re: Création d'un logo génératif pour le DSAA

Pied de page des forums