We Keep Coding

Drawing Circles on a JFrame using custom painting

I am trying to create a simple game using Swing with Java have one question about drawing shapes using the built-in objects. Should the objects be created in the constructor and just draw in the paint method or should they be both created and drawn in the paint method?
See below for an example:
import javax.swing.*;
import java.awt.*;
import java.awt.geom.*;
import java.util.*;
public class Window extends JFrame{//inheriting JFrame
JFrame f;
private Dimension windowSize;
private final int cols, rows; //The number of circles in each col/row
private Ellipse2D[][] circles;
public Window ()
{
cols = 5;
rows = 5;
//Set window initial size
Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
windowSize = new Dimension();
windowSize.width = (int)(screenSize.width * .4);
windowSize.height = windowSize.width;
setSize(windowSize);
circles = new Ellipse2D[rows][cols];
initShapes();
setLayout(null);
setVisible(true);
}
#Override
public void paint (Graphics g)
{
Graphics2D g2d = (Graphics2D) g;
RenderingHints rh = new RenderingHints(
RenderingHints.KEY_TEXT_ANTIALIASING,
RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
g2d.setRenderingHints(rh);
for(int i = 0; i < circles.length; i++)
{
for(int j = 0; j < circles[0].length; j++)
{
g2d.fill(circles[i][j]);
g2d.draw(circles[i][j]);
}
}
}
private void initShapes()
{
int r = (int)(windowSize.width * .015);
//The frame is the region of the screen that will contain the game
//(excluding a border/margin of 10% all around)
int frameX = (int)(windowSize.width * .7);
int frameY = (int)(windowSize.height * .7);
for(int i = 0; i < circles.length; i++)
{
for(int j = 0; j < circles[0].length; j++)
{
int x = (int)(windowSize.width*.15) + (frameX/(cols-1)) * j;
int y = (int)(windowSize.height*.15) + (frameY/(rows-1)) * i;
circles[i][j] = new Ellipse2D.Double(x-r, y-r, 2*r, 2*r);
}
}
}
public static void main(String[] args)
{
Window window = new Window();
}
}
Here I am creating the Ellipse2D objects in the constructor function and storing them in an array. Then, in the paint method, I iterate through the array and paint each one. The other way that I have seen it is more like the following:
//...
#Override
public void paint (Graphics g)
{
Graphics2D g2d = (Graphics2D) g;
RenderingHints rh = new RenderingHints(
RenderingHints.KEY_TEXT_ANTIALIASING,
RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
g2d.setRenderingHints(rh);
int r = (int)(windowSize.width * .015);
for(int i = 0; i < circles.length; i++)
{
for(int j = 0; j < circles[0].length; j++)
{
int x = (int)(windowSize.width*.15) + (frameX/(cols-1)) * j;
int y = (int)(windowSize.height*.15) + (frameY/(rows-1)) * i;
Ellipse2D ellipse = new Ellipse2D.Double(x-r, y-r, 2*r, 2*r);
g2d.fill(ellipse );
g2d.draw(ellipse );
}
}
}
}
//...
This feels wrong to have the objects be created in the paint method which is recalled repeatedly, but I have seen this. Essentially, my question is just which organization is either more efficient or just best practice.

Swing draw string centeralised

I have to draw n + 1 amount of circles horizontally and vertically in a GUI. Which I have successfully done as shown below. With this, a 2D array of strings will be printed between them, centralised.
How it currently stands
Now I want to draw numbers in a "square" of the dots.
How I want the final result
for (int i = 0; i < width; i++) {
for (int j = 0; j < width; j++) {
canvas.drawCircle( (j + 1) * 125, (i + 1) * 125, 15, Color.white);
}
}
for (int r = 0; r < size; r++) {
for (int c = 0; c < size; c++) {
canvas.drawString(events[r][c], (r + 1) * 150, (c + 1) * 150, Color.green );
}
}
Width in this case is 4, so basically (n-1) dots/circles in the picture.
Size is 3 which is just the length of the 2d array, as there are 4 circles in this case there will be 3 numbers between each one
Events is the 2D array with the data containing the numbers
The drawCircle method's signature is
(x, y, radius, color)
The drawString method's signature is
(text, x, y color)
I believe part of the problem is also the drawing of circles. Basically I think it has to do with the rubbish formula I have for determining the x, y coords for both circles and the text. Any help is appreciated, thank you.

Provided is some code which I believe does what you want. Some of the constants may be tweaked to fit your final requirements. I used a 2D array of numbers and converted to strings during paint. It also allows for the following:
Changing the ball diameter or number of balls will still provide a
correct graph (although it will change its location within the
panel).
The String numbers track along with the size of the balls
Anti-aliasing was turned on to smooth out the graphics.
FontMetrics was used to fine tune the location of the numbers.
One final note: Because this is not resource intensive, the coordinates are calculated within the paintComponent method. A more optimum solution would be to adopt the Flyweight design pattern and precalculate as much as possible before entering paintComponent.
import java.awt.*;
import javax.swing.*;
public class SwingMain extends JPanel {
final static int WIDTH = 700;
final static int HEIGHT = 700;
final static int SEPARATION = 100;
final static int DIAMETER = 25;
final static int NBALLS = 4;
final static int XSTART = WIDTH / (NBALLS + 2);
final static int YSTART = HEIGHT / (NBALLS + 2);
JFrame frame = new JFrame();
int[][] numbers = new int[NBALLS - 1][NBALLS - 1];
public static void main(String[] args) {
SwingUtilities.invokeLater(() -> new SwingMain().start());
}
public void start() {
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setPreferredSize(new Dimension(WIDTH, HEIGHT));
frame.add(this);
setBackground(Color.RED);
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
// populate numbers in 2D array.
for (int r = 0; r < NBALLS - 1; r++) {
for (int c = 0; c < NBALLS - 1; c++) {
numbers[r][c] = r * (NBALLS - 1) + c + 1;
}
}
}
#Override
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g;
// Allow smoothing of the graphics.
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setColor(Color.white);
// Iterating by the number of balls is more consistent than
// by x and y due to round of errors.
int y = YSTART;
for (int r = 0; r < NBALLS; r++) {
int x = XSTART;
for (int c = 0; c < NBALLS; c++) {
g2d.fillOval(x, y, DIAMETER, DIAMETER);
x += SEPARATION;
}
y += SEPARATION;
}
// This is the same as above except that the start begins
// halfway between the first row and column
// have the size of the font track with the diameter of the balls
g2d.setFont(new Font("ARIAL", Font.BOLD, DIAMETER));
FontMetrics fm = g2d.getFontMetrics();
y = YSTART + SEPARATION / 2;
for (int r = 0; r < NBALLS - 1; r++) {
int x = XSTART + SEPARATION / 2;
for (int c = 0; c < NBALLS - 1; c++) {
String number = Integer.toString(numbers[r][c]);
// Do some final position adjustment with the font metrics to
// center the number
int strWidth = fm.stringWidth(number);
int strHeight = fm.getAscent();
g2d.drawString(number,
x - strWidth / 2 + DIAMETER / 2,
y + strHeight);
x += SEPARATION;
}
y += SEPARATION;
}
}
}

