Fade out everything on screen to black

ethanh411

Hi all,

I'm working on a music visualization program for my CS class, and I'd like to leave an afterimage of stuff that was on the screen in the previous few frames.

Having looked around the forum for similar topics, they all involve either fading out to white (not black) or using arrays, and the problem is that I have a few thousand lines drawn per frame.

Using background (0, some alpha parameter) hasn't been working. Any other ideas that don't involve huge arrays?

Thanks, Ethan

// Posting code in case anyone wants to look at it - it doesn't really matter for the question.

void draw() {

  beat = 0;
  waveformY = height / 25;

  if ( song.isPlaying() ) {
    fft.forward(song.mix);
  }

  for (int i = 0; i < 13; i++) { 
    beat = beat + int ( log (fft.getBand(i)));
  }


  for (int i = 0; i < width / 2; i++) {
    stroke (redLevel, greenLevel, blueLevel, fft.getBand (i));
    line (width / 2 - i, 0, width / 2 - i, height);
    line (width / 2 + 1 + i, 0, width / 2 + 1 + i, height);
  }

  stroke (redLevel, greenLevel, blueLevel, beat + 10);
  for (int i = 0; i < width; i++) {
    float x1 = map( i, 0, song.bufferSize(), 0, width );
    float x2 = map( i+1, 0, song.bufferSize(), 0, width );
    if (x1 % (width / 50) < x2 % (width / 50)) {
      line( x1 % (width / 50) * 50, song.left.get(i)*100 + waveformY, x2 % (width / 50) * 50, song.left.get(i+1)*100 + waveformY);
      line( x1 % (width / 50) * 50, song.right.get(i)*100 + waveformY, x2 % (width / 50) * 50, song.right.get(i+1)*100 + waveformY);
    } else {
      waveformY = waveformY + height / 25;
    }
  }
}

GoToLoop

Dunno whether it's any help. But here are some online examples w/ fading: :-/

1. http://studio.ProcessingTogether.com/sp/pad/export/ro.9GTDpA6dp4tH1
2. http://studio.ProcessingTogether.com/sp/pad/export/ro.9ldYvJUyiXGzi
3. http://studio.ProcessingTogether.com/sp/pad/export/ro.9Q6oRai8-41WJ

ethanh411

Unfortunately, those ones all involve redrawing all of the old frames, which would cause massive lag considering the thousand-plus lines that I'm already drawing each frame...

What I'm really looking for is some background()-like bit of code that will just lower the brightness of everything in the sketch so that I can then have the next frame be drawn over the previous one, then fade that and draw another, etc.

If it involves a library that's fine.

GoToLoop

Your best bet is taking a look @ PGraphics then: :-B
https://Processing.org/reference/PGraphics.html

ethanh411

Seems like I might be able to dig something out of that which should work. I'll look further on Monday when I have access to all my files at school again.

benja

background() does not work with transparency, but you could just draw a semi-transparent rectangle on the screen. Look at this example:

boolean fade = false;

void setup(){
  size(400, 400);
}

void draw(){
  if(fade){
    fill(0, 10);
    rect(0, 0, width, height);
  }else{
    ellipse(random(width), random(height), 20, 20);
  }
}

void mousePressed(){
  fade = true;
}

koogs

You'll need to set a proper fill color before drawing the ellipse 8)

ethanh411

@benja - I'll try that out - thanks! I did learn why you can't use alpha with background from the PGraphics javadoc, though.

ethanh411

Worked like a charm. The visualizer is looking great 8D

Tsskyx

@GoToLoop I'm scratching my head about those three examples. How did you even, where can I learn your ways? All those byte shifts, condensed for loops, mid-statement pre-increments, it's like I'm learning a whole new programming language when looking at your code xD

Chrisir

Oh, please..!

That‘s over-optimized, over-condensed writing... it‘s really bad written code....

Gotoloop is a genius and I got full respect for him but it‘s his hobby to write unreadable code...