Fading Animation

Programming Questions

musically..

in Programming Questions • 2 years ago

I am trying to make a fading effect in Processing and I came up with this quick hack of sorts.

Could someone with some experience kindly tell me if this is indeed the best way of doing it or is there something better?

PGraphics pg;
void setup() {
size(320, 200);
pg = createGraphics(width, height, P2D);
smooth();
frameRate(60);
colorMode(RGB, 255, 255, 255);
pg.colorMode(RGB, 255, 255, 255);
}
void draw() {
background(0);
pg.beginDraw();
pg.tint(255, 255, 255, 200); // Make the next version of the image a little 'lighter'
pg.image(pg, 0.5, 0.5); // Put the PGraphics on top of itself (Not sure why I need 0.5 here)
pg.endDraw();
image(pg, 0, 0); // Paste the PGraphics object as an image
println(frameRate);
}
// On clicking, make an ellipse which will fade away into oblivion soon.
// The playing with colorMode is only to get aesthetically pleasing colors.
void mousePressed() {
pg.beginDraw();
pg.colorMode(HSB, 360, 100, 100);
float hue = random(360);
pg.fill(hue, 100, 100);
pg.stroke(hue, 100, 100);
pg.ellipse(mouseX, mouseY, 10, 10);
pg.colorMode(RGB, 255, 255, 255);
pg.endDraw();
}

Though this implementation works for the black background, I cannot get the transparent layer effect with it.

That is, if I place an image at the background (instead of doing a background(0) on line 14), then the image(pg, 0, 0) covers it with the black background. I would want the image to persist, with the fading ellipses over it.

Any ways/libraries to achieve this effect?

Thanks.

musically_ut

Replies(3)

amnon.owed

Re: Fading Animation

2 years ago

You could have the transparency in the ellipses themselves. Then any background - solid color or image - will work. Because the increasingly transparent ellipses are placed on top of the consistent background.

ArrayList circles = new ArrayList();
void setup() {
size(320,200);
smooth();
}
void draw() {
background(0); // or an image
for (int i=0; i<circles.size(); i++) {
FadingCircle fc = (FadingCircle) circles.get(i);
fc.run();
}
}
class FadingCircle {
int x,y;
color c;
int transparency;
FadingCircle(int x, int y) {
this.x = x;
this.y = y;
colorMode(HSB,360,100,100);
c = color(random(360),100,100);
transparency = 255;
}
void run() {
if (transparency <= 4) { transparency = 0; }
else { transparency -= 4; };
noStroke();
fill(c,transparency);
ellipse(x,y,12,12);
}
}
void mousePressed() {
circles.add(new FadingCircle(mouseX,mouseY));
}

musically..

Re: Re: Fading Animation

2 years ago

Thanks for the prompt answer.

This indeed solves the problem, but wouldn't it be horribly inefficient to draw ellipses repeatedly if one wants to draw 'curves'?

To slightly extend your example:

ArrayList circles = new ArrayList();
boolean pressed;
void setup() {
size(320,200);
smooth();
}
void draw() {
for (int i=0; i<circles.size(); i++) {
FadingCircle fc = (FadingCircle) circles.get(i);
fc.run();
}
if(pressed) circles.add(new FadingCircle(mouseX,mouseY));
}
class FadingCircle {
int x,y;
color c;
int transparency;
FadingCircle(int x, int y) {
this.x = x;
this.y = y;
colorMode(HSB,360,100,100);
c = color(random(360),100,100);
transparency = 255;
}
void run() {
if (transparency <= 4) { transparency = 0; }
else { transparency -= 4; };
noStroke();
fill(c,transparency);
ellipse(x,y,12,12);
}
}
void mousePressed() {
pressed = !pressed;
}

The changes are in lines 42 and 18. If I click, slowly move the mouse over the screen, then I get a curve which fades, but large parts of previous ellipses are covered by the new ones. In the final project I had in mind, I would have a lot of such (bezier) curves going all over the place.

In this case, I was thinking that having a fading layer would be best option.

Is there any standard way of doing this 'right'?

musically_ut

amnon.owed

Re: Fading Animation

2 years ago

Yeah, you're right. I went back to your original code and made some changes. Now it uses a combination of pgraphics plus the pixel array to change the transparency. You can change fadeSpeed to make it fade out slower or faster. Also, note the use of mouseDragged instead of mousePressed. There is not one best way, just different solutions for different situations. But I do think, given your remarks, the example below is better suited than my previous attempt.

PGraphics pg;
PImage pi;
int fadeSpeed = 4;
void setup() {
size(320, 200);
pg = createGraphics(width, height, P2D);
pi = loadImage("input.jpg");
}
void draw() {
image(pi,0,0);
fadePG();
image(pg,0,0);
}
void mouseDragged() {
pg.beginDraw();
pg.noStroke();
pg.colorMode(HSB, 360, 100, 100);
pg.fill(random(360), 100, 100);
pg.ellipse(mouseX, mouseY, 14, 14);
pg.endDraw();
}
void fadePG() {
pg.loadPixels();
for (int x=0; x<pg.width; x++) {
for (int y=0; y<pg.height; y++ ) {
int loc = x + y*pg.width;
float a = alpha (pg.pixels[loc]);
if (a>0) {
float r = red (pg.pixels[loc]);
float g = green (pg.pixels[loc]);
float b = blue (pg.pixels[loc]);
pg.pixels[loc] = color(r,g,b,a-fadeSpeed);
}
}
}
pg.updatePixels();
}

Top Reply