Moving Eyes by Gilbert Le Blanc

This is a short example of a Java Swing GUI with drawing and simple animation. The eyeballs in the GUI follow the mouse cursor as you move the cursor in the drawing area of the GUI.

Introduction

I used Windows 10 and Java 7 to create this GUI. My screen capture software doesn’t recognize the narrow borders of a Windows 10 window.

I wrote 4 Java classes for this simple example. I put the 4 Java classes together to paste as a single example. You should put these classes in separate files when you create your Swing GUI.

I used the model / view / controller model when creating this Swing GUI. This means that:

  1. The view may read values from the model.
  2. The view may not update the model.
  3. The controller will update the model.
  4. 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. I guarantee that you’ll come up with something you didn’t think of when you created the first cut of the model classes.

Here’s the code:

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;

//http://java-articles.info/articles/?p=788
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));
    }

    public void run() {
        frame = new JFrame("Moving Eyes by Gilbert Le Blanc");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        drawingPanel = new DrawingPanel(drawingWidth, drawingHeight);
        frame.add(drawingPanel);

        frame.setSize(800, 600);
    
        frame.setLocationRelativeTo(null);
    
        //frame.setResizable(false);
        // 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));
        }

        // images
        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;
        }


        // mouse detector
        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();
        }

    }

}

You can use the JFrame and DrawingPanel code as a base for any Swing GUI where you need to draw.

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.

Site: http://java-articles.info/articles/?p=788
Java archive: Moving Eyes by Gilbert Le Blanc.jar
Link: https://www.4shared.com/file/Qm-sr08-ei/Moving_Eyes_by_Gilbert_Le_Blan.html

Anúncios