processing : Texte sur courbes ? Projet

y0m-y0m · 2012-05-06 11:06:53

Bonjour à toutes et à tous de la communauté !
Je découvre Processing depuis quelques temps et j'essaye de réaliser un projet pour mes cours, avec, vous vous en doutez, quelques difficultés... ^^
Du coup, je me tourne vers vous en espérant pouvoir avancer.

Je vous expose en quelques lignes mon projet.
Je souhaite réaliser un grand panorama composé de plusieurs dizaines de courbes (invisibles) sur lesquelles se balade en continu un long texte qui serait "appelé" d'un fichier texte externe (présent dans le dossier data).

Voilà où j'en suis :

J'ai réalisé sur Illustrator une image composée uniquement de courbes de Bézier qui ne sont pas toutes forcement liées. En voici un aperçu :

Une fois mes tracés achevés, j'ai exporté l'ensemble au format SVG. J'ai ensuite commencé à convertir les coordonnées SVG en coordonnées adaptées pour pouvoir les visualiser via Processing.

Voilà un bout de code de ma conversion SVG->Processing (excusez moi d'avance si les codes vous font peur mais je démarre tout doucement!!) :

void setup() {
    size(1000, 1000);
  background(255);
  smooth();
  noLoop();
}
void draw() {

noFill();
beginShape();
vertex(55.845,812.53);
bezierVertex(71.55,814.415,77.833,828.55,77.833,835.4599999999999);
bezierVertex(77.833,842.3699999999999,73.122,852.4189999999999,55.845,863.4129999999999);
endShape();

noFill();
beginShape();
vertex(55.845,800.28);
bezierVertex(77.519,801.223,93.851,814.098,93.22399999999999,833.891);
bezierVertex(92.59499999999998,853.6759999999999,75.948,865.928,55.84499999999999,879.746);
endShape();


noFill();
beginShape();
vertex(55.845,785.833);
bezierVertex(80.65899999999999,788.347,107.672,802.478,111.44200000000001,822.895);
endShape();

}

Et c'est là que je suis... bloqué !

Ce que je voudrais faire, c'est faire parcourir du texte sur toutes les courbes. Et l'idéal serait que ce texte soit animé et qu'il parcoure toutes les courbes en continu.

J'ai un peu fouillé le web et j'ai trouvé ceci :

http://wiki.processing.org/w/Text_on_curves

J'ai un peu tenté de comprendre tout ce code mais c'est encore un peu du chinois pour moi, dans tous les cas le résultat proposé parce code m'intéresse mais j'ai vraiment beaucoup de mal à l'adapter.

Voili voilou, merci d'avance pour celles et ceux qui pourront m'aider !
À bientôt !

Y0m-y0m

y0m-y0m · 2012-05-06 23:03:41

Bonsoir!

Bon j'ai encore un peu trifouillé de mon côté
et j'ai cru comprendre qu'il fallait ajouter des
bezierPoint() et des bezierTangent(), j'imagine
que c'est pour indiquer le chemin à suivre aux
éléments qui doivent s'aligner sur la courbe?

Du coup voilà où j'en suis :

void setup() {
    size(1000, 1000);
  background(0);
  smooth();
  noLoop();
  stroke( 0, 51, 255 );
  strokeWeight(1);
 
}


void draw() {


noFill();

bezier(285, 220, 260, 210, 290, 305, 215, 402);

stroke(255);

fill(255);

int steps = 5;

for (int i = 0; i <= steps; i++) {
  float t = i / float(steps);
  float x = bezierPoint(285, 260, 290, 215, t);
  float y = bezierPoint(220, 210, 305, 402, t);
  float tx = bezierTangent(285, 260, 290, 215, t);
  float ty = bezierTangent(220, 210, 305, 402, t);
  float a = atan2(ty, tx);
  a -= HALF_PI;
  line(x, y, cos(a)*-12 + x, sin(a)*-12 + y);
  ellipse(x, y, 2, 2);
  }

  
  


}

j'ai essayé de trouver un bout de code pour faire
parcourir du texte sur ma courbe mais je n'ai rien trouvé...

Si vous avez une idée pour aller plus loin je suis preneur!

Merci d'avance!

y0m-y0m

emoc · 2012-05-14 11:11:58

Bonjour y0m-y0m et bienvenue,

Je n'ai rien de tout prêt à te proposer mais ce que tu as déjà fait, c'est déjà une bonne base. Les vecteurs de tangente que ton dernier code trace te permette de définir la rotation à appliquer pour dessiner une lettre, ainsi que la position de chacune.

Sans lien direct avec processing, mais peut-être que ça peut t'intéresser auqnd même : http://www.planetclegg.com/projects/War … lines.html

cgiles · 2012-05-14 12:05:19

reste plus qu'a stoker tes points dans un tableau, tes angles aussi, et les utiliser pour placer des caractère :
translate(posX[i],posY[i]);
rotate(angle[i]);
text("ton charactère",0,0);

Annonce

#1 2012-05-06 11:06:53 Texte sur courbes ? Projet

Texte sur courbes ? Projet

#2 2012-05-06 23:03:41 Re : Texte sur courbes ? Projet

Re: Texte sur courbes ? Projet

#3 2012-05-14 11:11:58 Re : Texte sur courbes ? Projet

Re: Texte sur courbes ? Projet

#4 2012-05-14 12:05:19 Re : Texte sur courbes ? Projet

Re: Texte sur courbes ? Projet

Pied de page des forums