You could store the coordinates of the circles in a 2D array as well, and use that to find the location of the strings. One thing to note is that the drawCircle method for some reason wont draw the circle with the given center (the coordinates you give will be the top left corner actually).
Point[][] circleCoords = new Point[width][width]; //suppose Point class has x and y coords
for (int i = 0; i < width; i++) {
for (int j = 0; j < width; j++) {
//the -15 actually centers the circle to the coordianates
circleCoords[i][j] = new Point((j + 1) * 125 - 15, (i + 1) * 125 -15);
canvas.drawCircle(circleCoords[i][j].x , circleCoords[i][j].y, 15, Color.white);
}
}
for (int r = 0; r < width-1; r++) {
for (int c = 0; c < width-1; c++) {
//calculate coords from circleCoords array: halfway between them
int xCoord = (circleCoords[r][c].x + circleCoords[r+1][c].x)/2;
int yCoord = (circleCoords[r][c].y + circleCoords[r][c+1].y)/2;
//wont be out of bounds, becouse this runs to width-1
canvas.drawString(events[r][c], xCoord, yCoord, Color.green );
}
}
This still wont actually be perfectly centered, because the drawString will use the coordinates for top left point as well, and not centerpoint. Maybe I miscalculated something, but this should give you the idea: instead of calculating the coordinates independently, re-use the circle coordinates.

