Drawing 4 Circle one button different sizes and colors

Question

I'm trying to do this code to output the same result as the picture

it should start with one black circle then when I click the button, a white circle appear with shift the right and get bigger by 20 pixels and so on after the 4th circle it should clear the window and start from the beginning and I keep getting only one circle color or two circles together

here's the code

import java.awt.*;
import java.awt.event.*;
import java.util.ArrayList;
import java.util.List;
import javax.swing.*;
import javax.swing.WindowConstants;

public class CircleList extends JFrame implements ActionListener {
    JButton addCircle;
    int nCircle = 1;
    int step = 0;
    int shift = 0;
    int d = 0;

    public static void main (String [] args){
        new CircleList();
    }

    private class Circle {
        public int x1;
        public int y1;
        public int w;
        public int h;
        public Color color;
    }

    private List<Circle> whiteList = new ArrayList<>();
    private List<Circle> blackList = new ArrayList<>();


    public CircleList() {
        super("CircleList");
        setSize(500,500);
        setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);        
        getContentPane().setBackground(Color.gray);
        addCircle = new JButton("Add Circle");
        add(addCircle,BorderLayout.SOUTH);
        addCircle.addActionListener(this);
        repaint();

        setVisible(true);
    }

    public void paint(Graphics g){
        super.paint(g);
        g.fillOval(35, 35, 35, 35);
        if (d==1) {
            for (Circle s: whiteList ) {
                paintWhiteCircle(g, s);
            }
            addWhiteCircle();
        }
        else if (d==2) {
            for (Circle s: blackList ) {
                 paintBlackCircle(g, s);

            }
            addBlackCircle();
        }
    }

    public void paintWhiteCircle(Graphics g, Circle circle) {
        g.setColor(circle.color);
        g.fillOval(circle.x1, circle.y1,  circle.w, circle.h);
    }

    public void paintBlackCircle(Graphics g, Circle circle) {
        g.setColor(circle.color);
        g.fillOval(circle.x1, circle.y1, circle.w, circle.h);
    }

    public void addBlackCircle(){

        Circle circle = new Circle();

        circle.x1 = 40 + shift;
        circle.y1 = 30 ;
        circle.w = 30 + step;
        circle.h = 30 + step;
        circle.color = new Color(0,0,0);
        this.blackList.add(circle);
    }
    public void addWhiteCircle() {

        Circle circle = new Circle();
        circle.x1 = 100 + shift;
        circle.y1 = 30 ;
        circle.w = 50 + step;
        circle.h = 50 + step;
        circle.color =  new Color(255*65536+255*256+255);       
        this.whiteList.add(circle);
    }

    public void actionPerformed(ActionEvent e) {
        Object source = e.getSource();
        d = 0;
        if (source == addCircle) {      
            for (nCircle = 2; nCircle <= 5; nCircle++) {
                if (nCircle == 2) {
                    d = 1;
                    step+=20;
                    shift += 20;
                    nCircle++;  
                }
                else if (nCircle == 3) {
                    d = 2;
                    step+=20;
                    shift += 20;
                }
                else if (nCircle == 4) {
                    d=1;
                    step+=20;
                    shift += 20;
                }
                else if (nCircle == 5)
                    repaint(); // it should clear the window and start with one circle like the beginning
                }

                repaint();
           }
      }
}

the output should be like this

Answer 1

I've corrected your example. It works now.

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.util.ArrayList;
import java.util.List;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
import javax.swing.WindowConstants;

public class CircleList extends JPanel implements ActionListener, Runnable {

    private static final int INTERVAL = 20;

    private static final int INITIAL_DIAMETR = 20;

    private int actualXPos;

    private final List<Circle> circleList = new ArrayList<>();

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new CircleList());
    }

    @Override
    public void run() {
        JFrame frm = new JFrame(getClass().getSimpleName());
        frm.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
        frm.getContentPane().add(this);
        frm.pack();
        frm.setLocationRelativeTo(null);
        frm.setVisible(true);
    }

    public CircleList() {
        setLayout(new BorderLayout());
        setPreferredSize(new Dimension(500, 500));
        setBackground(Color.gray);
        JButton addCircle = new JButton("Add Circle");
        add(addCircle, BorderLayout.SOUTH);
        addCircle.addActionListener(this);
        addCircle();
    }

    @Override
    public void paintComponent(Graphics g) {
        super.paintComponent(g);
        for (Circle c : circleList) {
            c.paint(g);
        }
    }

    private void addCircle() {

        Circle circle = new Circle();

        int num = circleList.size();
        circle.x1 = 40 + actualXPos;
        circle.y1 = 30;
        circle.w = 30 + INITIAL_DIAMETR * (num + 1);
        circle.h = 30 + INITIAL_DIAMETR * (num + 1);
        circle.color = num % 2 == 0 ? Color.BLACK : Color.WHITE;
        circleList.add(circle);
        actualXPos += circle.w + INTERVAL;
    }

    @Override
    public void actionPerformed(ActionEvent e) {
        if (circleList.size() == 4) {
            circleList.clear();
            actualXPos = 0;
        }
        addCircle();
        repaint();
    }

    private static class Circle {
        private int x1;

        private int y1;

        private int w;

        private int h;

        private Color color;

        public void paint(Graphics g) {
            g.setColor(color);
            g.fillOval(x1, y1, w, h);
        }
    }
}