Text fade in/out with millis

edited October 2015 in Questions about Code

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

Answers

  • textfadesout=!textfadesout;

  • 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_vk
    edited October 2015

    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;
      }
    }
    
  • 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);
    }
    
  • 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_vk
    edited October 2015 Answer ✓

    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.

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

Sign In or Register to comment.