Différences

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

--- ressource:code:processing:atelier_typo [2022/09/08 17:49]
gweltaz créée
+++ ressource:code:processing:atelier_typo [2022/12/05 17:05] (Version actuelle)
gweltaz
@@ Ligne 1: / Ligne 1: @@
+{{tag>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">
@@ Ligne 22: / Ligne 32: @@
 int size = 32;
 int margin = 2;
+int old_width, old_height;
 ArrayList<MyGlyph> glyphs = new ArrayList();
@@ Ligne 34: / Ligne 45: @@
 void setup() {
   size(800, 600);
+  //surface.setResizable(true);
   //fullScreen();
+  old_width = width;
+  old_height = height;
   printArray(PFont.list());
@@ Ligne 54: / Ligne 69: @@
   selected = -1;
-  int x = margin;
+  //int x = margin;
-  int y = font.getSize() + margin;
+  //int y = font.getSize() + margin;
   int numChars = 0;
   for (int i = 0; i < 0x10ffff; i++) {
@@ Ligne 65: / Ligne 80: @@
       glyph.w = textWidth(glyph.s);
       glyph.h = font.getSize();
-      if (x + glyph.w + margin > width) {
+      /*if (x + glyph.w + margin > width) {
         x = margin;
         y += font.getSize() + margin;
@@ Ligne 71: / Ligne 86: @@
       glyph.x = x;
       glyph.y = y;
-      x += glyph.w + margin;
+      x += glyph.w + margin;*/
       glyphs.add(glyph);
     }
   }
+  updateFont();
   if (!glyphs.isEmpty())
     yMax = max(0, glyphs.get(glyphs.size()-1).y + 4 * margin - height);
   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 116: @@
   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;
+  }
   yOffset = constrain(yOffset + yVel, 0, yMax);
@@ Ligne 126: / Ligne 163: @@
     text(text, glyph.x + 0.5*(glyph.w - tw) + 8, glyph.y + 4 + th + 4);
   }
   popMatrix();
 }
@@ Ligne 131: / Ligne 169: @@
 void mousePressed() {
+  if (font == null)
+    return;
   selected = -1;
@@ Ligne 147: / Ligne 188: @@
 }
+void mouseReleased() {
+  if (width != old_width || height != old_height) {
+    updateFont();
+    println("update");
+    old_width = width;
+    old_height = height;
+  }
+}
 void mouseWheel(MouseEvent event) {
@@ Ligne 168: / Ligne 217: @@
 </code>
 </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()