Java: Safe Animations with Swing - java

I am creating a program that uses JFrame, JPanel, JLabel and all other sorts of swing components.
What I want to do is create a 2D animation on a separate JPanel that is dedicated to this animation. So I will be overriding the paintComponent (Graphics g) method.
I have experience making animations with for loops + Threads, but I am hearing that threads are not safe with swing.
Due to this, is it safe for me to make an animation with the use of the Runnable interface? If not what shall I use (e.g. Timer) and please give a small example on how to best use it (or a link to a web page).
EDIT:
Thanks to Jeff, I will be using Timer to create the animation. For future viewers of this question, here is a quick program I coded in about 5 minutes, excuse the dirty code.
I have also added some quick comments.
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
class JFrameAnimation extends JFrame implements ActionListener
{
JPanel panel;
Timer timer;
int x, y;
public JFrameAnimation ()
{
super ();
setDefaultCloseOperation (EXIT_ON_CLOSE);
timer = new Timer (15, this); //# First param is the delay (in milliseconds) therefore this animation is updated every 15 ms. The shorter the delay, the faster the animation.
//This class iplements ActionListener, and that is where the animation variables are updated. Timer passes an ActionEvent after each 15 ms.
}
public void run ()
{
panel = new JPanel ()
{
public void paintComponent (Graphics g) //The JPanel paint method we are overriding.
{
g.setColor (Color.white);
g.fillRect (0, 0, 500, 500); //Setting panel background (white in this case);
//g.fillRect (-1 + x, -1 + y, 50, 50); //This is to erase the black remains of the animation. (not used because the background is always redrawn.
g.setColor (Color.black);
g.fillRect (0 + x, 0 + y, 50, 50); //This is the animation.
}
}
;
panel.setPreferredSize (new Dimension (500, 500)); //Setting the panel size
getContentPane ().add (panel); //Adding panel to frame.
pack ();
setVisible (true);
timer.start (); //This starts the animation.
}
public void actionPerformed (ActionEvent e)
{
x++;
y++;
if (x == 250)
timer.stop (); //This stops the animation once it reaches a certain distance.
panel.repaint (); //This is what paints the animation again (IMPORTANT: won't work without this).
panel.revalidate (); //This isn't necessary, I like having it just in case.
}
public static void main (String[] args)
{
new JFrameAnimation ().run (); //Start our new application.
}
}

