Fade out everything on screen to black

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;
    }
  }
}
Tagged:

Answers

  • edited January 2016

    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.

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

  • 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.

  • Answer ✓

    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;
    }
    
  • You'll need to set a proper fill color before drawing the ellipse 8)

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

  • edited January 2016

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

  • @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

  • 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...

Sign In or Register to comment.