java - How to move two circles together in a JFrame from two different classes

Question

I am trying to display the two circles moving together on a single frame through two different classes. But only one is shown moving at a time,even though value of "x" is changing continuously in class child1, paintComponent() is only taking the value of "x1" and showing the circle in moving from class child2.

If two separate frames are assigned to both the classes they works perfectly fine. Here is my code

import java.awt.Graphics;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.Timer;

public class Test13
{
    public static void main(String[] args)
    {
        child1 c1 = new child1();
        child2 c2 = new child2();
        JFrame f1 = new JFrame("Frame Test1");
        f1.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);//passing a single JFrame to both methods as parameters    
        c1.cfunc1(f1);   
        c2.cfunc2(f1);   // but this line always hides the upper one
        f1.setSize(1000,700);
        f1.setVisible(true);
    }

}

class child1 extends JPanel implements ActionListener
{
    int x,y;
    int delay1;
    Timer timer1; //timer for 1st class constructor

    child1()
    {
        x=1;
        y=100;
        timer1 = new Timer(50,this);
    }

    @Override
    public void actionPerformed(ActionEvent e)
    {
        if(x <= 500)
        {
            x += 1;
            y = 100;
            repaint();
        }
    }

    @Override
    public void paintComponent(Graphics g)
    {
        super.paintComponent(g);
        g.fillOval(x, y, 10, 10);
    }

    void cfunc1(JFrame f1)//passing JFrame as parameter 
    {
        child1 c1 = new child1();
        f1.add(c1);
        c1.timer1.start(); //timer started at the end of class1
    }
}  

class child2 extends JPanel implements ActionListener
{
    int x1,y1;
    int delay2;
    Timer timer2;

    child2()
    {
        x1 = 500;
        y1 = 100;
        timer2 = new Timer(50,this);//timer for 2nd class constructor
    }

    @Override
    public void actionPerformed(ActionEvent e)
    {
        if(x1 <= 500)
        {
            x1 -= 1;
            y1 = 100;
            repaint();
        }
    }

    @Override
    public void paintComponent(Graphics g)
    {
        super.paintComponent(g);
        g.fillOval(x1, y1, 10, 10);
    }

    void cfunc2(JFrame f1)//passing JFrame as parameter
    {
        child2 c2 = new child2();
        f1.add(c2);
        c2.timer2.start();//timer started for 2nd class
    }
} 

Answer 1

When two components are added to a single constraint of a BorderLayout (the default layout for a JFrame), only one is displayed.

The typical way to do this is not to design the custom painting in a JComponent (like JPanel) but instead to have them as simple classes which can paint(Graphics) or draw(Graphics) when requested to do so.

Then extend a single JComponent that iterates a list of the drawable components and paints each one.