Différences
Ci-dessous, les différences entre deux révisions de la page.
Prochaine révision | Révision précédente Prochaine révision Les deux révisions suivantes | ||
ressource:code:processing:atelier_typo [2022/09/08 17:49] gweltaz créée |
ressource:code:processing:atelier_typo [2022/09/08 18:18] gweltaz |
||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
====== 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 22: | Ligne 31: | ||
int size = 32; | int size = 32; | ||
int margin = 2; | int margin = 2; | ||
+ | int old_width, old_height; | ||
ArrayList<MyGlyph> glyphs = new ArrayList(); | ArrayList<MyGlyph> glyphs = new ArrayList(); | ||
Ligne 34: | Ligne 44: | ||
void setup() { | void setup() { | ||
size(800, 600); | size(800, 600); | ||
+ | //surface.setResizable(true); | ||
//fullScreen(); | //fullScreen(); | ||
+ | old_width = width; | ||
+ | old_height = height; | ||
+ | | ||
printArray(PFont.list()); | printArray(PFont.list()); | ||
| | ||
Ligne 54: | Ligne 68: | ||
selected = -1; | selected = -1; | ||
- | int x = margin; | + | //int x = margin; |
- | int y = font.getSize() + margin; | + | //int y = font.getSize() + margin; |
int numChars = 0; | int numChars = 0; | ||
for (int i = 0; i < 0x10ffff; i++) { | for (int i = 0; i < 0x10ffff; i++) { | ||
Ligne 65: | Ligne 79: | ||
glyph.w = textWidth(glyph.s); | glyph.w = textWidth(glyph.s); | ||
glyph.h = font.getSize(); | glyph.h = font.getSize(); | ||
- | if (x + glyph.w + margin > width) { | + | /*if (x + glyph.w + margin > width) { |
x = margin; | x = margin; | ||
y += font.getSize() + margin; | y += font.getSize() + margin; | ||
Ligne 71: | Ligne 85: | ||
glyph.x = x; | glyph.x = x; | ||
glyph.y = y; | glyph.y = y; | ||
- | x += glyph.w + margin; | + | x += glyph.w + margin;*/ |
glyphs.add(glyph); | glyphs.add(glyph); | ||
} | } | ||
} | } | ||
+ | updateFont(); | ||
+ | | ||
if (!glyphs.isEmpty()) | if (!glyphs.isEmpty()) | ||
yMax = max(0, glyphs.get(glyphs.size()-1).y + 4 * margin - height); | yMax = max(0, glyphs.get(glyphs.size()-1).y + 4 * margin - height); | ||
println(numChars, "glyphs in font"); | println(numChars, "glyphs in font"); | ||
+ | } | ||
+ | |||
+ | void updateFont() { | ||
+ | int x = margin; | ||
+ | int y = font.getSize() + margin; | ||
+ | for (MyGlyph glyph : glyphs) { | ||
+ | if (x + glyph.w + margin > width) { | ||
+ | x = margin; | ||
+ | y += font.getSize() + margin; | ||
+ | } | ||
+ | glyph.x = x; | ||
+ | glyph.y = y; | ||
+ | x += glyph.w + margin; | ||
+ | } | ||
} | } | ||
Ligne 85: | Ligne 115: | ||
background(255); | background(255); | ||
| | ||
- | if (font == null) | + | if (font == null) { |
+ | fill(0); | ||
+ | textSize(32); | ||
+ | String mess = "Glissez-déposez une font dans la fenêtre"; | ||
+ | float w = textWidth(mess); | ||
+ | text(mess, (width - w) * 0.5f, height/2); | ||
return; | return; | ||
+ | } | ||
yOffset = constrain(yOffset + yVel, 0, yMax); | yOffset = constrain(yOffset + yVel, 0, yMax); | ||
Ligne 126: | Ligne 162: | ||
text(text, glyph.x + 0.5*(glyph.w - tw) + 8, glyph.y + 4 + th + 4); | text(text, glyph.x + 0.5*(glyph.w - tw) + 8, glyph.y + 4 + th + 4); | ||
} | } | ||
+ | | ||
popMatrix(); | popMatrix(); | ||
} | } | ||
Ligne 131: | Ligne 168: | ||
void mousePressed() { | void mousePressed() { | ||
+ | if (font == null) | ||
+ | return; | ||
+ | | ||
selected = -1; | selected = -1; | ||
| | ||
Ligne 147: | Ligne 187: | ||
} | } | ||
+ | void mouseReleased() { | ||
+ | if (width != old_width || height != old_height) { | ||
+ | updateFont(); | ||
+ | println("update"); | ||
+ | old_width = width; | ||
+ | old_height = height; | ||
+ | } | ||
+ | } | ||
void mouseWheel(MouseEvent event) { | void mouseWheel(MouseEvent event) { | ||
Ligne 168: | Ligne 216: | ||
</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 | ||
+ | * TextHScroll | ||
+ | |||
+ | 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() |