Why does Java swing timer lead to less animation stutter than sleep?

Question

I have two almost identical classes: AnimationFrame1 and AnimationFrame2. Both of these classes display a blue ball moving back and forth horizontally across a 500 x 500 window. The two classes are identical save for the runAnimation() and createAndShowGUI() methods. In its runAnimation() method, AnimationFrame1 uses a while loop and sleep method to create the animation loop whereas AnimationFrame2 uses a Swing Timer. In its createAndShowGUI() method, AnimationFrame1 creates a new thread and calls the runAnimation() method on it whereas AnimationFrame2 simply calls the runAnimation() method with no new thread.

After compiling both classes, I found that AnimationFrame2, the one that uses the Swing Timer, displays a much smoother animation that doesn't stutter as much as the animation displayed in AnimationFrame1, which uses the while loop and sleep method. My question is: why does AnimationFrame1 display more stutter in its animation than AnimationFrame2? I've searched around for a reason for this, but have so far found nothing.

Also, I'm obviously a Java novice, so please let me know if you see anything wrong with my code or if you know of any way I could improve it.

Here is AnimationFrame1:

import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
import java.awt.image.BufferedImage;

class AnimationFrame1 extends JPanel {

    int ovalX;
    int prevX;
    Timer timer;
    boolean moveRight;
    BufferedImage img;

    public AnimationFrame1() {
        setPreferredSize(new Dimension(500, 500));
    }

    public void runAnimation() {
        moveRight = true;
        img = null;
        ovalX = 0;
        prevX = 0;
        while(true) {
            if (moveRight == true) {
                prevX = ovalX;
                ovalX = ovalX + 4;
            }
            else {
                prevX = ovalX - 4;
                ovalX = ovalX - 4;
            }
            repaint();
            if (ovalX > 430) {
                moveRight = false;
            }
            if (ovalX == 0) {
                moveRight = true;
            }
            try {
                Thread.sleep(25);
            }
            catch(Exception e) {
            }
        }
    }

    public void paintComponent(Graphics g) {
        if (img == null) {
            GraphicsEnvironment ge = GraphicsEnvironment.getLocalGraphicsEnvironment();
            GraphicsDevice gs = ge.getDefaultScreenDevice();
            GraphicsConfiguration gc = getGraphicsConfiguration();
            img = gc.createCompatibleImage(78, 70);
            Graphics gImg = img.getGraphics();
            gImg.setColor(getBackground());
            gImg.fillRect(0, 0, getWidth(), getHeight());
            gImg.setColor(Color.BLUE);
            gImg.fillOval(4, 0, 70, 70);
            gImg.dispose();
        }
        g.drawImage(img, ovalX, 250, null);
    }

    public static void createAndShowGUI() {
        JFrame mainFrame = new JFrame();
        final AnimationFrame1 animFrame = new AnimationFrame1();
        mainFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        mainFrame.add(animFrame);
        mainFrame.pack();
        mainFrame.createBufferStrategy(2);
        mainFrame.setVisible(true);
        new Thread(new Runnable() {
            public void run() {
                animFrame.runAnimation();
            }
        }).start();
    }    

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                createAndShowGUI();
            }
        });
    }

}

And here is AnimationFrame2:

import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
import java.awt.image.BufferedImage;

class AnimationFrame2 extends JPanel {

    int ovalX;
    int prevX;
    Timer timer;
    boolean moveRight;
    BufferedImage img;

    public AnimationFrame2() {
        setPreferredSize(new Dimension(500, 500));
    }

    public void runAnimation() {
        moveRight = true;
        img = null;
        ovalX = 0;
        prevX = 0;
        timer = new Timer(25, new ActionListener() {
            public void actionPerformed(ActionEvent ae) {
                if (moveRight == true) {
                    prevX = ovalX;
                    ovalX = ovalX + 4;
                }
                else {
                    prevX = ovalX - 4;
                    ovalX = ovalX - 4;
                }
                repaint();
                if (ovalX > 430) {
                    moveRight = false;
                }
                if (ovalX == 0) {
                    moveRight = true;
                }
            }
        });
        timer.start();
    }

