Text fade in/out with millis

basinico

I'm attempting to create a looping system that continuously fades in and out text over time. I'm using millis() to do this but I've run into a snag in trying to get the fading to occur in perpetuity. The fading behavior works the first time, the text fades in and then out, but after that the text just pops up without the fades occurring. Any recommendations about how to get this working properly?

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

void setup() {
  size(800, 680);
  background(152, 152, 152);
  rectMode(CORNER);
}


boolean textfadesin = true;
boolean textfadesout = true;


void draw() {
background(0);

{    
  if (textfadesin) {
    textSize(40);
    smooth(); 
    textAlign(CENTER); 
    tint(255); 
    tint(255, fadein+100); 
    fill(255, fadein); 
    text("Why won't this work", width/2, 200); 
    fadein++; 
} 

  else {
 if (textfadesout) {
    textSize(40);
    smooth(); 
    textAlign(CENTER); 
    tint(255); 
    tint(255, fadeout-100); 
    fill(255, fadeout); 
    text("Why won't this work", width/2, 200); 
    fadeout--; 
}
  }
  if (millis() - time >= timeDelay) {
    time = millis();
    textfadesin = !textfadesin;
    textfadesout = true;
  }
}
}

Chrisir

textfadesout=!textfadesout;

basinico

Unfortunately that doesn't fix the problem and introduces a different incorrect behavior to the mix. I know that it's right in front of me, but I just can't seem to sort it.

_vk

You don't need 2 booleans with exact the opposite meaning. One can already be true or false, as you don't have a 3rd state, when its not fading in, it gotta be fading out...

Aslo You need to reset the vars fadein and fadeout. This was the main issue.

By convention vars named with more than one word are write either

textFadeOut

or

text_fade_out

Moved non changing stuff to setup

mooved the text call out of the if chain so you Don'tRepeatYourself... DRY

You can just use a saw tooth triangle wave to achieve the same thing... Or almost...

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

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


boolean textfadesin = true;


void draw() {
  background(0);


  if (textfadesin) {
    fill(255, fadein); 
    fadein++;
  } else {
    fill(255, fadeout); 
    fadeout--;
  }

  text("Why this works, \n migth be a better question. \n:)", width/2, 200); 
  if (millis() - time >= timeDelay) {
    time = millis();
    textfadesin = !textfadesin;
    fadein = 0;
    fadeout = 255;
  }
}

_vk

Sorry, actually is a triangle wave...

float speed = 1.2; 
float value = 0.0;
int MAX = 255;


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

void draw() {
  background(0);

  value+=speed;
  float fade = MAX - abs(value % (2*MAX) - MAX);
  fill(255, fade); 


  text("Why this works, \n migth be a better question. \n:)", width/2, 200);
}

basinico

Ah yes! Thanks. I've been working on variations of this and I realized when I was re-looking over your comments that I totally had a bunch of extra things stuffed in there from prior/other versions. I really appreciate the help with this! All I've got left is to add in a few seconds of black between the fade out and the fade back in.

_vk

Or you can use sin for an "organic" fade...

float speed = 1.; 
float value = 0.0;
int MAX = 255;


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

void draw() {
  background(0);

  value+=speed;
  float fade = ((sin(radians(value))+1)/2)*MAX;
  //float fade = abs(sin(radians(value)))*MAX;
  fill(255, fade); 


  text("Why this works, \n migth be a better question. \n:)", width/2, 200);
}

Both this "waves" approach, as they are implemented, are frameRate dependent. The millis() one is not.

basinico

It's funny, I hadn't even thought about going about it in that way and of course it makes perfect sense.