Différences
Ci-dessous, les différences entre deux révisions de la page.
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() |