Consider a class that represents a single square. The value is represented by a JLabel which is placed at the bottom using straight-forward layout manager (BorderLayout in this example). You can change or manipulate the layout manager to change to position of the JLabel.
class Square extends JPanel{
private static int WIDTH = 100, HEIGHT = 100, DAIMETER = 30, GAP = 5;
private final JLabel label;
Square(int value) {
setPreferredSize(new Dimension(WIDTH, HEIGHT));
setLayout(new BorderLayout());
setBackground(Color.red);
setOpaque(true);
label = new JLabel(String.valueOf(value), JLabel.RIGHT);
label.setForeground (Color.white);
Border margin = new EmptyBorder(GAP,GAP,GAP,2*GAP); //top left bottom right
label.setBorder(margin);
add(label, BorderLayout.PAGE_END);
}
#Override
public void paintComponent(Graphics g){
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g;
g2d.setColor(Color.white);
g2d.fillOval(WIDTH/2 - DAIMETER/2, HEIGHT/2-DAIMETER/2, DAIMETER, DAIMETER);
}
}
Now add 16 instances of this Square to panel representing a board. Its layout manager is set to GridLayout:
class Board extends JPanel{
private static int ROWS = 4, COLS = 4;
Board(){
setLayout(new GridLayout(ROWS, COLS));
for(int index = 0; index < ROWS * COLS; index ++){
add(new Square(index)); //index is used as value for demonstration purposes
}
}
}
Putting it all together (this is a one-file mcve. Copy paste the entire code into SwingMain.java and run )
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GridLayout;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.border.Border;
import javax.swing.border.EmptyBorder;
public class SwingMain {
public static void main(String[] args) {
JFrame frame = new JFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLocation(400,250);
frame.add(new Board());
frame.pack();
frame.setResizable(false);
frame.setVisible(true);
}
}
class Board extends JPanel{
private static int ROWS = 4, COLS = 4;
Board(){
setLayout(new GridLayout(ROWS, COLS));
for(int index = 0; index < ROWS * COLS; index ++){
add(new Square(index)); //index is used as value for demonstration purposes
}
}
}
class Square extends JPanel{
private static int WIDTH = 100, HEIGHT = 100, DAIMETER = 30, GAP = 5;
private final JLabel label;
Square(int value) {
setPreferredSize(new Dimension(WIDTH, HEIGHT));
setLayout(new BorderLayout());
setBackground(Color.red);
setOpaque(true);
label = new JLabel(String.valueOf(value), JLabel.RIGHT);
label.setForeground (Color.white);
Border margin = new EmptyBorder(GAP,GAP,GAP,2*GAP); //top left bottom right
label.setBorder(margin);
add(label, BorderLayout.PAGE_END);
}
#Override
public void paintComponent(Graphics g){
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g;
g2d.setColor(Color.white);
g2d.fillOval(WIDTH/2 - DAIMETER/2, HEIGHT/2-DAIMETER/2, DAIMETER, DAIMETER);
}
}

Grid Color Change

can somebody please help me create a chess like board. I need to change the color the grid to black and white. I tried to use a an if statement if (r % 2 = 0) then rectfilcolor, but it colors the hall row.
package grid;
import java.awt.Color;
import java.awt.Graphics;
import javax.swing.*;
public class grid extends JPanel {
public static int High=640;
public static int width=617;
public static int row=3,column=3;
public static JFrame Frame;
public static void main(String[] args) {
grid gride= new grid();
Frame= new JFrame();
Frame.setSize(width, High);
Frame.setDefaultCloseOperation(Frame.EXIT_ON_CLOSE);
Frame.setVisible(true);
Frame.add(gride);
gride.setBackground(Color.cyan);
}
public void paintComponent(Graphics g) {
for (int r=0; r<4; r++) {
g.drawLine(r*(600/3), 0, r*(600/3), 600);
for (int c=0; c<4; c++) {
g.drawLine(0,(c*(600/3)), 600, (c*(600/3)));
}
}
}
}
-------------------------------------Edited----------------------------------
public void paintComponent(Graphics g){
for (int r=0;r<4;r++){
g.drawLine(r*(600/3), 0, r*(600/3), 600);
if (r%2!=0){
g.setColor(Color.white);
g.fillRect(r*(600/3), 0, r*(600/3), 600);
}
for (int c=0;c<4;c++){
g.drawLine(0,(c*(600/3)), 600, (c*(600/3)));
if(c%2!=0){
g.setColor(Color.black);
g.fillRect(0,(c*(600/3)), 600, (c*(600/3)));
}
}
}
}
}