Jimmy, I think you are misunderstanding how threads work in Swing. You must use a specific thread called the Event Dispatch Thread to do any updating on swing components (with a few specific exceptions I won't discuss here). You can use a swing timer to set a recurring task to run on the event dispatch thread. See this example of how to use Swing timers. http://download.oracle.com/javase/tutorial/uiswing/misc/timer.html
You should also read up on the Event Dispatch Thread so you understand its place in Swing http://download.oracle.com/javase/tutorial/uiswing/concurrency/dispatch.html
Java also provides a variety of methods for working with Swing in the SwingUtilities class, notably invokeLater and invokeAndWait which will run code on the event dispatch thread.

While is good to understand the EDT and SwingUtilities (everybody doing Swing should do so) if you're going to be doing a lot of animation I would recommend to use the TimingFramework. This will allow you to concentrate a little more on design and will give you a better control on "rate". Inherently the timing framework uses a Swing timer so the callbacks are on the EDT. Part of the Filthy-rich clients collection, the author made the chapter available.
Have fun!

Related

race condition when calling super.paint jframe

I'm trying to fill the entire canvas with fillRect. Whenever I include super.paint() in the beginning of the overridden paint method, super.paint() sometimes gets called after the fillRect, causing unpredictable behavior on whether super.paint() gets drawn first or drawRect.
import java.awt.Color;
import java.awt.Graphics;
import javax.swing.JFrame;
public class DebugJFrameRace extends JFrame {
public DebugJFrameRace () {
super("Debug race");
this.setVisible(true);
this.setSize(600, 600);
this.repaint();
}
public void paint(Graphics g) {
super.paint(g);
// clear background
g.setColor(Color.black);
g.fillRect(0, 0, 600, 600);
System.out.println("Finished");
}
public static void main(String[] args) {
DebugJFrameRace app = new DebugJFrameRace ();
app.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}
I don't have problems with the posted code.
I'm not really sure what it is designed to demonstrate. A black background is always painted.
However, the posted code does not follow Swing guidelines:
All Swing components should be created and updated on the Event Dispach Thread (EDT). This is done by using SwingUtilities.invokeLater(...). Read the section from the Swing tutorial on Concurrency for more information and examples on how to better structure your code. Not executing the code on the EDT can cause random problems.
You should not override paint() in a JFrame. Custom painting is done by overriding paintComponent(...) on a JPanel and then you add the panel to the frame. Read the section from the Swing tutorial on Custom Painting for more information and working examples.

Java repaint() method doesn't work when I try to delete shapes from panel

I would like to draw some circles every second and delete them all (or at least one) from the panel.
Here is the exisiting code:
public class DrawShape {
ShapePanel panel;
public DrawShape(ShapePanel panel) {
this.panel = panel;
Timer t = new Timer();
t.schedule(new TimerTask() {
long startTime = System.currentTimeMillis();
int secondsToRun = 3;
#Override
public void run() {
if (System.currentTimeMillis() - startTime > secondsToRun * 1000) {
panel.deleteCircle();
System.out.println("\t" + panel.circles.size());
cancel();
} else {
panel.addCircle(new Circle((int) (Math.random() * 200), (int) (Math.random() * 200)));
System.out.println(panel.circles.size());
}
}
}, 0, 1000);
}
}
If the time is greater than 3 seconds, delete all circles, else continue to draw circles on screen.
Here is the ShapePanel class:
public class ShapePanel extends JPanel {
public List<Circle> circles = new LinkedList<Circle>();
public ShapePanel() {
// Setting up the frame
JFrame frame = new JFrame();
frame.setSize(500, 500);
frame.setVisible(true);
frame.setBackground(Color.black);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(this); // adding the panel to the frame
}
public void addCircle(Circle circle) {
circles.add(circle);
this.repaint();
}
public void deleteCircle() {
// circles.remove(circles.get(0));
circles.clear(); //remove them all
this.repaint();
}
#Override
public void paint(Graphics g) {
for (Circle c : circles) {
g.setColor(Color.GREEN);
g.drawOval(c.x, c.y, Circle.radius * 2, Circle.radius * 2);
}
}
}
When I call deleteCircle(), the circles should be removed from the list and repaint. I should end up with a blank screen with no circles in it. I think repaint doesn't work in this case.
P.S.: first time asking a question, so sorry if it's long one :D
So, two things jump out at me immediately.
Using java.util.Timer
Swing is NOT thread safe and since java.util.Timer runs in it's own thread, updating the UI (or in this case, something the UI relies on) could cause you random issues.
I'd consider using a javax.swing.Timer instead, as it is triggered inside the Event Dispatching Queue (and is generally simpler to use)
Not calling super.paint
You've failed to take into consideration what paint does and failed to take over it's responsibilities, which, in this case, would be to "prepare" the Graphics context for painting.
Graphics is a shared resource, which is passed to all the components been updated in the paint pass. This means it will contain what ever was previously painted to it.
Two recommendations:
As a general recommendation, prefer overriding paintComponent instead of paint (paint does a lot of important jobs, so unless you're willing to do them, it's generally to high up in the paint chain)
Call super.paintComponent first, before doing any custom painting.
I would, highly, recommend reading:
Performing Custom Painting
Painting in AWT and Swing
and
Concurrency in Swing
How to Use Swing Timers

Is there a limit to the actions a JButton can complete through the method actionPerformed? [duplicate]

I am new to Java swing programming. I want to make a frame which will appear red and blue in turn one after another. So, I took 2 child JPanel, 1 for red and other for blue, and a for-loop. On each iteration I remove one panel from parent panel and add another. But, when I run the program it only shows the last state of the frame.
Can anyone explain why? And what's the intended approach to make a program work like that?
My code:
public class Test2 extends JFrame {
public Test2() {
JPanel Red = new JPanel(new BorderLayout());
JPanel Blue = new JPanel(new BorderLayout());
//...initialize Red and Blue
Red.setBackground(Color.red);
Blue.setBackground(Color.blue);
Red.setPreferredSize(new Dimension(200,200));
Blue.setPreferredSize(new Dimension(200,200));
JPanel panel = new JPanel(new BorderLayout());
panel.setPreferredSize(new Dimension(200,200));
add(panel);
pack();
setTitle("Border Example");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLocationRelativeTo(null);
int M = 1000000; //note that, I made a long iteration to not finish the program fast and visualize the effect
for(int i=0;i<M;i++)
{
if(i%(M/10)==0) System.out.println(i); //to detect whether the program is running
if(i%2==0)
{
panel.removeAll();
panel.repaint();
panel.revalidate();
panel.add(Red,BorderLayout.CENTER);
}
else
{
panel.removeAll();
panel.repaint();
panel.revalidate();
panel.add(Blue,BorderLayout.CENTER);
}
}
}
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
public void run() {
Test2 ex = new Test2();
ex.setVisible(true);
}
});
}}
Don't use a loop. Swing will only repaint the frame once the entire loop has finished executing.
Instead you need to use a Swing Timer. When the Timer fires you invoke your logic. Read the section from the Swing tutorial on How to Use Swing Timers.
Here is a simple example of a Timer that simply displays the time every second: Update a Label with a Swing Timer
Also, don't remove/add panels. Instead you can use a Card Layout and sway the visible panel. Again read the tutorial on How to Use CardLayout.
Basically you don't need to use a while (or any other) loop, Swing only paints once it has finished that loop then repaint the GUI.
As stated before by #camickr on his answer, you could try a Swing Timer; here's an example that does exactly what you want.
From your comment on another answer:
Could you please explain why "repaint" does not work in a loop? And why is the Timer working without a "repaint"?
Swing is smart enough to know it doesn't needs to repaint in a loop, instead it will repaint once it the loop finishes, if you read the tutorial on Swing Custom Paint on the step 3 it says:
"Swing is smart enough to take that information and repaint those sections of the screen all in one single paint operation. In other words, Swing will not repaint the component twice in a row, even if that is what the code appears to be doing."
And Timer will repaint it, because it's not running on the EDT but in it's own Thread
I would suggest to take in one step at a time.
First make it run without changing panels / colors.
Now it doesn't because this
public final void Test2() {
is a method (which is never used) and not a constructor.
Change to a constructor declaration like :
public Test2() {
to make the program do something. Then you can go to the next step.
Also use Java naming conventions (like blue instead of Blue).

Simple animations in Java

I'm attempting to code a simple animation or physics example in a Java Swing application. I have the actual windows application open and working, but I can't figure out how to actually draw my shapes, and how I'd format the code for calculations between frames, that sort of stuff.
I've read some stuff about over riding a paint method, but I don't know what that means, and I don't believe I'm using it in the code I'm using right now. This is my code:
public class Physics extends JFrame{
public Physics() {
initUI();
}
private void initUI() {
JPanel panel = new JPanel();
getContentPane().add(panel);
panel.setLayout(null);
final JLabel label = new JLabel("Hi, press the button to do something");
label.setBounds(20, 0, 2000, 60);
final JButton submitButton = new JButton("Start");
submitButton.setBounds(20, 150, 80, 20);
submitButton.addActionListener(new ActionListener() {
#Override
public void actionPerformed(ActionEvent e) {
//Put button code here later
}
});
panel.add(label);
panel.add(submitButton);
setTitle("Program");
setSize(300, 250);
setLocationRelativeTo(null);
setDefaultCloseOperation(EXIT_ON_CLOSE);
}
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
#Override
public void run() {
Physics ex = new Physics();
ex.setVisible(true);
}
});
}
}
So I have some blank space above my button where I'd like to draw maybe a square or circle moving across the screen to start off with, once I get that down I can start getting into the more advanced stuff. Any hints on how to do that would be appriciated :D
Thanks!
"I've read some stuff about over riding a paint method, but I don't know what that means"
So you've overridden actionPerformed, so you know what an #Override is. As you'll notice from the ActionListener, you never actually explicitly call actionPerformed, but whatever you put in the there, still get's used. That's because the ActionListener implicitly call it for you.
The same is true with painting. In the Swing painting process, there is a paint chain that Swing uses to paint components. Along the way paint is called somewhere. So just like actionPerformed, you can override paint and it will get implicitly called for you.
#Override
public void paint(Graphics g) {
super.paint(g);
}
The Graphics object passed to the method is the graphics context that Swing will use for the painting. You can look at the Graphics API to see the methods you can use. You can use drawOval to draw a circle
#Override
public void paint(Graphics g) {
super.paint(g);
g.drawOval(x, y, width, height);
}
Now here's the thing. You don't actually want to override paint. In the tutorials linked above, some of the examples will use applets and override paint, but you shouldn'y paint on top level containers like JFrame or JApplet. Instead paint on a JPanel or JComponent and just add it the JFrame. When you do paint on JPanel or JComponent, you'll instead override paintComponent (which also gets called along the paint chain), instead of paint
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
g.drawOval(x, y, width, height);
}
You see how I used variables for the drawOval method. The x is the x location from the top-let of the screen, and y and the y point. width and height are width and height of the circle. The great thing about using variables is that their values can be changed at runtime.
That's where the animation comes to play. As pointed out, you an use a javax.swing.Timer
The basic construct is
public Timer(int delay, ActionListener listener) {
}
The delay is the milliseconds to delay each call to the listener. The listener will have your actionPerformed call back that will do what's inside, every delay milliseconds. So what you can do, is just change the x from the drawOval and repaint(), and it will animate. Something like
Timer timer = new Timer(40, new ActionListener(){
#Override
public void actionPerformed(ActionEvent e) {
x += 5;
repaint();
}
});
timer.start();
The timer code you can just put in the constructor. That's probably simplest explanation I can give. Hope it helps.
Don't forget the to see Custom Painting and Grapics2D for more advance topics on graphics. Also see some example of timers and animation here and here and here and here and here
Also avoid using null layouts. See Laying out Components Within a Container to learn how to use layout managers, as should be done with Swing apps.
Take a look at the Swing tutorial on Custom Painting.
The example shows you how to do painting. If you want animation, then you would use a Swing Timer to schedule the animation. The tutorial also has a section on How to use a Swing Timer.
Put the two tutorial together and you have a solution.
There are any number of ways to achieve this.
Start by taking a look at:
Performing Custom Painting
2D Graphics
For details about how painting in Swing is done.
Animation is not as simple as just pausing a small period of time and then repainting, theres acceleration and deceleration and other concepts that need to be considered.
While you could write your own, that's not a small task, a better solution might be to use a pre-existing engine, for example...
Then take a look at:
Timing Framework
Trident
java-universal-tween-engine
Which are all examples of animation engines in Swing. While I prefer the Timing Framework as it provides me with a lower level API, this is a personal opinion. Both Trident and the JUWE seem to be geared more towards component/property based animation (which the Timing Framework can do if you want to build some of the feature sets up)
I created a simple animation with two rockets blasting off. The full eclipse project is here: https://github.com/CoachEd/JavaExamples/tree/master/RaceToSpace. Here's a screenshot:

