# Animate text opacity in a text String

**URL:** <https://discourse.processing.org/t/animate-text-opacity-in-a-text-string/9025>\
**Category:** Coding Questions\
**Created:** [March 6, 2019, 5:19pm UTC](https://discourse.processing.org/t/animate-text-opacity-in-a-text-string/9025 "2019-03-06T17:19:36Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![jacobo](https://avatars.discourse-cdn.com/v4/letter/j/e95f7d/32.png) [@jacobo](https://discourse.processing.org/u/jacobo)\
**Post date:** [March 6, 2019, 5:19pm UTC](https://discourse.processing.org/t/animate-text-opacity-in-a-text-string/9025/1 "2019-03-06T17:19:36Z")

</div>

Hi everyone. I have this class with a lot of cities. I want each city to have it’s opacity/alpha value be random and go between 0-255, kind of like a pulsing effect.

I’ve tried with if() statements but its not quite there

```auto
class OrdBillede2 {

  float opacity;

  color [] muligeFarver = {
    color(100, 214, 232), 
    color(22, 81, 32), 
    color(31, 66, 106), 
  };

  String [] words2 = loadStrings("byer2.txt");
  String [] individual;
  color [] byFarver;

  int o;
  PFont font1;
  float textStr2 = 15;

  OrdBillede2() {

    opacity = random(0, 255);

    font1 = loadFont ("Akkurat-Bold-18.vlw");
    textFont(font1);
    //for (int i = 0; i <10; i++) {
    // words2 = concat(words2, words2);
    //}

    individual = split(join(words2, " "), " ");

    byFarver = new color[individual.length];

    for (int i = 0; i<individual.length; i++) {
      byFarver[i] = muligeFarver [int(random(muligeFarver.length))];
    } // loop
  } // OrdBillede2()

  void display() {

    showText (individual);
  } // void display
  void showText(String [] localArray) {

    int x = 80;
    int y = 176;

    for ( int i = 0; i <localArray.length; i++) {
      if (x+textWidth (localArray[i])>width-5) {
        x = 80;
        y += 30;
      }
      textAlign(CENTER);
      textFont(font1);
      textSize(textStr2);
      fill(byFarver[i], opacity);
      text(localArray[i], x, y);
      x+=textWidth (localArray[i])+22;
    }
    if (opacity > 255) {
      opacity = opacity-10;
    }
    if (opacity < 0) {
      opacity = opacity+10;
    }
  } // void showText
} // ordBillede2

```

---

<div class="post-metadata">

**Author:** ![FSXAC](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fsxac/32/3995_2.png) [@FSXAC](https://discourse.processing.org/u/FSXAC)\
**Post date:** [March 6, 2019, 6:20pm UTC](https://discourse.processing.org/t/animate-text-opacity-in-a-text-string/9025/2 "2019-03-06T18:20:19Z")

</div>

For a pulsing effect you could try using a variable for the change in opacity in each update loop. And when the opacity reaches its bounds, negate that variable:

```auto
float opacity_change = 10;
float opacity = 10;

void showText(...) {
  // ...
  if (opacity <= 0 || opacity >= 255) {
    opacity_change *= -1;
  }
  
  opacity += opacity_change;
  opacity = clamp(opacity, 0, 255);
}

```

---

<div class="post-metadata">

**Author:** ![jacobo](https://avatars.discourse-cdn.com/v4/letter/j/e95f7d/32.png) [@jacobo](https://discourse.processing.org/u/jacobo)\
**Post date:** [March 6, 2019, 6:30pm UTC](https://discourse.processing.org/t/animate-text-opacity-in-a-text-string/9025/3 "2019-03-06T18:30:06Z")

</div>

Hi.

I’m getting the error message “the function clamp(float, int, int) does not exist.”

---

<div class="post-metadata">

**Author:** ![FSXAC](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fsxac/32/3995_2.png) [@FSXAC](https://discourse.processing.org/u/FSXAC)\
**Post date:** [March 6, 2019, 6:33pm UTC](https://discourse.processing.org/t/animate-text-opacity-in-a-text-string/9025/4 "2019-03-06T18:33:26Z")

</div>

My apologies, I’m getting my syntax confused. I meant to type `constrain(...)`.

😁

---

<div class="post-metadata">

**Author:** ![jacobo](https://avatars.discourse-cdn.com/v4/letter/j/e95f7d/32.png) [@jacobo](https://discourse.processing.org/u/jacobo)\
**Post date:** [March 6, 2019, 6:36pm UTC](https://discourse.processing.org/t/animate-text-opacity-in-a-text-string/9025/5 "2019-03-06T18:36:52Z")

</div>

works, thanks!

is it possible to make each city animate individually, so it’s more of a random pulsing rather than in unison?

edit: or from left -\> right so it gets some sort of movement/rythm?

---

<div class="post-metadata">

**Author:** ![FSXAC](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fsxac/32/3995_2.png) [@FSXAC](https://discourse.processing.org/u/FSXAC)\
**Post date:** [March 6, 2019, 6:45pm UTC](https://discourse.processing.org/t/animate-text-opacity-in-a-text-string/9025/6 "2019-03-06T18:45:01Z")

</div>

An alternative (and possibly simpler) pulsing animation could be done with sine functions and would give a more natural pulsing. I encourage you to try this as well:

```auto
float t = 0.1 * frameCount;
float phase = 0.0;
float opacity = map(sin(t + phase), -1, 1, 0, 255);

```

Explanation: We want opacity to pulse vary through time, so we use `frameCount` as it increases with time. Plug that into the sine function and we get output in the range of -1 to 1. Since opacity is in range of 0 to 255, we use `map` to linearly map `-1` to `0` and `1` to `255`.

For randomness in each of your cities, each city should hold an extra variable called `phase` (a random number between 0 and `TWO_PI`.

---

<div class="post-metadata">

**Author:** ![FSXAC](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fsxac/32/3995_2.png) [@FSXAC](https://discourse.processing.org/u/FSXAC)\
**Post date:** [March 6, 2019, 6:46pm UTC](https://discourse.processing.org/t/animate-text-opacity-in-a-text-string/9025/7 "2019-03-06T18:46:01Z")

</div>

For left-\>right movement, it’s very easy if you’re using sine waves, since you just need to have the `phase` variable increase from left to right.

---

<div class="post-metadata">

**Author:** ![FSXAC](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fsxac/32/3995_2.png) [@FSXAC](https://discourse.processing.org/u/FSXAC)\
**Post date:** [March 6, 2019, 6:55pm UTC](https://discourse.processing.org/t/animate-text-opacity-in-a-text-string/9025/8 "2019-03-06T18:55:27Z")

</div>

Quick examples:

**Random Phases** :

```auto
float[] phases;

void setup() {
  size(600, 200);
  phases = new float[10];
  
  // random phases
  for (int i = 0; i < 10; i++) {
    phases[i] = random(0, TWO_PI);
  }
}

void draw() {
  background(0);
  
  for (int i = 0; i < 10; i++) {
    float opacity = map(sin(0.1 * frameCount + phases[i]), -1, 1, 0, 255);
    fill(255, opacity);
    
    ellipse(50 + i * 50, 100, 50, 50);
  }
}

```

![randompulse](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/30f3f24c60dc414359736739560baf0ca89606ac.gif)

**Linear (Left to Right) Pulse**

The only thing I changed is the phases I defined at the start: You can change that `i * -0.5` to change the speed and direction.

```auto
void setup() {
  size(600, 200);
  phases = new float[10];
  
  // linear phases
  for (int i = 0; i < 10; i++) {
    phases[i] = i * -0.5;
  }
}

```

![linearpulse](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/72790cf0c4d75ffbdea88ee39f6560e76213a961.gif)

---

<div class="post-metadata">

**Author:** ![jacobo](https://avatars.discourse-cdn.com/v4/letter/j/e95f7d/32.png) [@jacobo](https://discourse.processing.org/u/jacobo)\
**Post date:** [March 6, 2019, 7:29pm UTC](https://discourse.processing.org/t/animate-text-opacity-in-a-text-string/9025/9 "2019-03-06T19:29:52Z")

</div>

Thank you very much.

---

<div class="post-metadata">

**Author:** ![jacobo](https://avatars.discourse-cdn.com/v4/letter/j/e95f7d/32.png) [@jacobo](https://discourse.processing.org/u/jacobo)\
**Post date:** [March 7, 2019, 8:26am UTC](https://discourse.processing.org/t/animate-text-opacity-in-a-text-string/9025/10 "2019-03-07T08:26:34Z")

</div>

Hi again FSXAC,

the effect works great, but it’s messing with my string now.

it’s repeating on the x-axis like this

 ![vinterjazz](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6fe5ba5005b08c482023f984ce0f760e033c2395.png)

instead of like this

 ![vinterjazz2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e0056cf4f56aac3af2ebdcc05231631a697f0eb9.png)

```auto
class OrdBillede2 {

  color [] muligeFarver = {
    color(100, 214, 232), 
    color(22, 81, 32), 
    color(31, 66, 106), 
  };

  String [] words2 = loadStrings("byer2.txt");
  String [] individual;
  color [] byFarver;

  float [] phases;

  int o;
  PFont font1;
  float textStr2 = 15;

  OrdBillede2() {

    font1 = loadFont ("Akkurat-Bold-18.vlw");
    textFont(font1);
    //for (int i = 0; i <10; i++) {
    // words2 = concat(words2, words2);
    //}
    phases = new float[10];

    for (int i = 0; i < 10; i ++) {
      phases[i]=random(0, TWO_PI);
    }

    individual = split(join(words2, " "), " ");

    byFarver = new color[individual.length];

    for (int i = 0; i<individual.length; i++) {
      byFarver[i] = muligeFarver [int(random(muligeFarver.length))];
    } // loop
  } // OrdBillede2()

  void display() {

    showText (individual);
  } // void display
  void showText(String [] localArray) {

    int x = 80;
    int y = 176;

    for ( int i = 0; i <localArray.length; i++) {
      if (x+textWidth (localArray[i])>width-5) {
        x = 80;
        y += 30;
      }

      for (int k = 0; k < 10; k++) {
        float opacity = map(sin(0.1*frameCount + phases[k]), -1, 1, 0, 255);
        textAlign(CENTER);
        textFont(font1);
        textSize(textStr2);
        fill(byFarver[i], opacity);
        text(localArray[i], x, y);
        x+=textWidth (localArray[i])+22;
      } // void showText
    } // ordBillede2
  }
}

```

---

<div class="post-metadata">

**Author:** ![FSXAC](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fsxac/32/3995_2.png) [@FSXAC](https://discourse.processing.org/u/FSXAC)\
**Post date:** [March 7, 2019, 6:27pm UTC](https://discourse.processing.org/t/animate-text-opacity-in-a-text-string/9025/11 "2019-03-07T18:27:09Z")

</div>

Ah, the you’ve made ten different phases for **each** word you wanted to display. What I meant was having a phase **per** word. In this case, we can make a _parallel list_ where the phases have the same size as your words array `individuals`.

Here’s what I would change:

- In your constructor, instead of making a phases array the size of 10, we make it the same size as your `individual` array, so that for each item in `individual`, there is a phase for it.

```auto
float[] phases;

OrdBillede2() {
  // ...
  phases = new float[individual.length];

  for (int i = 0; i < individual.length; i ++) {
    phases[i]=random(0, TWO_PI);
  }
  // ...
}

```

- Remove the nested **for** loop (the one with `k`) at the bottom of your `showText` function where it loops through all the phases for each word, instead just use the integer you already have: `i` to reference to phase for that letter.

```auto
void showText(...) {
  // ...

  for (int i = 0; i < localArray.length; i++) {
    // ...

    float opacity = map(sin(0.1*frameCount + phases[i]), -1, 1, 0, 255);
    textAlign(CENTER);
    textSize(textStr2);
    fill(byFarver[i], opacity);
    text(localArray[i], x, y);
    x+=textWidth (localArray[i])+22;
}

```

The result is that each word is no longer repeated 10 times:  
 ![wordpulse2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b69005e6d927cd005c14ff760bab6a684fe8eb43.gif)