# Button with changing fading text

**URL:** <https://discourse.processing.org/t/button-with-changing-fading-text/25926>\
**Category:** Coding Questions\
**Created:** [December 3, 2020, 12:54pm UTC](https://discourse.processing.org/t/button-with-changing-fading-text/25926 "2020-12-03T12:54:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jenk](https://avatars.discourse-cdn.com/v4/letter/j/d07c76/32.png) [@jenk](https://discourse.processing.org/u/jenk)\
**Post date:** [December 3, 2020, 12:54pm UTC](https://discourse.processing.org/t/button-with-changing-fading-text/25926/1 "2020-12-03T12:54:59Z")

</div>

Hi. I know there’s something blindingly obvious wrong with this - but I’m too blind to know what it is. Would love some help if you can spare the time. The objective is for a button to have text that fades in and out in different languages. I have tried so many interations that almost work but not quite. I think the problem is that the fade loop is the same for fade in and fade out and I only want the text to change at the end of the fadeout cycle - but I thought this solution would fix it. Could anyone explain to me why it doesn’t? Thanks in advance. Jen

PImage button;

int timeDelay = 4000;  
int time = 0;  
int lastTime = 0;  
int fadeout = 255;  
int fadein = -100;  
int index = 0;

String[] wordsList ={  
“įrašas”,  
“record”,  
“запись”,  
“rekord”,  
“תקליט”,  
};

void setup() {  
size(800, 680);  
background(152, 152, 152);  
rectMode(CORNER);  
textSize(40);  
smooth();  
textAlign(CENTER);  
//button = loadImage(“small button.png”);  
}  
boolean textfadesin = true;

void draw() {  
background(0);

//Draws the button  
//imageMode (CENTER);  
//image (button, width/2, height/2);

// Fades the word up AND down. tfin = true fades up tfin false = fade down  
if (textfadesin) {  
fill(255, fadein);  
fadein++;  
} else {  
fill(255, fadeout);  
fadeout–;  
}  
//Loads the word  
text (wordsList[index], width/2, 340);

// Swaps value of tfin from true to false or vice versa  
if (millis() - time \>= timeDelay) {  
time = millis();  
textfadesin = !textfadesin;

```
//Changes the word
if ((fadeout == 0) && (index < 4)) {
  index += 1;
} else {
  index = 0;
}

//Resets fadein and fadeout
fadein = 0;
fadeout = 255;

```

}  
}

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [December 3, 2020, 1:30pm UTC](https://discourse.processing.org/t/button-with-changing-fading-text/25926/2 "2020-12-03T13:30:06Z")

</div>

Hi @jenk  
The code looks good.  
Just some small modification though maybe not maybe exactly right because I don’t know how it’s supposed to work.  
But I guess now you will figure it out.

```auto
PImage button;

int timeDelay = 4000;
int time = 0;
int lastTime = 0;
int fadeout = 255;
int fadein = -100;
int index = 0;

String[] wordsList ={
  "language1", 
  "language2", 
  "language3", 
  "language4", 
  "language5", 
};

void setup() {
  size(800, 680);
  background(152, 152, 152);
  //rectMode(CORNER);
  rectMode(CENTER);
  textSize(40);
  smooth();
  textAlign(CENTER, CENTER);
  //button = loadImage("small button.png");
}
boolean textfadesin = true;

void draw() {
  background(0);

  //Draws the button
  //imageMode (CENTER);
  //image (button, width/2, height/2);
  rect(width/2, height/2, 250, 60);

  // Fades the word up AND down. tfin = true fades up tfin false = fade down
  if (textfadesin) {
    fill(255, fadein);
    fadein++;
  } else {
    fill(255, fadeout);
    fadeout--;
  }
  //Loads the word
  text (wordsList[index], width/2, 340);

  // Swaps value of tfin from true to false or vice versa
  if (millis() - time >= timeDelay) {
    time = millis();
    textfadesin = !textfadesin;
    
    //Changes the word
    if ((fadeout == 255) && (index < 4)) {
      index++;
    } 
    if (index > 5) index = 0;
    

    //Resets fadein and fadeout
    fadein = 0;
    fadeout = 255;
  }
}

```

---

<div class="post-metadata">

**Author:** ![jenk](https://avatars.discourse-cdn.com/v4/letter/j/d07c76/32.png) [@jenk](https://discourse.processing.org/u/jenk)\
**Post date:** [December 4, 2020, 4:01pm UTC](https://discourse.processing.org/t/button-with-changing-fading-text/25926/3 "2020-12-04T16:01:31Z")

</div>

Hi Noel. Thanks for your input. It’s hugely appreciated. I’ve tidied up what you sent me a bit further and taken out all the extraneous bits. It’s now doing almost exactly what I wanted it to do except for one thing. The word is changing when the text is ‘on’ and I want it to change when the text is ‘off’. IE The text string is advancing when the opacity is at 255 and I want it to change when the opacity is at zero. So surely changing the value of opacity from 255 to 0 should work? But it doesn’t and I really can’t understand why. Would really appreciate any advice.

int timeDelay = 4000;  
int time = 0;  
int fadeout = 255;  
int fadein = -100;  
int index = 0;  
int opacity = 255;

String[] wordsList ={  
“language1”,  
“language2”,  
“language3”,  
“language4”,  
“language5”,  
};

void setup() {  
size(800, 680);  
background(152, 152, 152);  
textSize(40);  
smooth();  
textAlign(CENTER, CENTER);

}  
boolean textfadesin = true;

void draw() {  
background(0);

// Fades the word up AND down. tfin = true fades up tfin false = fade down  
if (textfadesin) {  
fill(255, fadein);  
fadein++;  
} else {  
fill(255, fadeout);  
fadeout–;  
}  
//Loads the word  
text (wordsList[index], width/2, 340);

// Swaps value of tfin from true to false or vice versa  
if (millis() - time \>= timeDelay) {  
time = millis();  
textfadesin = !textfadesin;

```
//Changes the word
if ((fadeout == opacity) && (index < 5)) {
  index++;
} 
if (index == 5) index = 0;

//Resets fadein and fadeout
fadein = 0;
fadeout = 255;

```

}  
}

(Apologies for the delayed response but I managed to completely break my Mac yesterday and I only just got it back up and running)