JMenuBar dropping down to a "custom" JPanel and "erased"

The JMenuItems of JMenuBar drops down to a JPanel added to the JFrame, but the JPanel erases the JMenuItems.
Do I supposed to pause the re-drawing of the JPanel?
I'm using getGraphics() on the JPanel for drawing an image, this method is called from a thread with (for example) 200 ms delay.
edit:
It's a (very simple) game inside the JPanel.
(I've added a field paused to the JPanel and i've edited the paint method so it repaints the JPanel only if paused is false, however I don't know if this "solution" is good. (It's set to true when the user clicks on the menu and set to false when selects or cancels it.)
You should always be repainting the JPanel from the Event Dispatch Thread, not an arbitrary thread. If you want to do this in order to animate the panel (e.g. with the 200ms delay you mention) then consider using javax.swing.Timer, which periodically fires an ActionEvent on the Event Dispatch Thread.
Example
public class MyPanel extends JPanel {
public void paintComponent(Graphics g) {
super.paintComponent(g);
// Add additional graphics operations here.
}
}
final JPanel panel = new MyPanel();
int delay = 200; // Milliseconds
ActionListener taskPerformer = new ActionListener() {
public void actionPerformed(ActionEvent evt) {
panel.repaint();
}
};
new Timer(delay, taskPerformer).start();
I'm using getGraphics() on the JPanel
for drawing an image
Never use the getGraphics() method like that. You have no control over when the component should be repainted. Custom painting should be done by overriding the paintComponent() method of the panel. When you use the Timer you just use panel.repaint() and the Swing repaint manager should look after the details of what needs to be painted.
Have a look at javax.swing.Timer documentation
https://docs.oracle.com/javase/1.5.0/docs/api/javax/swing/Timer.html
It has code right at the top to fire an event on fixed interval.

Categories