Always remember to call super.paintComponent(g) to initialize the JPanel canvas correctly.
You can use g.fillRect(x, y, width, height) method to draw each chess cell. Use g.setColor(color) to change the color of the painting.
Therefore:
public void paintComponent(Graphics g) {
super.paintComponent(g);
Color[] colors = {Color.BLACK, Color.WHITE};
int lengthUnit = (600 / 3);
for (int row = 0; row < 3; ++ row) {
for (int col = 0; col < 3; ++col) {
g.setColor(colors[(row + col) % 2]); // alternate between black and white
g.fillRect(row * lengthUnit, col * lengthUnit, lengthUnit, lengthUnit);
}
}
}
Edit: you are almost there, just need to remove some redundant statements in the nested for loop...
for (int r = 0; r < 4; r++) {
for (int c = 0; c < 4; c++) {
if ((c + r) % 2 != 0) {
g.setColor(Color.black);
} else {
g.setColor(Color.white);
}
g.fillRect(r * (600 / 3), (c * (600 / 3)), 200, 200);
}
}

drawString() isn't drawing the String on my game

I am using drawString() to write text on the string, but nothing shows up. I set the color to white and set the coordinates to (100,100). Is there anything else that I am doing wrong?
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.util.ArrayList;
import java.util.Random;
import javax.swing.JPanel;
public class Screen extends JPanel implements Runnable {
private static final long serialVersionUID = 1L;
public static final int WIDTH = 800, HEIGHT = 800;
private Thread thread;
private boolean running = false;
private BodyPart b;
private ArrayList<BodyPart> snake;
private Apple apple;
private ArrayList<Apple> apples;
private Random r;
private int xCoor = 20, yCoor = 20;
private int size = 10;
private int score = 0;
private boolean right = true, left = false, up = false, down = false;
private int ticks = 0;
private Key key;
public Screen() {
setFocusable(true);
key = new Key();
addKeyListener(key);
setPreferredSize(new Dimension(WIDTH, HEIGHT));
r = new Random();
snake = new ArrayList<BodyPart>();
apples = new ArrayList<Apple>();
start();
}
public void reset() {
snake.clear();
apples.clear();
xCoor = 20;
yCoor = 20;
size = 10;
score = 0;
running = true;
}
public void tick() {
if(snake.size() == 0) {
b = new BodyPart(xCoor, yCoor, 20);
snake.add(b);
}
if(apples.size() == 0) {
int xCoor = r.nextInt(40);
int yCoor = r.nextInt(40);
apple = new Apple(xCoor, yCoor, 20);
apples.add(apple);
}
for(int i = 0; i < apples.size(); i++) {
if(xCoor == apples.get(i).getxCoor() && yCoor == apples.get(i).getyCoor()) {
size++;
apples.remove(i);
score += 10;
i--;
}
}
for(int i = 0; i < snake.size(); i++) {
if(xCoor == snake.get(i).getxCoor() && yCoor == snake.get(i).getyCoor()) {
if(i != snake.size() - 1) {
reset();
}
}
}
if(xCoor < 0) xCoor = 40;
if(xCoor > 40) xCoor = 0;
if(yCoor < 0) yCoor = 40;
if(yCoor > 40) yCoor = 0;
ticks++;
if(ticks > 250000) {
if(right) xCoor++;
if(left) xCoor--;
if(up) yCoor--;
if(down) yCoor++;
ticks = 185000;
b = new BodyPart(xCoor, yCoor, 20);
snake.add(b);
if(snake.size() > size) {
snake.remove(0);
}
}
}
public void paint(Graphics g) {
g.clearRect(0, 0, WIDTH, HEIGHT);
g.drawString("Score: " + score, 100, 100);
g.setColor(Color.WHITE);
g.setColor(new Color(20, 50, 0));
g.fillRect(0, 0, WIDTH, HEIGHT);
g.setColor(Color.BLACK);
for(int i = 0; i < WIDTH / 20; i++) {
g.drawLine(i * 20, 0, i * 20, HEIGHT);
}
for(int i = 0; i < HEIGHT / 20; i++) {
g.drawLine(0, i * 20, WIDTH, i * 20);
}
for(int i = 0; i < snake.size(); i++) {
snake.get(i).draw(g);
}
for(int i = 0; i < apples.size(); i++) {
apples.get(i).draw(g);
}
}
public void start() {
running = true;
thread = new Thread(this, "Game Loop");
thread.start();
}
public void stop() {
running = false;
try {
thread.join();
} catch (InterruptedException e) {
e.printStackTrace();
}
}
public void run() {
while(running) {
tick();
repaint();
}
}
private class Key implements KeyListener {
public void keyPressed(KeyEvent e) {
int key = e.getKeyCode();
if(key == KeyEvent.VK_RIGHT && !left) {
up = false;
down = false;
right = true;
}
if(key == KeyEvent.VK_LEFT && !right) {
up = false;
down = false;
left = true;
}
if(key == KeyEvent.VK_UP && !down) {
left = false;
right = false;
up = true;
}
if(key == KeyEvent.VK_DOWN && !up) {
left = false;
right = false;
down = true;
}
}
}

The order in which you do things is very important, remember, painting in Swing is like painting on paper, if you paint the text first, then paint over it, it will no longer be visible...
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
g.setColor(new Color(20, 50, 0));
g.fillRect(0, 0, WIDTH, HEIGHT);
g.setColor(Color.BLACK);
for (int i = 0; i < WIDTH / 20; i++) {
g.drawLine(i * 20, 0, i * 20, HEIGHT);
}
for (int i = 0; i < HEIGHT / 20; i++) {
g.drawLine(0, i * 20, WIDTH, i * 20);
}
for (int i = 0; i < snake.size(); i++) {
snake.get(i).draw(g);
}
for (int i = 0; i < apples.size(); i++) {
apples.get(i).draw(g);
}
g.setColor(Color.WHITE);
g.drawString("Score: " + score, 100, 100);
}
Don't override paint, override paintComponent, you've circumvented the painting process, meaning you could end up with all sorts of nasty glitches
Call super.paintComponent
Take a look at Painting in AWT and Swing and Performing Custom Painting for more details about how painting is done.
Swing is also not thread safe and you need to be careful any time you are changing anything that the paint process uses to update the UI, as painting may occur at any time and for any reason.
Consider using a Swing Timer instead of Thread. The timer executes it's tick events within the context of the Event Dispatching Thread, making it safer to update the UI from within. See Creating a GUI With JFC/Swing

