Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision
Révision précédente
ressource:code:processing:atelier_typo [2022/09/08 18:01]
gweltaz
ressource:code:processing:atelier_typo [2022/12/05 17:05] (Version actuelle)
gweltaz
Ligne 1: Ligne 1:
 +{{tag>​processing typographie}}
 ====== Atelier Processing : typographie ====== ====== Atelier Processing : typographie ======
  
 +===== Ressources de fonts à télécharger =====
 +  * https://​fonts.google.com
 +  * https://​fontawesome.com
 +  * http://​www.fontsaddict.com
 +
 +Sous linux, c'est grace à la font "Noto Color Emoji",​ installée par défaut, que l'on peut afficher des émojis dans diverses applications (dont le Terminal).
 +Comme il n'est pas possible d'​utiliser une font de couleur dans Processing on pourra utiliser "Noto Emoji" à la place https://​fonts.google.com/​noto/​specimen/​Noto+Emoji.
 +
 +===== Voir le contenu d'une font =====
  
 <​accordion><​panel title="​fontViewer.pde">​ <​accordion><​panel title="​fontViewer.pde">​
Ligne 207: Ligne 217:
 </​code>​ </​code>​
 </​panel></​accordion>​ </​panel></​accordion>​
 +
 +===== Effets de fonts avec Processing =====
 +
 +<​accordion><​panel title="​textEffects.pde">​
 +<code java>
 +abstract class TextEffect<​T extends TextEffect>​ {
 +  protected String text;
 +  protected PVector position = new PVector();
 +  protected int delay = 0;
 +  protected PFont font;
 +  protected color col;
 +  protected int init = -1;
 +  protected boolean removable = false;
 +
 +  protected TextEffect() {
 +    font = g.textFont;
 +  }
 +
 +  public T delay(float seconds) {
 +    delay = round(seconds * 1000);
 +    return (T)this;
 +  }
 +
 +  public T setText(String text) {
 +    this.text = text;
 +    reset();
 +    return (T)this;
 +  }
 +  ​
 +  public T setPosition(float x, float y) {
 +    this.position.set(x,​ y);
 +    reset();
 +    return (T)this;
 +  }
 +
 +  public T setFont(String font, int size) {
 +    this.font = createFont(font,​ size);
 +    return (T)this;
 +  }
 +
 +  public T setFont(PFont font) {
 +    this.font = font;
 +    return (T)this;
 +  }
 +
 +  public T setColor(int r, int g, int b) {
 +    col = color(r, g, b);
 +    return (T)this;
 +  }
 +  ​
 +  public T setColor(color c) {
 +    col = c;
 +    return (T)this;
 +  }
 +
 +  public abstract void update();
 +
 +  public boolean isRemovable() {
 +    return removable;
 +  }
 +  ​
 +  public void reset() {
 +    init = -1;
 +    removable = false;
 +  }
 +}
 +
 +
 +
 +class TextFade extends TextEffect<​TextFade>​ {
 +  private int fadein = 2000;
 +  private int sustain;
 +  private int fadeout = 2000;
 +
 +  public TextFade(String text, float x, float y) {
 +    super();
 +    this.text = text;
 +    this.position.set(x,​ y);
 +    sustain = text.length() * 60;
 +  }
 +
 +  public TextFade setDuration(float fadein, float sustain, float fadeout) {
 +    this.fadein = round(fadein * 1000);
 +    this.sustain = round(sustain * 1000);
 +    this.fadeout = round(fadeout * 1000);
 +    return this;
 +  }
 +
 +  public void update() {
 +    int time = millis();
 +
 +    if (init < 0) {
 +      init = time;
 +    }
 +
 +    if (time < init + delay) {
 +      return;
 +    } else if (time < init + delay + fadein) {
 +      float alpha = (time - init - delay) / float(fadein);​
 +      alpha *= g.colorModeA;​
 +      fill(col, alpha);
 +      if (font != null) textFont(font);​
 +      text(text, position.x, position.y);​
 +    } else if (time < init + delay + fadein + sustain) {
 +      fill(col);
 +      if (font != null) textFont(font);​
 +      text(text, position.x, position.y);​
 +    } else if (time < init + delay + fadein + sustain + fadeout) {
 +      float alpha = (time - init - delay - fadein - sustain) / float(fadeout);​
 +      alpha = (1.0 - alpha) * g.colorModeA;​
 +      fill(col, alpha);
 +      if (font != null) textFont(font);​
 +      text(text, position.x, position.y);​
 +    } else {
 +      removable = true;
 +    }
 +  }
 +}
 +
 +
 +
 +class TextHScroll extends TextEffect<​TextHScroll>​ {
 +  private float speed;
 +  private float textWidth;
 +
 +  public TextHScroll(String text, float y, float speed) {
 +    super();
 +    this.text = text;
 +    position.y = y;
 +    this.speed = speed;
 +  }
 +
 +  public void update() {
 +    int time = millis();
 +
 +    if (init < 0) {
 +      init = time;
 +      if (speed > 0)
 +        position.x = -textWidth;
 +      else
 +        position.x = width;
 +    }
 +
 +    if (time < init + delay) {
 +      return;
 +    } else if (speed > 0 && position.x < width || speed < 0 && position.x + textWidth > 0) {
 +      position.x += speed;
 +      fill(col);
 +      if (font != null) textFont(font);​
 +      text(text, position.x, position.y);​
 +    } else {
 +      removable = true;
 +    }
 +  }
 +}
 +</​code>​
 +</​panel></​accordion>​
 +
 +==== Utilisation ====
 +
 +<code java>
 +TextEffect te;
 +te = new TextFade("​Hello",​ 100, 180).setFont("​FreeMono Bold", 50);
 +
 +void draw() {
 +  te.update();​
 +}
 +</​code>​
 +
 +<code java>
 +TextEffect te = TextHScroll(String "​Bonjour",​ 400, 2)
 +</​code>​
 +
 +Types d'​effets:​
 +  * TextFade(String text, int x, int y);
 +  * TextHScroll(String text, int y, float speed);
 +
 +Methodes de la classe TextEffect:
 +  * setFont(String font, int size)
 +  * setFont(PFont font)
 +  * delay(float seconds)
 +  * setText(String text)
 +  * setPosition(float x, float y)
 +  * setColor(int r, int g, int b)
 +  * setColor(color c)
 +  * reset()
  • ressource/code/processing/atelier_typo.1662652866.txt.gz
  • Dernière modification: 2022/09/08 18:01
  • par gweltaz