Fade text out

Programming Questions

shantorphy

in Programming Questions • 5 months ago

I have a sketch that randomly pulls words from a .txt document and places them in random spots on the sketch. I want the words to fade out after a few seconds, but can't figure out how. Here is the code:

float r;

float g;

float b;

float a;

float diam;

float x;

float y;

void setup() {

size(1280,720, P3D);

background(0);

smooth();

frameRate(2);

// textSize(30);

PFont font;

font = loadFont("SansSerif-48.vlw");

textFont(font, 40);

fill(255);

text("I'M SORRY.", 30, 50);

text("I'M HAPPY.", 30, 86);

textSize(15);

}

void draw() {

// Each time through draw(), new random numbers are picked for a new ellipse.

r = random(125,255);

g = random(125,255);

b = random(125,255);

a = random(0,255);

x = random(0,1280);

y = random(100,720);

String[] wordy=loadStrings("http://thepanthernaut.com/happyregrets/answers.txt");

//diam = random(20);

// x = random(width);

// y = random(height);

// Use values to draw an ellipse

noStroke();

fill(r,g,b,a);

int index = int (random(wordy.length));

text(wordy[index],x,y);

}

I want the words to act like they do in the following sketch, but need them to appear on the sketch more often than one at a time:

PFont font;

int counter;

final int DISPLAY_TIME = 3000; // 2000 ms = 2 seconds

int lastTime; // When the current image was first displayed

float rx = 120;

float ry = 160;

float alphaVal = 255;

float a = 1.5;

void setup() {

size(640, 480);

background(255);

font = loadFont("Calibri-48.vlw");

textFont(font);

textSize(random(22, 35));

fill(66, 190, 255);

lastTime = millis();

}

void draw()

{

background(255);

if (millis() - lastTime >= DISPLAY_TIME) // Time to display next image

{

counter = int(random(wordy.length));

textSize(random(20, 30));

rx = random(10, 220);

ry = random(10, 120);

alphaVal = 255;

lastTime = millis();

}

fill(66, 140, 255, alphaVal);

text(wordy[counter], rx, ry, 400, 300);

alphaVal -= a;

// if (alphaVal < 0 || alphaVal > 255) {

// a *= -1;

// }

}

String[] wordy=loadStrings("http://thepanthernaut.com/happyregrets/answers.txt");

Help is very appreciated!

Replies(6)

sillyexam..

Re: Fade text out

5 months ago

You should probably create a new textField Class that has values such as color and alpha, text etc

i.ie

public int idcount=0;
public class myTextField{
float dec;
int id=(idcount);
String textStr = "";
float alpha = 255;
int myx=0;
int myy=0;
public myTextField(String str,int a,int x,int y,float dec){
idcount++;
this.textStr = str;
this.alpha = a;
this.myx=x;
this.myy=y;
this.dec=dec;
}
public void showText(){
fill(0,0,0,(int)alpha);
text(textStr,myx,myy);
}
}
myTextField[] myTextFields = new myTextField[2];
void setup(){
size(600,600);
myTextFields[0] = new myTextField("one",120,200,200,.7);
myTextFields[1] = new myTextField("two",255,270,300,.5);
}
void draw(){
background(255);
for(int i=0;i<myTextFields.length;i++){
myTextFields[i].alpha-=myTextFields[i].dec;
myTextFields[i].showText();
}
}

wrote all that free hand (so definitely wont work) but hopefully you get the just

EDIT: code should work now (although still messy)

bananbuns

Re: Fade text out

5 months ago

SillyExample that makes sense! Is there a way to randomize placement without having to create a textField for each word placement?

shantorphy

Re: Fade text out

5 months ago

sillyexample - thank you for your input and time, I really appreciate it. I've worked with the TextField all weekend but haven't accomplished what I'm looking for. I'm definitely a Processing novice, so that is contributing to my inability to accomplish this I'm sure, but if you have any other ideas/pointers I would be so grateful.

My problem with the TextField is that:
1) It occurs in void setup (), so the sketch isn't pulling items from the .txt file per frame -- they all appear at once rather than over the course of some time.
2) I cannot find a way for it to pull from the .txt file, which is live and therefore constantly changing, even if it is in void setup (). I can only get the sketch to work if I manually input all items from the .txt file.

If you run my sketch (I'll paste below again), it's essentially how I want it to look, minus the fade out of each word/set of words.

Again, thank you very much for the help and any further pointers are very appreciated.

float r;

float g;

float b;

float a;

float diam;

float x;

float y;

void setup() {

size(1280,720, P3D);

background(0);

smooth();

frameRate(2);

// textSize(30);

PFont font;

font = loadFont("SansSerif-48.vlw");

textFont(font, 40);

fill(255);

text("I'M SORRY.", 30, 50);

text("I'M HAPPY.", 30, 86);

textSize(15);

}

void draw() {

// Each time through draw(), new random numbers are picked for a new ellipse.

r = random(125,255);

g = random(125,255);

b = random(125,255);

a = random(0,255);

x = random(0,1280);

y = random(100,720);

String[] wordy=loadStrings("http://thepanthernaut.com/happyregrets/answers.txt");

//diam = random(20);

// x = random(width);

// y = random(height);

// Use values to draw an ellipse

noStroke();

fill(r,g,b,a);

int index = int (random(wordy.length));

text(wordy[index],x,y);

}

v.k.

Re: Fade text out

5 months ago

Here, I tried an OOP approach to your sketch... take a look and see if this is what you need :)

[edited code]

String[] wordy;// declare global...
// an arraylist to add and remove fading words...
ArrayList <FadingText> words = new ArrayList<FadingText>();
int i;
PFont font;// made global
void setup() {
size(1280, 720, P3D);
background(0);
smooth();
font = createFont("SansSerif", 48);
wordy=loadStrings("http://thepanthernaut.com/happyregrets/answers.txt");// initialize only once
Collections.shuffle(Arrays.asList(wordy));
}
void draw() {
// clear bg
background(0);
// draw steady phrases
fill(255);
textFont(font, 40);
text("I'M SORRY.", 30, 50);
text("I'M HAPPY.", 30, 86);
// increment i constraining it to length of array
i = (i+1) % wordy.length;
// create a FadingText for this word and display it
words.add(new FadingText ( wordy[i]));
for (FadingText f:words) {
f.display();
}
// if word is faded out, remove it from list
// going backwards...
if (words.size() > 0) {
for (int i = words.size(); i > 0; i--) {
if (words.get(i-1).isDone()) {
words.remove(i);
}
}
}
}
class FadingText {
String txt;
float alpha;
float r, g, b, x, y;
FadingText (String _txt) {
txt = _txt;
alpha = 255;
r = random(125, 255);
g = random(125, 255);
b = random(125, 255);
x = random(0, 1280);
y = random(100, 720);
}
void display() {
textSize(15);
noStroke();
fill(r, g, b, alpha);
text(txt, x, y);
alpha-=4;// fading speed
}
boolean isDone() {
return alpha < 0;
}
}

shantorphy

Re: Fade text out

5 months ago

Thank you so much v.k.! Very helpful :)

v.k.

Re: Fade text out

5 months ago

My pleasure. I just edited the code above, getting rid of indexes array, as I realized its easier to just shuffle the "wordy" array. Same result, but a neater code :)

Top Reply

Fade text out

Replies(6)

Re: Fade text out

Re: Fade text out

Re: Fade text out

Re: Fade text out

Re: Fade text out

Re: Fade text out

Statistics

Tags

Actions

Related Posts