animation using repaint()

Question

I am trying to create a simple animation which draws random rectangles when a button is pressed. So far I managed to create rectangle on the press of a button. I want to further develop the code so that when I press the button, more than multiple random rectangles are created. I tried to create a for loop which asks the inner class to repaint itself but it still didn't work. can anyone help me please.

    public class TwoButtonsRandomRec {

    JFrame frame;
    private int width = 500;
    private int height = 500;
    private DrawPanel dp;

    public int getWidth() {
        return width;
    }

    public void setWidth(int width) {
        this.width = width;
    }

    public int getHeight() {
        return height;
    }

    public void setHeight(int height) {
        this.height = height;
    }


    public static void main (String[] args)
    {   
        TwoButtonsRandomRec test = new TwoButtonsRandomRec(); 
        test.go();
    }

    public void go()
    {   
        dp = new DrawPanel();

        JButton start = new JButton("Start");
        start.addActionListener(new startListener());
        JButton stop = new JButton("Stop");
        stop.addActionListener(new stopListener());

        frame = new JFrame();
        frame.setSize(getWidth(), getHeight());
        frame.setVisible(true);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.getContentPane().add(BorderLayout.NORTH, start);
        frame.getContentPane().add(BorderLayout.SOUTH, stop);
    }

    class startListener implements ActionListener{
        public void actionPerformed(ActionEvent event){
            frame.getContentPane().add(BorderLayout.CENTER, dp);
            frame.repaint();
            frame.getRootPane().revalidate();       
            for(int i=0; i<10; i++){
                dp.repaint();
            }
        }
    }

    class stopListener implements ActionListener{
        public void actionPerformed(ActionEvent event){
            System.out.println("stop");
        }
    }

    class DrawPanel extends JPanel{

        public void paintComponent(Graphics g){
            int w = 5+(int)(Math.random() * width-5);
            int h = 5+(int)(Math.random() * height-5);
            int maxX = width-w; // diffX & diffY are used to ensure that rectangle is
            int maxY = width-h; // draw completely inside the window
            int x = (int)(Math.random() * maxX);
            int y = (int)(Math.random() * maxY);
            Color color = new Color((int) (Math.random()*256), // random red
                    (int) (Math.random()*256), // random green
                    (int) (Math.random()*256));// random blue
            g.setColor(color);
            g.fillRect(x,y,w,h);
        }
    }
}

Answer 1

Well,here I have done a short EG for you.It displays random rectangles, random times on random screen location. (You can set your own value of randomization, and the screen location max bound,as per your requirements.)

And also note

            int i=(int)(Math.random()*10);

             int j=(int)(Math.random()*10);

             for(;i<j;i++)

Where at times i may be > than j.So,loop may not work on one or two cliks.Change as per your need.

Here is the working code:

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

public class SimpleStamper extends JApplet {


  public void init() {

     Display display = new Display();
     setContentPane(display);
  }


  class Display extends JPanel implements MouseListener {

     Display() {

         setBackground(Color.black);
         addMouseListener(this);
     }

     public void mousePressed(MouseEvent evt) {


         if ( evt.isShiftDown() ) {

            repaint();
            return;
         }

         int x = evt.getX(); 
         int y = evt.getY();  

         Graphics g = getGraphics();  

            //***MODIFY THE FOLLOWING LINES****//   
             int i=(int)(Math.random()*10);
             int j=(int)(Math.random()*10);
             for(;i<j;i++)
             { g.setColor(Color.red);

               x=(int)(Math.random()*100);
               y=(int)(Math.random()*100);
             g.fillRect( x , y , 60, 30 );
             g.setColor(Color.black);
             g.drawRect(x , y , 60, 30 );}


         g.dispose();  
      } 
     public void mouseEntered(MouseEvent evt) { }
     public void mouseExited(MouseEvent evt) { }
     public void mouseClicked(MouseEvent evt) { }
     public void mouseReleased(MouseEvent evt) { }

   } 

  } 

Answer 2

What you should do is to put the loop inside paintComponent method and not call repaint in the loop. So your paintComponent method should look like this:

    public void paintComponent(Graphics g){
        for (int i = 0; i < 10; i++) {
        int w = 5+(int)(Math.random() * width-5);
            int h = 5+(int)(Math.random() * height-5);
            int maxX = width-w; // diffX & diffY are used to ensure that rectangle is
            int maxY = width-h; // draw completely inside the window
            int x = (int)(Math.random() * maxX);
            int y = (int)(Math.random() * maxY);
            Color color = new Color((int) (Math.random()*256), // random red
                    (int) (Math.random()*256), // random green
                    (int) (Math.random()*256));// random blue
            g.setColor(color);
            g.fillRect(x,y,w,h);
        }
    }

And your action performed should look like this:

public void actionPerformed(ActionEvent event){
    frame.getContentPane().add(BorderLayout.CENTER, dp);
    frame.repaint();
    frame.getRootPane().revalidate();       
    dp.repaint();
}

Answer 3

repaint() simply tells Swing "when you'll have time, please repaint this area". So if you add rectangles in a loop and call repaint at each iteration, all the rectangles will only appear after the loop has finished, and the action event has been handled.

To have an animation, you need to loop in a separate thread. The easiest way to do that is to use a Swing Timer. When the Start button is started, start a timer which adds a random rectangle and calls repaint() every X milliseconds. When the Stop button is pressed, stop the timer.