How do I draw colored circles in Java on a JPanel?

Question

Hey everyone,

I'm doing another Java project for my class. In this assignment, we have to create a checkerboard and populate it with the appropriate number of checkers. I built the checkerboard correctly which displays nicely, but I'm having a hard time using the Graphics class to draw.

Here's the code that I have so far:

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

public class Checkerboard extends JFrame {
    //Define the default values for the separate checker pieces
    private final int RED_PIECE = 0;
    private final int BLACK_PIECE = 1;

    /** Construct the default checker board */
    public Checkerboard() {
        this.setSize(600, 600);
        this.setResizable(false);
        this.setDefaultCloseOperation(EXIT_ON_CLOSE);
        this.setLocationRelativeTo(null);
        this.setTitle("Checkerboard Lab");
        this.setLayout(new GridLayout(8, 8));
        this.setVisible(true);

        for (int a=0; a<2; a++) {
            for (int i=0; i<4; i++) {
                add(new WhiteSpace());
                add(new GraySpace(RED_PIECE));
            }
            for (int j=0; j<4; j++) {
                add(new GraySpace(RED_PIECE));
                add(new WhiteSpace());
            }
        }
        for (int b=0; b<2; b++) {
            for (int k=0; k<4; k++) {
                add(new WhiteSpace());
                add(new GraySpace(RED_PIECE));
            }
            for (int l=0; l<4; l++) {
                add(new GraySpace());
                add(new WhiteSpace());
            }
        }
        for (int c=0; c<2; c++) {
            for (int m=0; m<4; m++) {
                add(new GraySpace());
                add(new WhiteSpace());
            }
            for (int n=0; n<4; n++) {
                add(new GraySpace(BLACK_PIECE));
                add(new WhiteSpace());
            }
        }
        for (int d=0; d<2; d++) {
            for (int o=0; o<4; o++) {
                add(new WhiteSpace());
                add(new GraySpace(BLACK_PIECE));
            }
            for (int p=0; p<4; p++) {
                add(new GraySpace(BLACK_PIECE));
                add(new WhiteSpace());
            }
        }
    }

    /** White Space constructor */
    public class WhiteSpace extends JPanel {
        public WhiteSpace() {
            setBackground(Color.WHITE); //Sets the panel's background color to white
        }
    }

    /** Gray Space constructor */
    /* GraySpace is a little different, since this color space is the only space that will be holding checker
     * pieces. There is a default constructor to create a space without a checker piece on it, and another 
     * constructor that places either a red or black piece on the space, pending an optional parameter.*/
    public class GraySpace extends JPanel {
        //Initial variable for the checker piece
        int checkerPiece;

        //Default GraySpace constructor
        public GraySpace() {
            setBackground(Color.LIGHT_GRAY);
        }

        //The GraySpace constructor with the optional parameter to determine if it holds a checker piece
        public GraySpace(int piece) {
            this.checkerPiece = piece;
            setBackground(Color.LIGHT_GRAY); //Sets the panel's background color to white
        }

        protected void paintComponent(Graphics g) {
            super.paintComponent(g);

            //Default width and height variables
            int width = getWidth() -10;
            int height = getHeight() - 10;

            //This switch statement determines which checker piece type appears on the square
            switch (checkerPiece) {
            case RED_PIECE:
                g.setColor(Color.RED);
                g.fillOval(5, 5, width, height);
                break;
            case BLACK_PIECE:
                g.setColor(Color.BLACK);
                g.fillOval(5, 5, width, height);
                break;
            }
        }
    }

    /** Initiate the Checker board */
    public static void main(String[] args) {
        JFrame checkerboard = new Checkerboard();
    }
}

It's fairly straight forward. I have my Checkerboard class be a subclass of JFrame, which I put colored panels on in an 8x8 square. The panels are inner classes of the Checkerboard class, each extending JPanel (WhiteSpace and GraySpace respectfully). Since GraySpace is the only class that will have to hold a checker, I thought that I'd simply put the Graphics code into the GraySpace inner class.

Anyhow, for my question: How do I go about using Graphics to draw that? I know I have to explicitly declare the paintComponent() method in order to draw the circle, but I don't have any clue how to specify the dimensions of the GraySpace so it will draw effectively. Any advice?

EDIT: NEW QUESTION!

Alright, so I figured out exactly how I would be adding pieces onto my board, and that works perfectly. My GraySpace inner class has an optional constructor that takes in an int value, and from that determines what color piece will go on the GraySpace panel. I tested that out, and it works.

My problem, however, is actually GETTING the pieces onto the checkerboard. The board must represent a "default" checker game, where all available pieces are on the board. So, three rows of red checkers, three rows of black checkers, with two empty rows separating them. Thus far, I have 4 separate for loops to draw two rows at a time on the board... But it's not working properly. Any advice? The latest source code is above, replacing my old questions source code. Again, thank you for any advice!

Answer 1

Call getHeight and getWidth on the component you are in. Since paintComponent is a member of your JPanel class, you can just call getHeight and getWidth directly.

I made a couple of other changes to your method.

1. Don't call this.paintComponent, call the base class (super)
2. You need to set the color before you draw.
3. I bet fillOval is what you want.

For example:

protected void paintComponent(Graphics g) { 
    int h = getHeight();
    int w = getWidth();
    super.paintComponent(g); 
    g.setColor(CHECKER_COLOR);
    g.fillOval(w/2, h/2, w, h); 
} 

For extra credit, turn on antialiasing and make your checkers look great!

Answer 2

One thing about your for loops just for future knowledge, when you define int i=0, that variable only exists within that loop, so you don't need to use a different variable a,b,c,d,e, etc in your 4 for loops you could simply use i,j,k 4 times.

Also, I think your loops are adding a lot more pieces than you want.

for (int a=0; a<2; a++) {             //2 (
   for (int i=0; i<4; i++) {          //    4
       add(new WhiteSpace());         //      (1 
       add(new GraySpace(RED_PIECE)); //         + 1)
   }                                  //  +                     
   for (int j=0; j<4; j++) {          //    4
       add(new GraySpace(RED_PIECE)); //      (1 
       add(new WhiteSpace());         //         + 1)
   }                                  //  )
}                                     //= 2 ( 4 * 2 + 4 * 2) = 32

In this one loop you are adding 32 squares. You do this 4 times. That is already twice the squares you need.

The very simplest solution is to remove the 4 outer loops. Then you would have what you want.