How to make some texte move and change its opacity ?

edited November 2019 in How To...

Hello everybody,

I am starting with processing and I am a bit lost. I would like to display some text in a defined rectangle and then, following the order of reading (upper left corner to bottom right corner), make each letter move randomly, as the same time as lowering its opacity until total dissapearing. I suppose it's possible but I have no idea wich function I should use !

Thank you very much for your help ! :)

Answers

  • You can use text with 5 parameters for the rectangular box

    BUT that won’t help you with the opacity thing.

    Here you would have a class Letter

    with char, Position x,y and opacity degree and move direction: xadd , yadd

    Then an ArrayList of that class

    Do the tutorial objects please

    Best, Chrisir ;-)

  • Also maybe a kind of timer / startTime so that they start one after another

  • TIMer starts a Boolean variable isActivated

    When it’s true, letter starts moving and getting darker

  • edited January 2018 Answer ✓

    I have no idea which function I should use

    You will have to write your own function -- or your own class with methods.

    If you do not want to write a Letter class and create an array of Letter[] letters, then you will need to use parallel arrays. The only reason to consider doing that is that many of your variables are all derived in principle, so you don't need to store them. All you need is:

    1. a string (which is an array of letters)
    2. an array of random headings, one per letter
    3. an input of the elapsed animation amount, from 0 (nothing moved) to 1 (every letter has disappeared).

    This approach isn't necessarily easier to program, but it might be a bit easier to e.g. play backwards (letters fade in), scrub with the mouse, dynamically generate for different string lengths, etc. However as soon as you start adding many more properties (like one color per letter, or one size per letter, etc.) then you will start wishing for the Class / Object approach.

    P.S. -- actually, you could probably get rid of the random headings list too if you just use assign spinning headings -- e.g. 1, 2, 3, 4 radians.

  • edited January 2018 Answer ✓

    Here are some quick, rough examples of the functional approach, with no classes, objects, or per-letter variables -- just a string, and that's it.

    StringAnimationDemos--screenshot

    /**
     * StringAnimationDemos -- write functions that do per-letter string manipulation
     * Jeremy Douglass 2018-01-19 Processing 3.3.6
     *
     * Each function is called once in draw. Each function is a independent, 
     * and could be cut-pasted into another sketch. To use, first translate
     * to the screen location for drawing, then call the function with a string
     * and the "amount". Here the amount is given by the mouse x position
     * but it could be based on a timer, or something else.
     **/
    
    String letters = "String manipulation testing";
    
    
    void setup() {
      size(200, 300);
    }
    
    void draw() {
      background(64);
      translate(20, 30);
      // draw a string
      text(letters, 0, 0);
      translate(0, 20);
      // draw a string yourself, one letter at a time
      drawLetters(letters);
      translate(0, 20);
      // draw letters that fade in a line, controlled by mouse
      drawLettersFadeLine(letters);
      translate(0, 20);
      // draw letters that fade, controlled by mouse
      drawLettersFadeOut(letters, mouseX/float(width));
      translate(0, 20);
      // draw letters that react to the mouse
      drawLettersHide(letters, mouseX/float(width));
      translate(0, 20);
      // draw letters that fade, controlled by mouse
      drawLettersFadeLineOut(letters, mouseX/float(width));
      translate(0, 60);
      // draw letters that scatter, controlled by mouse
      drawLettersScatterHide(letters, mouseX/float(width));
      translate(0, 60);
      // draw letters that scatter, controlled by mouse
      drawLettersScatterFade(letters, mouseX/float(width));
    }
    
    void drawLetters(String s) {
      float xoffset = 0;
      for (int i = 0; i < s.length(); i++) {
        char c = s.charAt(i);        
        text(c, xoffset, 0);
        xoffset += textWidth(c);
      }
    }
    
    void drawLettersHide(String s, float amt) {
      float stringAmt = 0;
      float xoffset = 0;
      for (int i = 0; i < s.length(); i++) {
        stringAmt = (i+1)/float(s.length()+1);
        char c = s.charAt(i);
        if (stringAmt > amt) {  // skip letter positions less than amt
          text(c, xoffset, 0);
        }
        xoffset += textWidth(c);
      }
    }
    
    void drawLettersFadeLine(String s) {
      float stringAmt = 0;
      float xoffset = 0;
      for (int i = 0; i < s.length(); i++) {
        stringAmt = (i+1)/float(s.length()+1);
        char c = s.charAt(i);
        pushStyle();
        float opacity = 255 * (1-stringAmt);  // fade letters by positions
        fill(255, opacity);
        text(c, xoffset, 0);
        popStyle();
        xoffset += textWidth(c);
      }
    }
    
    void drawLettersFadeOut(String s, float amt) {
      float xoffset = 0;
      pushStyle();
      float opacity = 255 * (1-amt);  // fade the whole string by amt
      for (int i = 0; i < s.length(); i++) {
        char c = s.charAt(i);
        fill(255, opacity);
        text(c, xoffset, 0);
        xoffset += textWidth(c);
      }
      popStyle();
    }
    
    void drawLettersFadeLineOut(String s, float amt) {
      float stringAmt = 0;
      float xoffset = 0;
      for (int i = 0; i < s.length(); i++) {
        stringAmt = (i+1)/float(s.length()+1);
        char c = s.charAt(i);
        pushStyle();
        // fade each letter by its position and the amt
        float opacity = 255 * (2 + (stringAmt-1) - (2*amt));
        fill(255, opacity);
        text(c, xoffset, 0);
        popStyle();
        xoffset += textWidth(c);
      }
    }
    
    void drawLettersScatterHide(String s, float amt) {
      float stringAmt = 0;
      float xoffset = 0;
      float travel = 0;
      for (int i = 0; i < s.length(); i++) {
        stringAmt = (i+1)/float(s.length()+1);
        char c = s.charAt(i);
        travel = amt;
        pushMatrix();
        // move each letter in a different direction
        rotate(i);
        translate(0, travel*50);
        rotate(-i);
        if (stringAmt > amt) {  // skip letter positions less than amt
          text(c, xoffset, 0);
        }
        xoffset += textWidth(c);
        popMatrix();
      }
    }
    
    void drawLettersScatterFade(String s, float amt) {
      float stringAmt = 0;
      float xoffset = 0;
      float travel = 0;
      for (int i = 0; i < s.length(); i++) {
        stringAmt = (i+1)/float(s.length()+1);
        char c = s.charAt(i);
        travel = amt;
        pushMatrix();
        // move each letter in a different direction
        rotate(i);
        translate(0, travel*50);
        rotate(-i);
        pushStyle();
        // fade each letter by its position and the amt
        float opacity = 255 * (2 + (stringAmt-1) - (2*amt));
        fill(255, opacity);
        text(c, xoffset, 0);
        popStyle();
        xoffset += textWidth(c);
        popMatrix();
      }
    }
    
  • Thank you everybody for your help ! I got close to what I was looking for ! :) Your comments were very helpful !

Sign In or Register to comment.