TONER KEBAB WIKI

====== TYPO MOBILE ======

  * Porteur du projet : Anne-Florence Dessales
  * Date : 14/05/2018
  * Licence : libre !
  * Contexte : Cours de Processing avec Damien Muti
  * Fichiers : {{:wiki:projets:typo-mobile:typo_1.zip|}}
  * Source : [[https://www.openprocessing.org/sketch/494016|Open Processing]]

===== DESCRIPTION =====
  * Réinterprétation de mon projet **Poème Mobile**, sur le thème de //la mobilité du livre//, à l'aide d'un programme jouant sur des typographies aléatoires, rythmant un poème //(ici Il pleure sur la ville - Paul Verlaine)//. De plus, le programme étant en HTML, il a fallu le réadapter à Processing.
  * L'aléatoire du programme joue sur les interlignages et interlettrages ; amenant un à nouveau poème, plus ou moins lisible selon la vitesse à laquelle l'utilisateur déplace le curseur de la souris.


**AFFICHES — POÈME MOBILE**
{{:wiki:projets:typo-mobile:poeme-mobile.jpg |}}


**EXEMPLES de lecture du programme**

{{:wiki:projets:typo-mobile:p1.jpg |}}
{{:wiki:projets:typo-mobile:p2.jpg |}}
{{:wiki:projets:typo-mobile:p3.jpg |}}
{{:wiki:projets:typo-mobile:p4.jpg |}}
{{:wiki:projets:typo-mobile:p5.jpg |}}


**CODE**

<code>
/**
 * Dessin-typo / Poème mobile / Il pleure sur la ville - Paul Verlaine 
 * 
 * Le sketch devient un espace d'expression, à l'aide de la souris, 
 * où la typo s'anime et se revèle. 
 * 
 * RACCOURCIS CLAVIER
 * del, backspace : effacer écran
 * flèche du haut : angle distortion +
 * flèche du bas  : angle distortion -
 * Clavier - S : enregistrer en png

 */

float x = 0, y = 0;
float stepSize = 5.0;
String letters = "Il pleure dans mon coeur, Paul Verlaine, Romances sans paroles (1874) Il pleure dans mon cœur comme il pleut sur la ville; Quelle est cette langueur qui pénètre mon cœur ? Ô bruit doux de la pluie par terre et sur les toits ! Pour un cœur qui s'ennuie, Ô le chant de la pluie ! Il pleure dans raison dans ce cœur qui s'écœeure. Quoi ! nulle trahison ?… Ce dueil est sans raison. C'est bien la pire peine de ne savoir pourquoi, sans amour et sans haine, mon cœur a tant de peine !";

//String[] letters ;
int fontSizeMin = 3;
float angleDistortion = 0.0;
int counter = 0;

// font 
PFont maFont;
String[]typo;
String cheminTypo; // chemin d'acces de la typo

void setup() {
  // use full screen size 
  size(1280, 800);
  background(255);
  smooth();
  cursor(HAND);
 
  x = mouseX;
  y = mouseY;
  
  // font
  // créer la font
   //importation typo
  typo = loadStrings("typo.txt"); // charge le nom des typos
  
  // debug
  println("les typos sont :" + typo);
  println("");
 
 }

void draw() {
  if (mousePressed) {
    float d = dist(x,y, mouseX,mouseY); // distance entre l'ancienne position de la souris et la nouvelle position
    textSize(fontSizeMin+d/2);
    char newLetter = letters.charAt(counter); // choix d'une lettre à la position "counter" du texte contenu dans la String letters
    stepSize = textWidth(newLetter);

    if (d > stepSize) { // si la distance d est dupérieure à stepSize (initialement 5pixels)
      float angle = atan2(mouseY-y, mouseX-x); // Calcul de l'angle entre l'axe horizontal et le vecteur déplacement de la souris entre deux points consécutifs

      pushMatrix(); // 
        translate(x, y);
        rotate(angle + random(angleDistortion)); // création d'un angle d'écriture de la lettre aléatoire autour de l'angle "angle"
        
        // choix aléatoire de la typo
        // indice  aléatoire i pour choisir une typo
        int i = floor(random(0, typo.length));
        maFont= createFont(typo[i], 40); // charger la typo
        textFont(maFont);
        textAlign(LEFT);
        fill(0);
        
        // debug : nom de la typo choisie
        println("i=" + i + " counter ="+ counter + " typo=" + typo[i]);
        
        // écriture de la lettre
        text(newLetter, 0, 0); // dessin de la lettre sur la fenêtre d'affichage avec une taille stepSize et un angle par rapport à l'horizontal angle + alpha
      popMatrix();

      counter++; // counter = (counter+1)%(letters.length -1);
      /* si le compteur est supérieur à la taille de la chaine de charactère letters, remettre le compteur à zéro */
     if (counter > letters.length()-1) counter = 0; 
      
      //calcul de la nouvelle position de la position de la lettre en fonction de la position de la souris
      x = x + cos(angle) * stepSize;
      y = y + sin(angle) * stepSize; 
    }
  }
}

void mousePressed() {
  x = mouseX;
  y = mouseY;
}

void keyTyped() {
  if (key == 's' || key == 'S') save("P_2_3_3_01.png");
}

void keyPressed() {
  // angle de "distortion" en fonction des touches haut-bas
  if (key == CODED){
    if (keyCode == DELETE || keyCode == BACKSPACE) background(255);
    if (keyCode == UP) angleDistortion += 0.1;
    if (keyCode == DOWN) angleDistortion -= 0.1; 
  }
}
</code>
TONER KEBAB WIKI

Outils pour utilisateurs

Outils du site

Outils de la page
