Fading Images In/Out

Programming Questions

mtbuckets

in Programming Questions • 2 years ago

Hey there, I'm having trouble getting my images to fade in and out. I know I need to use tint(); but I'm having more difficulty than I should be. Below is some of my code, hopefully someone can help me figure out what I need to do!

Right now the program is grabbing images from Flickr based on results from a Twitter search, and those images appear one at a time. I need them to fade in and out.

void draw() {
background(255);
if (frameCount % 200 == 1) {
index++;
if ( index >= fp.length ) {
index = 0;
tweetIndex++;
if ( tweetIndex >= tweets.length ) tweetIndex = 0;
String[] tokens = splitTokens(tweets[tweetIndex], " .,;:!@#&*?\"/-()");
ArrayList stopwords = new ArrayList();
String[] lines = loadStrings("stopwords.txt");
String allWords = join(lines, " ").toLowerCase();
String[] t = splitTokens(allWords, " ");
for (int i=0; i < t.length; i++) stopwords.add(t[i]);
ArrayList goodwords = new ArrayList();
for (int i=0; i < tokens.length; i++) {
//print(tokens[i]);
if ( stopwords.contains(tokens[i].toLowerCase()) == false ) {
// keep that word
goodwords.add( tokens[i] );
}
}
String[] searchwords = new String[ goodwords.size() ];
for (int i=0; i < searchwords.length; i++) {
searchwords[i] = (String)goodwords.get(i);
}
fp = new PImage[ searchwords.length ];
for ( int i=0; i < searchwords.length; i++) {
PImage[] tmp = flickrSearch( searchwords[i], 1 );
if ( tmp.length <= 0 ) {
// use default image
fp[i] = loadImage("unfocused.jpg");
}
else {
fp[i] = tmp[0];
}
}
}
}
image (fp[index], width/2, height/2);
fill(0);
text(tweets[tweetIndex], 10, height-10);
}

Replies(2)

jeff_g

Re: Fading Images In/Out

2 years ago

Tint() should do it. According to the reference, to make an image transparent, but not change it's color, use white as the tint color and specify an alpha value. For instance, tint(255, 128) will make an image 50% transparent (unless colorMode() has been used).

Cycle through the second value from 0 to 255 to fade the image in.

Another way may be to create a rect() in front of the image with the same color as the background and fade it out, so you're not fading the image in, but fading out a rectangle in front of the image giving the appearance that the image is fading in.

mtbuckets

Re: Fading Images In/Out

2 years ago

Well after some tinkering I finally got it to work. I needed to declare my variables for fade/fadeSpeed outside of draw (though I'm still not sure why, at least it's working).

My problem now is how I can make sure the image can fade in and out in time before the next image is displayed.

EDIT: Solved that too! There must be a better way to do it, but this works for my purposes.

if (frameCount % 200 >= 1 && frameCount % 200 <= 99) {
fadeSpeed = 1;
}
else if (frameCount % 200 >= 100 && frameCount % 200 <= 199) {
fadeSpeed = -1;
}
fade += fadeSpeed;

Top Reply