How to make some texte move and change its opacity ?

c_aamille

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 ! :)

Chrisir

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 ;-)

Chrisir

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

Chrisir

TIMer starts a Boolean variable isActivated

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

jeremydouglass

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.

jeremydouglass

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 -- 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();
  }
}

c_aamille

Thank you everybody for your help ! I got close to what I was looking for ! :) Your comments were very helpful !