Java, how to draw constantly changing graphics

Question

Have not done this before, so obviously I suck at it. Here 64 pixels around current mouse position get drawn little bigger on a form. Problem is, that it's 'kind of' to slow, and I have no idea where to start fixing.

Besides that, I made a thread, that constantly calls update graphics when it's finished and a little fps like text, to show really how fast things are drawn.

Image example: (Image is from letter 'a' in Eclipse)

Code example :

@SuppressWarnings("serial")
public static class AwtZoom extends Frame {
    private BufferedImage image;
    private long timeRef = new Date().getTime();
    Robot robot = null;

    public AwtZoom() {
        super("Image zoom");
        setLocation(new Point(640, 0));
        setSize(400, 400);
        setVisible(true);
        final Ticker t = new Ticker();

        this.image = (BufferedImage) (this.createImage(320, 330));
        addWindowListener(new WindowAdapter() {
            public void windowClosing(WindowEvent we) {
                t.done();
                dispose();
            }
        });
        try {
            robot = new Robot();
        } catch (AWTException e) {
            e.printStackTrace();
        }
        t.start();
    }

    private class Ticker extends Thread {
        public boolean update = true;
        public void done() {
            update = false;
        }
        public void run() {
            try {

                while (update == true) {
                    update(getGraphics());
                    // try {
                    // Thread.sleep(200);
                    // } catch (InterruptedException e) {
                    // e.printStackTrace();
                    // return;
                    // }
                }
            } catch (Exception e) {

                update=false;
            }
        }
    }

    public void update(Graphics g) {
        paint(g);
    }

    boolean isdone = true;
    public void paint(Graphics g) {
        if (isdone) {
            isdone=false;
            int step = 40;
            Point p = MouseInfo.getPointerInfo().getLocation();

            Graphics2D gc = this.image.createGraphics();

            try {

                for (int x = 0; x < 8; x++) {
                    for (int y = 0; y < 8; y++) {
                        gc.setColor(robot.getPixelColor(p.x - 4 + x, p.y
                                - 4 + y));
                        gc.fillOval(x * step, y * step, step - 3, step - 3);
                        gc.setColor(Color.GRAY);
                        gc.drawOval(x * step, y * step, step - 3, step - 3);
                    }
                }

            } catch (Exception e) {
                e.printStackTrace();
            }
            gc.dispose();
            isdone = true;
            iter++;
        }
        g.drawImage(image, 40, 45, this);
        g.setColor(Color.black);
        StringBuilder sb = new StringBuilder();
        sb.append(iter)
                .append(" frames in ")
                .append((double) (new Date().getTime() - this.timeRef) / 1000)
                .append("s.");
        g.drawString(sb.toString(), 50, 375);
    }

    int iter = 0;
}

Changes made:
* added "gc.dispose();"
* added "isdone", so redraw could not be called faster, then it should.
* added this link to thrashgod source rewrite
* added this link to thrashgod source rewrite 2

Sloven

why don't you only repaint when a mouse move event occurs? – Phoenicia

Why are you invoking the garbage collector during paint? – Jamboree

Really want to paint what is near the mouse, and want it to work where-ever the mouse is (as fast as it could, even if on a video). The problem I assume you found was, that paint event could also be called not by thread t. I think, it was not a problem, but fixed it with adding "isdone" anyhow. – Sloven

Some general pointers (1) you should only be painting on the Event Dispatch Thread, but you seem to be painting in the Ticker Thread. (2) You shouldn't need the "done" variable because a single thread can't be running two bits of code at once. (3) Try and separate this into a Model (an 8*8 array of Colors) and the View (which you ask to repaint when the model is updated). (4) Consider using repaint(x, y, w, h), which specifies a clipping area and therefore repaints quicker. – Neap

I did some profiling - robot.getPixelColor(..) is dog slow on my Mac. That's a good place to start looking at improvements – Neap

Answer 1

Here's my major rewrite with the following noteworthy changes:

• I've separated the task of detecting pixel colours from the task of drawing
• I've replaced robot.getPixelColor(...) with robot.createScreenCapture(...) to fetch all 64 pixels at once, rather than one at a time
• I've introduced smart clipping - only what needs to be redrawn is redrawn.
• I've fixed up threading so all updates to the model and view happen on the Event Dispatch Thread

The ticker runs constantly. When it detects a change in pixel colour (either due to the mouse moving to a different region or the pixels under the mouse changing) it detects exactly what changed, updates the model, then requests the view to repaint. This approach updates instantly to the human eye. 289 screen updates took cumulatively 1 second.

It was an enjoyable challenge for a quiet Saturday evening.

