Changing the frame's display after every interval, like an animation

Question

How can I use repaint here, that it changes the display after some interval, like an animation?

Ouput:

(Like initially and randomly it is) this-1 (after some short interval and randomly it changes to) this-2 and continued...

import java.awt.*;
import java.util.Random;
import javax.swing.*;

class MatrixPanel extends JPanel {

    private final int sqW = 15;
    private final int sqH = 15; 

    @Override
    public Dimension getPreferredSize() {
        return new Dimension(300, 300);
    }

    @Override
    public void paintComponent(Graphics g) {
        Random rand = new Random();
        for (int i = 0; i < 300; i += this.sqW) {
            for (int j = 0; j < 300; j += this.sqH) {
                if (rand.nextInt(2) == 1) {
                    g.setColor(Color.BLACK);
                } else {
                    g.setColor(Color.GRAY);
                }
                g.fillRect(i, j, this.sqW, this.sqH);
                g.setColor(Color.BLACK);
                g.drawRect(i, j, this.sqW, this.sqH);
            }
        }
    }
}

class GameOfLifeGUI extends JFrame {

    public GameOfLifeGUI() {

        JSplitPane splitPane = new JSplitPane();

        /*Panels*/
        JPanel topPanel = new JPanel();
        JPanel bottomPanel = new JPanel();
        
        /*Label - 1*/
        JLabel generationLabel = new JLabel("GenerationLabel");
        generationLabel.setText("Generation #");
        generationLabel.setFont(new Font("Comic Sans MS", Font.PLAIN, 14));
        generationLabel.setBounds(10, 5, 300, 20);

        /*Label - 2*/
        JLabel aliveLabel = new JLabel("AliveLabel");
        aliveLabel.setText("Alive: ");
        aliveLabel.setFont(new Font("Comic Sans MS", Font.PLAIN, 14));
        aliveLabel.setBounds(10, 25, 300, 20);

        topPanel.setLayout(null);
        topPanel.add(generationLabel);
        topPanel.add(aliveLabel);

        bottomPanel.add(new MatrixPanel());

        setPreferredSize(new Dimension(315, 405));

        getContentPane().setLayout(new GridLayout());

        getContentPane().add(splitPane);

        splitPane.setOrientation(JSplitPane.VERTICAL_SPLIT);
        splitPane.setDividerLocation(50);
        splitPane.setTopComponent(topPanel);
        splitPane.setBottomComponent(bottomPanel);

        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setLocationRelativeTo(null);
        pack();
    }

    public static void main(String[] args) {
        new GameOfLifeGUI().setVisible(true);
    }
}

Specifically not repaint, if there are other components that I can use and meet my requirements will be most welcome.

Thank you.

Answer 1

You don't want to do the following:

    public void paintComponent(Graphics g) {
        Random rand = new Random();
        for (int i = 0; i < 300; i += this.sqW) {
            for (int j = 0; j < 300; j += this.sqH) {
                if (rand.nextInt(2) == 1) {
                    g.setColor(Color.BLACK);
                } else {
                    g.setColor(Color.GRAY);
                }
                g.fillRect(i, j, this.sqW, this.sqH);
                g.setColor(Color.BLACK);
                g.drawRect(i, j, this.sqW, this.sqH);
            }
        }
    }

Since painting is done on the EDT, you need to keep your processing to a minimum, otherwise performance will suffer and you may even lock up your application.

Use a Swing timer and create the image in a BufferedImage object. BufferedImages provide a graphics context so you can use the same methods you are using in paintComponent.

You can set the timer interval to whatever works for you and then issue a repaint when the image is created. So it could look similar to the following:

final BufferedImage image = new BufferedImage(300,300,BufferedImage.TYPE_INT_RGB);
...     
Timer timer = new Timer(0, ae->createImage());
timer.setDelay(300);
timer.start();
...  
    
public void createImage(BufferedImage image) {
    Random rand = new Random();
    Graphics g = image.getGraphics();
    for (int i = 0; i < 300; i += this.sqW) {
        for (int j = 0; j < 300; j += this.sqH) {
            if (rand.nextInt(2) == 1) {
                g.setColor(Color.BLACK);
            } else {
                g.setColor(Color.GRAY);
            }
            g.fillRect(i, j, this.sqW, this.sqH);
            g.setColor(Color.BLACK);
            g.drawRect(i, j, this.sqW, this.sqH);
        }
    }
    repaint();
}
    
    
public void paintComponent(Graphics g) {
    super.paintComponent(g);
    // Image observer not required so it can be set to null.
    g.drawImage(image, 0,0, null);
}

Finally, you need to set your MatrixPanel size large enough to hold the image. Probably 300 x 300.