3

I have an applet which displays some data using circles and lines. As the data continually changes, the display is updated, which means that sometimes the circles and lines must be erased, so I just draw them in white (my background color) to erase them. (There are a lot of them, so erasing everything and then recomputing and redrawing everything except the erased item would be a horribly slow way to erase a single item.)

The logic of the situation is that there are two layers that need to be displayed, and I need to be able to erase an object in one layer without affecting the other layer. I suppose the upper layer would need to have a background color of "transparent", but then how would I erase an object, since drawing in a transparent color has no effect.

What distinguishes this situation from all the transparency-related help on the web is that I want to be able to erase lines and circles one-by-one from the transparent layer, overwriting their pixels with the "fully transparent" color.

Currently my applet draws (using just a single layer) by doing this in start():

    screenBuffer = createImage(640, 480);
    screenBufferGraphics = screenBuffer.getGraphics();

and this in paint():

    g.drawImage(screenBuffer, 0, 0, this);

and objects are rendered (or "erased" by drawing in white) by commands like:

    screenBufferGraphics.drawLine(x1,y1,x2,y2);

Is it easy to somehow make a second screen buffer with a transparent background and then be able to draw and erase objects in that buffer and render it over the first buffer?

Matt
  • 756
  • 1
  • 9
  • 24
  • *"There are a lot of them"* How many is 'a lot'? Can you narrow it down to an order of magnitude? – Andrew Thompson Sep 12 '11 at 14:36
  • @Andrew: Currently a few thousand, and probably always less than a hundred thousand. Each one is just a few pixels wide. They result from analysis of the data, which continuously undergoes small incremental changes, so most of the display is unchanging at any given time while a small part is changing quickly, getting recomputed and rerendered. (The window is actually much bigger than (640,480).) – Matt Sep 12 '11 at 17:38

2 Answers2

2

This seems fairly quick, so long as the rendered image area remains around 640x480, the code can achieve from 125-165 FPS. The code tracks 2000 semi-transparent lines of width 4px, and moves them around in an area 8 times the size of the rendered image.

Bouncing Lines

import java.awt.image.BufferedImage;
import java.awt.event.*;
import java.awt.geom.*;
import java.awt.*;
import javax.swing.*;
import java.util.Random;

class LineAnimator {

    public static void main(String[] args) {
        final int w = 640;
        final int h = 480;
        final RenderingHints hints = new RenderingHints(
            RenderingHints.KEY_ANTIALIASING,
            RenderingHints.VALUE_ANTIALIAS_ON
            );
        hints.put(
            RenderingHints.KEY_ALPHA_INTERPOLATION,
            RenderingHints.VALUE_ALPHA_INTERPOLATION_QUALITY
            );
        final BufferedImage bi = new BufferedImage(w,h, BufferedImage.TYPE_INT_RGB);
        final JLabel l = new JLabel(new ImageIcon(bi));
        final BouncingLine[] lines = new BouncingLine[20000];
        for (int ii=0; ii<lines.length; ii++) {
            lines[ii] = new BouncingLine(w*8,h*8);
        }
        final Font font = new Font("Arial", Font.BOLD, 30);
        ActionListener al = new ActionListener() {

            int count = 0;
            long lastTime;
            String fps = "";

            public void actionPerformed(ActionEvent ae) {
                count++;
                Graphics2D g = bi.createGraphics();
                g.setRenderingHints(hints);

                g.clearRect(0,0,w,h);
                for (int ii=0; ii<lines.length; ii++) {
                    lines[ii].move();
                    lines[ii].paint(g);
                }

                if ( System.currentTimeMillis()-lastTime>1000 ) {
                    lastTime = System.currentTimeMillis();
                    fps = count + " FPS";
                    count = 0;
                }
                g.setColor(Color.YELLOW);
                g.setFont(font);
                g.drawString(fps,10,30);

                l.repaint();
                g.dispose();
            }
        };
        Timer timer = new Timer(1,al);
        timer.start();

        JOptionPane.showMessageDialog(null, l);
        System.exit(0);
    }
}

class BouncingLine {
    private final Color color;
    private static final BasicStroke stroke = new BasicStroke(4);
    private static final Random random = new Random();
    Line2D line;
    int w;
    int h;
    int x1;
    int y1;
    int x2;
    int y2;

    BouncingLine(int w, int h) {
        line = new Line2D.Double(random.nextInt(w),random.nextInt(h),random.nextInt(w),random.nextInt(h));
        this.w = w;
        this.h = h;
        this.color = new Color(
            128+random.nextInt(127),
            128+random.nextInt(127),
            128+random.nextInt(127),
            85
            );
        x1 = (random.nextBoolean() ? 1 : -1);
        y1 = (random.nextBoolean() ? 1 : -1);
        x2 = -x1;
        y2 = -y1;
    }