import javax.swing.*;
import java.awt.*;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
import java.awt.geom.Ellipse2D;
import java.awt.image.BufferedImage;

public class ZoomPanel extends JPanel {

    private static final int STEP = 40;
    private int iter = 0;
    private long cumulativeTimeTaken = 0;


    public static void main(String[] args) {
        final JFrame frame = new JFrame("Image zoom");

        final ZoomPanel zoomPanel = new ZoomPanel();
        frame.getContentPane().add(zoomPanel);
        final Ticker t = new Ticker(zoomPanel);

        frame.addWindowListener(new WindowAdapter() {
            public void windowClosing(WindowEvent we) {
                t.done();
                frame.dispose();
            }
        });
        t.start();

        frame.setLocation(new Point(640, 0));
        frame.pack();
        frame.setVisible(true);
    }

    private final Color[][] model = new Color[8][8];

    public ZoomPanel() {
        setSize(new Dimension(400, 400));
        setMinimumSize(new Dimension(400, 400));
        setPreferredSize(new Dimension(400, 400));
        setOpaque(true);
    }

    private void setColorAt(int x, int y, Color pixelColor) {
        model[x][y] = pixelColor;
        repaint(40 + x * STEP, 45 + y * STEP, 40 + (x * STEP) - 3, 45 + (y * STEP) - 3);
    }

    private Color getColorAt(int x, int y) {
        return model[x][y];
    }

    public void paintComponent(Graphics g) {
        long start = System.currentTimeMillis();
        if (!SwingUtilities.isEventDispatchThread()) {
            throw new RuntimeException("Repaint attempt is not on event dispatch thread");
        }
        final Graphics2D g2 = (Graphics2D) g;
        g2.setColor(getBackground());
        try {

            for (int x = 0; x < 8; x++) {
                for (int y = 0; y < 8; y++) {
                    g2.setColor(model[x][y]);
                    Ellipse2D e = new Ellipse2D.Double(40 + x * STEP, 45 + y * STEP, STEP - 3, STEP - 3);
                    g2.fill(e);
                    g2.setColor(Color.GRAY);
                    g2.draw(e);
                }
            }

        } catch (Exception e) {
            e.printStackTrace();
        }
        iter++;
        g2.setColor(Color.black);
        long stop = System.currentTimeMillis();
        cumulativeTimeTaken += stop - start;
        StringBuilder sb = new StringBuilder();
        sb.append(iter)
                .append(" frames in ")
                .append((double) (cumulativeTimeTaken) / 1000)
                .append("s.");

        System.out.println(sb);
    }

    private static class Ticker extends Thread {

        private final Robot robot;

        public boolean update = true;
        private final ZoomPanel view;

        public Ticker(ZoomPanel zoomPanel) {
            view = zoomPanel;
            try {
                robot = new Robot();
            } catch (AWTException e) {
                throw new RuntimeException(e);
            }
        }

        public void done() {
            update = false;
        }

        public void run() {
            int runCount = 0;
            while (update) {
                runCount++;
                if (runCount % 100 == 0) {
                    System.out.println("Ran ticker " + runCount + " times");
                }
                final Point p = MouseInfo.getPointerInfo().getLocation();

                Rectangle rect = new Rectangle(p.x - 4, p.y - 4, 8, 8);
                final BufferedImage capture = robot.createScreenCapture(rect);

                for (int x = 0; x < 8; x++) {
                    for (int y = 0; y < 8; y++) {
                        final Color pixelColor = new Color(capture.getRGB(x, y));

                        if (!pixelColor.equals(view.getColorAt(x, y))) {
                            final int finalX = x;
                            final int finalY = y;
                            SwingUtilities.invokeLater(new Runnable() {
                                public void run() {
                                    view.setColorAt(finalX, finalY, pixelColor);
                                }
                            });
                        }
                    }
                }

            }
        }

    }

}

Neap

+1 I took the liberty of using createScreenCapture() to speed up my alternative code. – Olvan

Thank u brow!!! This is what I want!?! – Maeganmaelstrom

Answer 2

If you don't mind using Swing, this example shows how to quickly zoom in on a BufferedImage obtained from an Icon. In your case, you'd want an 8x8 BufferedImage that gets filled in mouseMoved() with the pixels seen by the robot.

Addendum: Here's a snapshot of the top, left corner of your example.

Addendum:

Zooming itself is not important...

The slow part is getting pixels from the desktop; scaling is minor. If you just want to see a variety of animation techniques, have a look at this example.

Addendum: As getting individual pixels is slow and the createScreenCapture() method suggested by @Steve McLeod is fast, here's the idea I was driving at. You can see it also updates much more smoothly. Note that releasing the mouse button allows one to see the captured colors.

