This is a simple Swing application called Moving Eyes. The eyeballs in the GUI follow the mouse cursor as you move the cursor in the drawing area of the GUI.
I realize that it’s not doing what you want to do. I’m providing this code so you can see how to do a simple Swing animation. You may use this code as a basis to do your own animation.
Here’s the Swing GUI.
I used the model / view / controller model when creating this Swing GUI. This means that:
- The view may read values from the model.
- The view may not update the model.
- The controller will update the model.
- The controller will repaint / revalidate the view.
Basically, the model is ignorant of the view and controller. This allows you to change the view and controller from Swing to a web site, or an Android app.
The model / view / controller pattern allows you to focus on one part of the Swing GUI at a time. In general, you’ll create the model first, then the view, and finally the controllers. You will have to go back and add fields to the model.
And here’s the code:
package com.ggl.testing;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Point;
import java.awt.event.MouseEvent;
import java.awt.event.MouseMotionAdapter;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
public class MovingEyes implements Runnable {
private static final int drawingWidth = 400;
private static final int drawingHeight = 400;
private static final int eyeballHeight = 150;
private static final int eyeballWidthMargin = 125;
private DrawingPanel drawingPanel;
private Eye[] eyes;
private JFrame frame;
public static void main(String[] args) {
SwingUtilities.invokeLater(new MovingEyes());
}
public MovingEyes() {
this.eyes = new Eye[2];
this.eyes[0] = new Eye(new Point(eyeballWidthMargin, eyeballHeight));
this.eyes[1] = new Eye(new Point(drawingWidth - eyeballWidthMargin,
eyeballHeight));
}
@Override
public void run() {
frame = new JFrame("Moving Eyes");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
drawingPanel = new DrawingPanel(drawingWidth, drawingHeight);
frame.add(drawingPanel);
frame.pack();
frame.setLocationByPlatform(true);
frame.setVisible(true);
}
public class DrawingPanel extends JPanel {
private static final long serialVersionUID = -2977860217912678180L;
private static final int eyeballOuterRadius = 50;
private static final int eyeballInnerRadius = 20;
public DrawingPanel(int width, int height) {
this.addMouseMotionListener(new EyeballListener(this,
eyeballOuterRadius - eyeballInnerRadius - 5));
this.setBackground(Color.WHITE);
this.setPreferredSize(new Dimension(width, height));
}
@Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
g.setColor(Color.BLACK);
for (Eye eye : eyes) {
drawCircle(g, eye.getOrigin(), eyeballOuterRadius);
fillCircle(g, eye.getEyeballOrigin(), eyeballInnerRadius);
}
}
private void drawCircle(Graphics g, Point origin, int radius) {
g.drawOval(origin.x - radius, origin.y - radius, radius + radius,
radius + radius);
}
private void fillCircle(Graphics g, Point origin, int radius) {
g.fillOval(origin.x - radius, origin.y - radius, radius + radius,
radius + radius);
}
}
public class Eye {
private final Point origin;
private Point eyeballOrigin;
public Eye(Point origin) {
this.origin = origin;
this.eyeballOrigin = origin;
}
public Point getEyeballOrigin() {
return eyeballOrigin;
}
public void setEyeballOrigin(Point eyeballOrigin) {
this.eyeballOrigin = eyeballOrigin;
}
public Point getOrigin() {
return origin;
}
}
public class EyeballListener extends MouseMotionAdapter {
private final double eyeballDistance;
private final DrawingPanel drawingPanel;
public EyeballListener(DrawingPanel drawingPanel, double eyeballDistance) {
this.drawingPanel = drawingPanel;
this.eyeballDistance = eyeballDistance;
}
@Override
public void mouseMoved(MouseEvent event) {
Point p = event.getPoint();
for (Eye eye : eyes) {
Point origin = eye.getOrigin();
double theta = Math.atan2((double) (p.y - origin.y),
(double) (p.x - origin.x));
int x = (int) Math.round(Math.cos(theta) * eyeballDistance)
+ origin.x;
int y = (int) Math.round(Math.sin(theta) * eyeballDistance)
+ origin.y;
eye.setEyeballOrigin(new Point(x, y));
}
drawingPanel.repaint();
}
}
}
Model
The Eye class is a Java object that holds the origin of the eye (circle) and the origin of the eyeball. The Eye class is the model in this simple example.
View
The MovingEyes class is the class that defines the JFrame. The MovingEyes class is part of the view. The main method of this class invokes the SwingUtilities invokeLater method to ensure that the Swing components are defined and modified on the Event Dispatch thread.
We use a JFrame. We do not extend a JFrame. The only time you extend a Swing component, or any Java class, is when you want to override one of the class methods. We’ll see this when I talk about the DrawingPanel.
The constructor of the MovingEyes class defines 2 instances of the Eye class. The run method defines the JFrame. The code in the run method will be similar for all Swing GUIs.
The DrawingPanel class makes up the rest of the view. The DrawingPanel class extends JPanel because we want to override the paintComponent method. The constructor of the DrawingPanel class sets the preferred size of the drawing area, and adds the mouse motion listener. The mouse motion listener is the controller of this Swing GUI.
The paintComponent method of the DrawingPanel class first calls the super paintComponent method. This maintains the Swing paint chain, and should always be the first statement of the overwritten paintComponent method.
The rest of the code in the paintComponent method of the DrawingPanel class draws the eyes. We only have drawing (painting) code in the paintComponent method. Control code belongs in the controller.
Controller
The EyeballListener class is the controller class. You can have more than one controller class in a more complicated Swing GUI.
The EyeballListener class extends the MouseMotionAdapter. You can implement the MouseMotionListener. I’m overriding one method, so the code is shorter when I extend the MouseMotionAdapter.
The mouseMoved method of the EyeballListener class fires a MouseEvent when the mouse is moved. We calculate a new position for the center of an eyeball by finding the theta angle from the center of the eye to the mouse position. The theta angle is used to calculate the new center of the eyeball.
Each Eye instance is updated separately in the for loop. After both eyes are updated, the drawing panel is repainted. This happens so fast that there’s no need for an animation loop in a separate thread.
An animation loop updates the model, draws the view, and waits for a specified period of time. You would use a separate thread for the animation loop, so that the GUI on the Event Dispatch thread stays responsive. If your GUI is not responsive, you’re probably doing too much work on the Event Dispatch thread.