You have a few things in the wrong order. When painting, you need to paint in the correct order, otherwise you will paint over the top of other objects.
So, in your code, the first 5 lines of the paint() method should look like this... (note the same code, but a different order)
g.clearRect(0, 0, WIDTH, HEIGHT);
g.setColor(new Color(20, 50, 0));
g.fillRect(0, 0, WIDTH, HEIGHT);
g.setColor(Color.WHITE);
g.drawString("Score: " + score, 100, 100);
You need to paint the background color first. Then you can paint the String on top of it.

Painted rectangles not showing up

I've been trying for quite a while to get this to work and done a lot of research but I can't work out why it's not happening: My end goal is get a grid of x by y green squares, and when you click on a square it changes colour. (this is part of a bigger project)
Now I am aware that this is probably a very inefficient way of doing so, but I've tried different ways and nothing seems to work.
In my Grid class I have this:
squares = new Square[width][height];
for (int i = 0; i < width; i++){
for (int j = 0; j < height; j++){
squares[i][j] = new Square(i,j);
frame.getContentPane().add(squares[i][j]);
}
}
And this is my Square class:
public class Square extends JLabel implements MouseListener{
private int x,y,width,height, mouseX,mouseY;
private Color colour = Color.GREEN;
public Square(int width, int height){
this.x = width*45;
this.y = height*45;
addMouseListener(this);
this.setBounds(x, y, 45, 45);
}
public void paintComponent(Graphics g){
Graphics2D g2 = (Graphics2D) g;
g2.setColor(colour);
g2.fillRect(x, y, 45, 45);
}
#Override
public void mouseClicked(MouseEvent e) {
mouseX = e.getX();
mouseY = e.getY();
if(mouseX > x && mouseX < x+45 && mouseY > y && mouseY < y+45){
if(colour.equals(Color.GREEN)){
colour = Color.RED;
} else{
colour = Color.GREEN;
}
repaint();
}
}
}
However when I run the code, all I see is the first square and the last square; how come?
If you have any tips of how I could have done this far more efficiently, please do tell and criticize this code.

To solve your problem. You need to change your code in some places.
1) You don't need to pass x, y co-ordinates with Square() constructor. Declare empty constructor like this:
public Square() {
addMouseListener(this);
this.setBounds(x, y, 45, 45);
}
2) Set GridLayout to your JFrame.
frame.setLayout(new GridLayout(width, height));
3) Call empty constructor on your loop.
Square[][] squares = new Square[width][height];
for (int i = 0; i < width; i++) {
for (int j = 0; j < height; j++) {
squares[i][j] = new Square();
frame.add(squares[i][j]);
}
}