import java.awt.AWTException;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Point;
import java.awt.Rectangle;
import java.awt.Robot;
import java.awt.event.MouseEvent;
import java.awt.event.MouseMotionListener;
import java.awt.image.BufferedImage;
import javax.swing.JFrame;
import javax.swing.JPanel;

/** @see https://stackoverflow.com/questions/3742731 */
public class Zoom extends JPanel implements MouseMotionListener {

    private static final int SIZE = 16;
    private static final int S2 = SIZE / 2;
    private static final int SCALE = 48;
    private BufferedImage img;
    private Robot robot;

    public Zoom() {
        super(true);
        this.setPreferredSize(new Dimension(SIZE * SCALE, SIZE * SCALE));
        img = new BufferedImage(SIZE, SIZE, BufferedImage.TYPE_INT_RGB);
        try {
            robot = new Robot();
        } catch (AWTException e) {
            e.printStackTrace(System.err);
        }
    }

    @Override
    protected void paintComponent(Graphics g) {
        g.drawImage(img, 0, 0, getWidth(), getHeight(), null);
    }

    @Override
    public void mouseMoved(MouseEvent e) {
        Point p = e.getPoint();
        int x = p.x * SIZE / getWidth();
        int y = p.y * SIZE / getHeight();
        int c = img.getRGB(x, y);
        this.setToolTipText(x + "," + y + ": "
            + String.format("%08X", c));
    }

    @Override
    public void mouseDragged(MouseEvent e) {
        int x = e.getXOnScreen();
        int y = e.getYOnScreen();
        Rectangle rect = new Rectangle(x - S2, y - S2, SIZE, SIZE);
        img = robot.createScreenCapture(rect);
        repaint();
    }

    private static void create() {
        JFrame f = new JFrame("Click & drag to zoom.");
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        Zoom zoom = new Zoom();
        f.add(zoom);
        f.pack();
        f.setVisible(true);
        zoom.addMouseMotionListener(zoom);
    }

    public static void main(String[] args) {
        EventQueue.invokeLater(new Runnable() {

            @Override
            public void run() {
                create();
            }
        });
    }
}

Olvan

I sure don't mind. It seems that this is an example of drawing a still image with pointer info where in the image the mouse is, when drawn inside a form. Tried using buffered image, like in that example, with no noticeable difference. Later found that I was using buffered image and could have skip'ed this rewrite. – Sloven

Are you trying to zoom in on a component or the desktop? – Olvan

Zoom'ing itself is not important, just needed fast input for changing graphics. – Sloven

Added link to your code rewrite, so you could see what I did, and what I meant by "with no noticeable difference". – Sloven

@Margus: I'm not following what you're trying to do. I've added a link to an animation example. – Olvan

If i could get my example to redraw in 25ms aka 40 fps, that would be way better then ok :P. But by just looking at his code, I did'nt understand why my example is that much slower or how to fix that. – Sloven

@Margus: I think you'll see this new version is faster. – Olvan

@Olvan part of post here can be identified as a better tutorial, no upvotes available here – Funchal

Answer 3

Add this method to the Paint method:

public void clear(Graphics g, Color currentColor) {
    g.setColor(backgroundColor);
    g.fillRect(0, 0, width, height);
    g.setColor(currentColor);
    int delay = 5; //milliseconds

    ActionListener taskPerformer = new ActionListener() {
    public void actionPerformed(ActionEvent evt) { } };

    new Timer(delay, taskPerformer).start();
} //run this right before you draw something

Okay so use timer to slow down delay, not a threading, that's bad.

Parenteral

paint() is called on the Event Dispatching thread .... adding Thread.sleep() to that is not good. – Outstretched

It is just to slow down drawing so there is no flicker. – Parenteral

Then consider a Swing timer: docs.oracle.com/javase/7/docs/api/javax/swing/Timer.html ... never sleep on the event dispatch thread ;-) (for almost every meaning of 'never') – Outstretched

There I added a timer instead of a new Thread. Now, why was that bad? It works when I use it. – Parenteral

See docs.oracle.com/javase/tutorial/uiswing/concurrency/… - any delays on the event-dispatch thread affect the responsiveness of the application, potentially causing events to backlog. – Outstretched

Thank you for telling me that. I won't use it anymore. – Parenteral

Answer 4

Simply use a time delay loop.You can then fine tune the delay by adjusting the limits of i.It also gives you the control to adjust transition speeds by some hit and trials.

for(long i=0;i<=100000000000;i++);

canvas.repaint();

It works very fine with me and also no need to use buffered images.

Swage