Button with changing fading text

Processing Coding Questions
1

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;

}
}

2

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.

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;
  }
}
3

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)