JSlider — Advice needed

Question

I have a problem with JSlider in Java I have drawn a circle A, and I want to put ANOTHER circle B inside the first circle A. I want to place the CENTRE of the second circle B at the same coordinate with the centre of the first circle A, and then I want to use JSlider to INCREASE or DECREASE the radius of circle B. The trouble is, when you increase or decrease the slider, the CENTRE of circle B does not stay aligned with the centre of A. Basically, I want two circles with the SAME centre. Can someone point out my mistake, please?

    slider1 = new JSlider(JSlider.HORIZONTAL,10,100,10);
    window.add(slider1);
    slider1.addChangeListener(this);

    Graphics paper = panel.getGraphics();
    int slider1Value = slider1.getValue();
    paper.setColor(Color.white);
    paper.fillRect(0, 0, 500, 500);

    paper.setColor(Color.pink);
    paper.fillOval(20,20,100,100);   // this is circle A

    paper.drawOval(60,60,slider1Value,slider1Value);  // this is circle B slider

Answer 1

Because you have to change position of top-left "corner" of circle. If you change radius, the circle is bigger/smaller so it's obvious if you don't change position of top-left cornet, centers of 2 circles won't be aligned

Answer 2

Theory

From Graphics.drawOval() javadoc. When you draw a circle their (x,y) coordinates are not its center but its top-left corner. In order to make your B circle aligned with A circle, you need to calculate its (x,y) coordinates relatives to the last one:

Circle A: (x,y) = (20,20); diameter = 100 ==> radius = 50; center = (x + radius, y + radius) = (70,70)

Well, you have your center now: (70,70) . Now, slider1Value is your new radius so you need to calculate circle B (x,y) coordinates:

Circle B: center = (70,70); (x,y) = (centerX - radius, centerY - radius) = (70 - slider1Value, 70 - slider1Value)

Finally, circle B width and height are equals to its diameter: radius * 2 = slider1Value * 2 .

Facts

Make this change and it will work like a charm:

paper.drawOval(70 - slider1Value, 70 - slider1Value, 2*slider1Value, 2*slider1Value);