Text fade in

edited December 6 in Library Questions

I'm having some trouble with my text. I cant get them all to fade in at the same rate and I don't know what im doing wrong. After t[0], all the other pieces of text seem to just appear rather than fading in like I want them to. Would really appreciate some help!

import ddf.minim.*;

Minim minim;
AudioPlayer track;



PFont sourceSans, helvet;
float textAlpha = 0;

String []t = {
 "43.8 billion people in the U.S. \n suffer from mental illness",
"Anxiety disorders affect 40 billion people, \n or 18.1%",
"There is a scarce \n but growing market for \n products, designs, \n and tools that \n combat mental health.",
"What can we, \n as designers do?"
};


void setup() {
  size (700, 600);
  noCursor();


sourceSans = createFont ("SourceSansPro-Light", 10);
helvet = createFont ("Helvetica-Bold", 40);


  minim = new Minim(this);
  track=minim.loadFile("heart.mp3");
  track.loop();

} 



void draw() {
  background(0);
  strokeWeight(3);




  //(96,143,193) blue
  //(193,23,49) red

  translate(0, 250);
  for (int i = 0; i< track.bufferSize()-1; i++) {             
    float x1 = map( i, 0, track.bufferSize(), 0, width );  //x1 values remapped to reach width
    float x2 = map( i+1, 0, track.bufferSize(), 0, width );


    if (track.left.get(i) == 0) {                          //stroke color
      stroke(96, 143, 193);
    } else if (track.left.get(i) >0) {
      stroke(193, 23, 49);
    } else if (track.left.get(i) < 0) {
      stroke(193, 23, 49);
    }


    line( x1, track.left.get(i), x2, track.left.get(i) *300);//draw a line from one buffer position to the next for both channels
                                                             //series of vertical lines 
  }


  translate(0,-300);
  textFont(sourceSans);
  fill(255,textAlpha);

  if (millis() >=5000) {
  text(t[0], 100,100);
  textAlpha++;
}

if (millis() >=10000) {
  text(t[0], 100,200);
  textAlpha++;
}

if (millis() >= 12000) {
  text(t[2], 100,350);
  textAlpha++;
}


textSize(20);
if (millis() >= 14000) {
  text(t[3], 500,500);
  textAlpha++;
}

}

Answers

  • Each text will need their own alpha value at the right times. The proper solution is using an array, for you to implement.

    Kf

    import ddf.minim.*;
    
    Minim minim;
    AudioPlayer track;
    
    
    
    float textAlpha0 = 0;
    float textAlpha1 = 0;
    float textAlpha2 = 0;
    float textAlpha3 = 0;
    
    String []t = {
      "43.8 billion people in the U.S. \n suffer from mental illness", 
      "Anxiety disorders affect 40 billion people, \n or 18.1%", 
      "There is a scarce \n but growing market for \n products, designs, \n and tools that \n combat mental health.", 
      "What can we, \n as designers do?"
    };
    
    
    void setup() {
      size (700, 600);
      noCursor();
    
    
    
    
      minim = new Minim(this);
      track=minim.loadFile("chord.mp3");
      track.loop();
    } 
    
    
    
    void draw() {
      background(0);
      strokeWeight(3);
    
    
    
    
      //(96,143,193) blue
      //(193,23,49) red
    
      translate(0, 250);
      for (int i = 0; i< track.bufferSize()-1; i++) {             
        float x1 = map( i, 0, track.bufferSize(), 0, width );  //x1 values remapped to reach width
        float x2 = map( i+1, 0, track.bufferSize(), 0, width );
    
    
        if (track.left.get(i) == 0) {                          //stroke color
          stroke(96, 143, 193);
        } else if (track.left.get(i) >0) {
          stroke(193, 23, 49);
        } else if (track.left.get(i) < 0) {
          stroke(193, 23, 49);
        }
    
    
        line( x1, track.left.get(i), x2, track.left.get(i) *300);//draw a line from one buffer position to the next for both channels
        //series of vertical lines
      }
    
    
      translate(0, -300);
    
    
      if (millis() >=5000) {
        fill(255, textAlpha0++);
        text(t[0], 100, 100);
      }
    
      if (millis() >=10000) {
        fill(255, textAlpha1++);
        text(t[0], 100, 200);
      }
    
      if (millis() >= 12000) {
        fill(255, textAlpha2++);
        text(t[2], 100, 350);
      }
    
    
      textSize(20);
      if (millis() >= 14000) {
        fill(255, textAlpha3++);
        text(t[3], 500, 500);
      }
    }
    
  • Just to expand a bit on kjafer's answer...I just did this same thing (I'm a very new-ish programmer)

    I used a Table with each line having the text, and the transparency value, then updated the table each time though and adjusted the transparency value (fixed increments, a fancier formula, etc). The cool thing for me is that I also included the font color in the table and shifted the color slightly as the text faded in or out. Nice effect. You could also manipulated the size and position of the text, of course, in the same way.

    --Darin

Sign In or Register to comment.