Creating Sleepy Face in Java

Submitted by mehfuza on Friday, September 6, 2013 - 01:04.
In this tutorial we will learn to create a simple face(only eyes) which change when sleep button or wakeup button is clicked. This Application has two JButtons and a Panel for displaying the face. This Application handles Action Events for the buttons. In all we will create three class to make the design simple and clear.

Part 1: Creating a Class FacePanel for drawing face

Step 1: This class is used to draw the face based on whether the face is awake or asleep. For that we require a boolean variable awake which is set false initialy. In the constructor of this class background color and size of panel is set as follows.
  1.  private boolean awake = false;  // show face awake or asleep
  2.    
  3.  //================================================== constructor
  4.    FacePanel() {
  5.         this.setBackground(Color.lightGray);
  6.         this.setPreferredSize(new Dimension(400, 400));  // size
  7.     }//end constructor
Step 2: Next, the setAwake() method is used to set the variable awake and call the repaint method to redraw the face. This method is when the button is clicked.
  1. public void setAwake(boolean awakeAsleep) {
  2.         awake = awakeAsleep; // remember expression on face
  3.         repaint();           // redraw it with new value
  4.     }//end setAwake
Step 3: Finally the paintComponent() method is used to draw the face to the panel(component). fillOval() method draws an oval for the face and eyes are drawn based on the value of variable awake which is changed when a button is clicked. If awake is true then it draws the open eyes using fillOval() else it draws the closed eyes using using fillRect() method. First two arguments for this method are x and y co-ordinates of the point from where to start drawing and next two are width and height.
  1. public void paintComponent(Graphics g) {
  2.         super.paintComponent(g);  // MUST be first line
  3.  
  4.         //--- draw head
  5.         g.setColor(Color.yellow);
  6.         g.fillOval(8, 8, 384, 384);
  7.  
  8.         //--- draw eyes
  9.         g.setColor(Color.black);
  10.         if (awake) {
  11.             g.fillOval(100, 150, 50, 100);  // left eye
  12.             g.fillOval(250, 150, 50, 100);  // right eye
  13.         }
  14.         else {
  15.             g.fillRect(50 , 200, 100, 4); // left eye
  16.             g.fillRect(250, 200, 100, 4); // left eye
  17.         }
  18.     }

Part 2: Defining a class for adding buttons and face

We create another class which extends panel and add two buttons asleep and awake to it and then add Face Panel. ActionListener for button is also included which changes the calls the setAwake() method with true or false parameter depending upon which button was clicked. Step 1: First create object of FacePanel so that we can add it to this panel.
  1. private FacePanel face = new FacePanel();
Step 2: Then define constructor for the this panel in which we create two buttons as follows. ActionListener's object is created and added at the same time.
  1. SleepyPanel() {
  2.         //--- Create some buttons
  3.         JButton awakeButton = new JButton("Awake");
  4.         awakeButton.addActionListener(
  5.             new ActionListener() {
  6.  
  7.                 //========================================= listener
  8.                 public void actionPerformed(ActionEvent e) {
  9.                     face.setAwake(true);
  10.                 }//end listener
  11.  
  12.             }
  13.         );
  14. JButton asleepButton = new JButton("Asleep");
  15.         asleepButton.addActionListener(
  16.             new ActionListener() {
  17.  
  18.                 //========================================= listener
  19.                 public void actionPerformed(ActionEvent e) {
  20.                     face.setAwake(false);
  21.                 }//end listener
  22.  
  23.             }
  24.         );
Step 3: Set Layout and add buttons Buttons are added next to each other using FlowLayout. buttonPanel is added at the top and face panel is added is added at the center using the BorderLayout.
  1.         JPanel buttonPanel = new JPanel();
  2.         buttonPanel.setLayout(new FlowLayout());
  3.         buttonPanel.add(awakeButton);
  4.         buttonPanel.add(asleepButton);
  5.  
  6.         //--- Set layout and add buttons and face
  7.         this.setLayout(new BorderLayout());
  8.         this.add(buttonPanel, BorderLayout.NORTH);
  9.         this.add(face, BorderLayout.CENTER);

Part 3: Create a Sleep class and define main() method

A JFrame object "window" is created and an object of SleepPanel class is created and added to this frame. pack() method is used to set the size of the frame as required by the components to fill the frame.
  1. public class Sleep {
  2.  
  3.     //================================================== method main
  4.     public static void main(String[] args) {
  5.         JFrame window = new JFrame("Sleepy");
  6.         window.getContentPane().add(new SleepyPanel()); //get the content pane to add the component
  7.         window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  8.         window.pack();
  9.         window.show();
  10.     }//end main
  11.  
  12. }
Tags
sleepy
face
panel
java
awake

Add new comment

About text formats
  • 43 views