Fading out with alpha value

AshaSato

Hello, I'm new to processing and new(ish) to programming in general, and I've reached a stumbling block. I've spent a good few hours researching answers to this, but so far I've come up empty handed.

I'm trying to get some text (or whatever else) to fade out when the mouse is pressed. I have tried the following:

int alphaVal = 255;

void setup() {
  size(500, 500);
  background(255);
  }

void draw() {
 if (mousePressed && alphaVal > 0) {
   alphaVal--;
   println(alphaVal);
 }
 fill(0, alphaVal);
 textAlign(CENTER);
 text("Vanishing Text", width/2,height/2);
 }

Which doesn't work at all. When I depress the mouse button, I can see alphaVal decreasing to zero on the console, but the sketch doesn't change. I'd really appreciate some help understanding why this doesn't work the way I thought it would and also some nudging in a better direction to make this work.

Another way I tried was calling background() at the beginning of draw(), but for my purposes this is no good; I'm making a drawing app of sorts, and calling background() at the beginning of draw() erases the user's input - I only want to erase the text.

(I'm using Processing 2.1 on a MacbookPro running OSX 10.8.5).

AshaSato

Oh - I think I've figured it out why it doesn't work - because I'm not redrawing the background, the less opaque re-draws just sit on top of the first draw at full opacity.

Which brings me back to the same problem - I want to keep the user input, and re-drawing the background erases it :/

KevinWorkman

Then you need to keep track of everything you want to draw. Whether you do that in some kind of PGraphics buffer or in a data structure (like an ArrayList of drawn objects) is up to you.

koogs

Failing that, don't call background and just draw a black rectangle over the old text before writing the new text. Might be easier.

AshaSato

Thanks for your replies.

Kevin, that's what I ended up doing yesterday - I used PGraphics to make a canvas, so the user draws to the canvas instead of directly into the draw() function. It works but i don't fully understand why it works it yet - However I will keep reading.

koogs - drawing a rectangle over the text creates the same problem as redrawing the background, because the rectangle not only covers the text, but also anything that had been drawn by the user within the bounds of the rectangle.

KevinWorkman

You might want to check out this tutorial: http://wiki.processing.org/w/Draw_to_off-screen_buffer