    public void paintComponent(Graphics g) {
        if (img == null) {
            GraphicsEnvironment ge = GraphicsEnvironment.getLocalGraphicsEnvironment();
            GraphicsDevice gs = ge.getDefaultScreenDevice();
            GraphicsConfiguration gc = getGraphicsConfiguration();
            img = gc.createCompatibleImage(78, 70);
            Graphics gImg = img.getGraphics();
            gImg.setColor(getBackground());
            gImg.fillRect(0, 0, getWidth(), getHeight());
            gImg.setColor(Color.BLUE);
            gImg.fillOval(4, 0, 70, 70);
            gImg.dispose();
        }
        g.drawImage(img, ovalX, 250, null);
    }

    public static void createAndShowGUI() {
        JFrame mainFrame = new JFrame();
        final AnimationFrame2 animFrame = new AnimationFrame2();
        mainFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        mainFrame.add(animFrame);
        mainFrame.pack();
        mainFrame.createBufferStrategy(2);
        mainFrame.setVisible(true);
        animFrame.runAnimation();
    }    

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                createAndShowGUI();
            }
        });
    }

}

assylias · Accepted Answer · 2013-01-17T01:12:31.080

8

After putting markers in the code, it appears that the Timer version actually runs every 30 ms whereas the Thread.sleep version runs every 25 ms. There could be several explanations, including:

the resolution of Timers, which is not as good as that of Thread.sleep
the fact that Timers are single threaded (apart from the wait, everything is run in the EDT) so if a task (like repainting) takes more than 25ms, it will delay the next task

If I increase the sleep to 30ms the 2 animations are similar (the actual number may vary depending on your machine).

Note: there is a potential thread safety issue in the Thread.sleep version. You share variables between the worker thread and the UI thread without proper synchronization. Although it seems that repaint internally introduces a synchronization barrier which ensures the visibility of the changes made by the worker thread from the UI thread, it is an incidental effect and it would be a better practice to explicitly ensure visibility, for example by declaring the variables volatile.

edited Jan 17 '13 at 01:12

answered Jan 16 '13 at 23:44

assylias

321,522
82
660
783

How is he sleeping in the UI thread? The `Thread.sleep()` method is called from the `runAnimation()` method, which is called from within a `Runnable` passed to a new `Thread`... – BenCole Jan 16 '13 at 23:56
@assylias Thanks for your help, but nothing seems to change when using volatile. Are you getting an animation that's smoother when you use it? – CogStudent Jan 17 '13 at 00:27
1

@CogStudent Good point - I put timers in the code and the Timer version runs every 31/32 ms on my maching when the Thread.sleep version runs every 25 seconds. It seems that the actual issue is that 25ms is not enough to repaint the component and some positions are skipped. If I use 30ms in the Thread.sleep version instead it works better. It seems that the `repaint` call actually introduces a synchronization and most of what I said in my answer is wrong :-( – assylias Jan 17 '13 at 00:41
@assylias That seems to make sense. I just remembered from reading the book Filty Rich Clients that the authors found (at least on their computers) that Thread.sleep() has a resolution of about 1 to 2 ms whereas the Swing Timer has a resolution of about 15 ms. I tried using 30ms for AnimationFrame1 and, as a result, found it to run much smoother as well. – CogStudent Jan 17 '13 at 00:59
@CogStudent That plus the fact that Timer is essentially single threaded (everything runs in the EDT, apart from the wait) - so if a task takes more than 25ms, it is going to delay the next task. – assylias Jan 17 '13 at 01:01
@assylias I'll go ahead and accept your answer if you make it reflect what we discussed here. – CogStudent Jan 17 '13 at 01:03
@CogStudent I think the answer now better reflects what actually happens. Sorry for the various false alarms... – assylias Jan 17 '13 at 01:13

jtahlborn · Answer 2 · 2013-01-17T13:11:20.473

2

The reason for the problem is most likely due to the "violation" of AWT semantics in the first version. you cannot run gui update code outside of the EDT.

UPDATE: even if the repaint() method is safe to call from another thread, all it is doing is queueing an event which will run on the EDT. this means there is a race condition between the thread modifying the ovalx and thread EDT thread which is reading it. this will cause the movement to be uneven as the drawing code may see different values than the signalling code intends.

edited Jan 17 '13 at 13:11

answered Jan 17 '13 at 01:24

jtahlborn

52,909
5
76
118

1

only the repaint method is called - which is one the few that is safe to call from a non UI thread: http://stackoverflow.com/questions/9786497/safe-to-use-component-repaint-outside-edt – assylias Jan 17 '13 at 09:39

Why does Java swing timer lead to less animation stutter than sleep?

2 Answers2