    public void move() {
        int tx1 = 0;
        if (line.getX1()+x1>0 && line.getX1()+x1<w) {
            tx1 = (int)line.getX1()+x1;
        } else {
            x1 = -x1;
            tx1 = (int)line.getX1()+x1;
        }
        int ty1 = 0;
        if (line.getY1()+y1>0 && line.getY1()+y1<h) {
            ty1 = (int)line.getY1()+y1;
        } else {
            y1 = -y1;
            ty1 = (int)line.getY1()+y1;
        }
        int tx2 = 0;
        if (line.getX2()+x2>0 && line.getX2()+x2<w) {
            tx2 = (int)line.getX2()+x2;
        } else {
            x2 = -x2;
            tx2 = (int)line.getX2()+x2;
        }
        int ty2 = 0;
        if (line.getY2()+y2>0 && line.getY2()+y2<h) {
            ty2 = (int)line.getY2()+y2;
        } else {
            y2 = -y2;
            ty2 = (int)line.getY2()+y2;
        }
        line.setLine(tx1,ty1,tx2,ty2);
    }

    public void paint(Graphics g) {
        Graphics2D g2 = (Graphics2D)g;
        g2.setColor(color);
        g2.setStroke(stroke);
        //line.set
        g2.draw(line);
    }
}

Update 1

When I posted that code, I thought you said 100s to 1000s, rather than 1000s to 100,000s! At 20,000 lines the rate drops to around 16-18 FPS.

Update 2

..is this optimized approach, using layers, possible in Java?

Sure. I use that technique in DukeBox - which shows a funky plot of the sound it is playing. It keeps a number of buffered images.

  1. Background. A solid color in a non-transparent image.
  2. Old Traces. The older sound traces as stretched or faded from the original positions. Has transparency, to allow the BG to show.
  3. Latest Trace. Drawn on top of the other two. Has transparency.
Andrew Thompson
  • 168,117
  • 40
  • 217
  • 433
  • Nice code! But it uses the OpenGL/game approach of redrawing absolutely everything on every frame. (Your example requires this anyway because your lines are large and all moving all the time.) The point of my question is that sometimes it is possible to hugely optimize this, in situations where drawing and erasing locally is an option. There are cases where drawing and erasing locally only works if you can do it in separate layers (so that erasing in one layer doesn't disturb the other layers). My question was basically, is this optimized approach, using layers, possible in Java? – Matt Sep 13 '11 at 21:16
  • *"The point of my question is that sometimes it is possible to hugely optimize.."* The point of my answer is that sometimes it is not necessary. You know 'premature optimization' and all that? ;) As to the rest of your comment, see **Update 2**. – Andrew Thompson Sep 14 '11 at 03:36
  • @Andrew Thompson please why there paint, instead of paintComponent, hmmm and in most of your answers, are you know something ... – mKorbel Nov 03 '11 at 20:13
  • If you mean the `BouncingLine`A) it is not a component (so I might have called it `paintLine`) B) it is also 'not Swing'. – Andrew Thompson Nov 06 '11 at 02:24
0

After a day of no proposed solutions, I started to think that Java Graphics cannot erase individual items back to a transparent color. But it turns out that the improved Graphics2D, together with BufferedImage and AlphaComposite, provide pretty much exactly the functionality I was looking for, allowing me to both draw shapes and erase shapes (back to full transparency) in various layers.

Now I do the following in start():

    screenBuffer = new BufferedImage(640, 480, BufferedImage.TYPE_INT_ARGB);
    screenBufferGraphics = screenBuffer.createGraphics();

    overlayBuffer = new BufferedImage(640, 480, BufferedImage.TYPE_INT_ARGB);
    overlayBufferGraphics = overlayBuffer.createGraphics();

I have to use new BufferedImage() instead of createImage() because I need to ask for alpha. (Even for screenBuffer, although it is the background -- go figure!) I use createGraphics() instead of getGraphics() just because my variable screenBufferGraphics is now a Graphics2D object instead of just a Graphics object. (Although casting back and forth works fine too.)

The code in paint() is barely different:

        g.drawImage(screenBuffer, 0, 0, null);
        g.drawImage(overlayBuffer, 0, 0, null);

And objects are rendered (or erased) like this:

// render to background
    screenBufferGraphics.setColor(Color.red);
    screenBufferGraphics.fillOval(80,80, 40,40);
// render to overlay
    overlayBufferGraphics.setComposite(AlphaComposite.SrcOver);
    overlayBufferGraphics.setColor(Color.green);
    overlayBufferGraphics.fillOval(90,70, 20,60);
// render invisibility onto overlay
    overlayBufferGraphics.setComposite(AlphaComposite.DstOut);
    overlayBufferGraphics.setColor(Color.blue);
    overlayBufferGraphics.fillOval(70,90, 30,20);
// and flush just this locally changed region
    repaint(60,60, 80,80);

The final Color.blue yields transparency, not blueness -- it can be any color that has no transparency.

As a final note, if you are rendering in a different thread from the AWT-EventQueue thread (which you probably are if you spend a lot of time rendering but also need to have a responsive interface), then you will want to synchronize the above code in paint() with your rendering routine; otherwise the display can wind up in a half-drawn state.

If you are rendering in more than one thread, you will need to synchronize the rendering routine anyway so that the Graphics2D state changes do not interfere with each other. (Or maybe each thread could have its own Graphics2D object drawing onto the same BufferedImage -- I didn't try that.)

It looks so simple, it's hard to believe how long it took to figure out how to do this!

Matt
  • 756
  • 1
  • 9
  • 24