Java AWT Graphics Class: Making Rows and Columns of Squares - java

I'm using the java.awt graphics class, and I'm trying to make rows and squares.
I can't seem to get the layout of the rows correctly.
I'm trying to code 8 rows with 3 columns each. However, I just get 2 rows with 12 columns.
If somebody can help me to create the outcome that I want, that would be greatly appreciated.
Here's my code:
g.setColor(Color.WHITE);
int x = 70;
int y = 80;
int w = 30;
int h = 35;
for(int row = 0; row < 3; row++) {
for(int col = 0; col < 4; col++) {
g.fillRect( x, y, w, h );
g.fillRect( x, y + h + 20, w, h );
x += w + 15;
}
System.out.println();
}
Here's the output: 2 rows, 12 columns of squares

Beware of how you are updating your position information. For example, you should only be updating the x position in the inner loop and resetting to 0 before entering the inner loop, and the y position should only be updated on each new row.
Alternatively, you could calculate the position directly, based on the row/column index and the row/column height, as demonstrated below.
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Graphics2D;
import javax.swing.JFrame;
import javax.swing.JPanel;
public class Main {
public static void main(String[] args) {
new Main();
}
public Main() {
EventQueue.invokeLater(new Runnable() {
#Override
public void run() {
JFrame frame = new JFrame();
frame.add(new TestPane());
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
});
}
public static class TestPane extends JPanel {
private static int COLUMN_COUNT = 3;
private static int ROW_COUNT = 8;
private static int COLUMN_WIDTH = 30;
private static int ROW_HEIGHT = 35;
public TestPane() {
}
#Override
public Dimension getPreferredSize() {
return new Dimension(3 * COLUMN_WIDTH, 8 * ROW_HEIGHT);
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g.create();
int columnWidth = getWidth() / 3;
int rowHeight = getHeight() / 8;
int x = 0;
int y = 0;
for (int row = 0; row < ROW_COUNT; row++) {
for (int col = 0; col < COLUMN_COUNT ; col++) {
if (col % 2 == 0) {
x = columnWidth * col;
y = rowHeight * row;
g2d.fillRect(x + 2, y + 2, columnWidth - 4, rowHeight - 4);
}
}
}
g2d.dispose();
}
}
}

Related

Java - Hexagon location in grid

Im searching for an algorythem to get the location of a hexagon in a grid.
I found this one but it doesnt seam to work:
for(int i = 0; i < width; i++) {
for(int j = 0; j < height; j++) {
grid[i][j] = new Hexagon(x+(j*((3*Hexagon.S)/2)), y+((j%2)*Hexagon.A)+(2*i*Hexagon.A));
}
}
The output is kind of strange:
output
This is the window-creating class(just a test class):
import java.awt.Container;
import javax.swing.JFrame;
import javax.swing.JPanel;
public class Grid extends JPanel {
private static final long serialVersionUID = 1L;
public static void main(String[] args) {
int width = 2;
int height = 4;
int x = 100;
int y = 100;
Hexagon[][] grid = new Hexagon[width][height];
JFrame f = new JFrame();
Container cp = f.getContentPane();
for(int i = 0; i < width; i++) {
for(int j = 0; j < height; j++) {
grid[i][j] = new Hexagon(x+(j*((3*Hexagon.S)/2)), y+((j%2)*Hexagon.A)+(2*i*Hexagon.A));
cp.add(grid[i][j]);
}
}
f.setLayout(null);
f.setBounds(100, 100, 300, 300);
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setVisible(true);
}
}
The Hexagon.java class:
import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Polygon;
import javax.swing.JButton;
public class Hexagon extends JButton {
public static final int S = 50;
public static final int A = (int) (Math.sqrt(3)*(S/2));
private static final long serialVersionUID = 1L;
private final int x, y;
private final Polygon shape;
public Hexagon(int x, int y) {
this.x = x;
this.y = y;
this.shape = initHexagon();
setSize(2*S, 2*A);
setLocation(x-S, y-A);
setContentAreaFilled(false);
}
private Polygon initHexagon() {
Polygon p = new Polygon();
p.addPoint(x+(S/2), y-A);
p.addPoint(x+S, y);
p.addPoint(x+(S/2), y+A);
p.addPoint(x-(S/2), y+A);
p.addPoint(x-S, y);
p.addPoint(x-(S/2), y-A);
return p;
}
protected void paintComponent(Graphics g) {
g.setColor(Color.BLACK);
g.drawPolygon(this.shape);
}
protected void paintBorder(Graphics g) {
Graphics2D g2 = (Graphics2D) g;
g2.setColor(Color.BLACK);
g2.setStroke(new BasicStroke(4));
g2.drawPolygon(this.shape);
}
public boolean contains(int x, int y) {
return this.shape.contains(x, y);
}
}
As i said, this class worked just fine using non-rectangular shapes.
There was no clipping or such.
You've posted your definition of Hexagon too late, so I copy-pasted a modified version of a similar class from my collection of code snippets.
Here is one way to generate a hexagonal grid:
import java.awt.Container;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JComponent;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Color;
import java.awt.GridLayout;
import java.util.function.*;
public class Hexagons extends JPanel {
private static final long serialVersionUID = 1L;
/** Height of an equilateral triangle with side length = 1 */
private static final double H = Math.sqrt(3) / 2;
static class Hexagon {
final int row;
final int col;
final double sideLength;
public Hexagon(int r, int c, double a) {
this.row = r;
this.col = c;
this.sideLength = a;
}
double getCenterX() {
return 2 * H * sideLength * (col + (row % 2) * 0.5);
}
double getCenterY() {
return 3 * sideLength / 2 * row;
}
void foreachVertex(BiConsumer<Double, Double> f) {
double cx = getCenterX();
double cy = getCenterY();
f.accept(cx + 0, cy + sideLength);
f.accept(cx - H * sideLength, cy + 0.5 * sideLength);
f.accept(cx - H * sideLength, cy - 0.5 * sideLength);
f.accept(cx + 0, cy - sideLength);
f.accept(cx + H * sideLength, cy - 0.5 * sideLength);
f.accept(cx + H * sideLength, cy + 0.5 * sideLength);
}
}
public static void main(String[] args) {
final int width = 50;
final int height = 50;
final Hexagon[][] grid = new Hexagon[height][width];
for(int row = 0; row < height; row++) {
for(int col = 0; col < width; col++) {
grid[row][col] = new Hexagon(row, col, 50);
}
}
JFrame f = new JFrame("Hexagons");
f.getContentPane().setLayout(new GridLayout());
f.getContentPane().add(new JComponent() {
#Override public void paint(Graphics g) {
g.setColor(new Color(0xFF, 0xFF, 0xFF));
g.fillRect(0,0,1000,1000);
g.setColor(new Color(0,0,0));
final int[] xs = new int[6];
final int[] ys = new int[6];
for (Hexagon[] row : grid) {
for (Hexagon h: row) {
final int[] i = {0};
h.foreachVertex((x, y) -> {
xs[i[0]] = (int)((double)x);
ys[i[0]] = (int)((double)y);
i[0]++;
});
g.drawPolygon(xs, ys, 6);
g.drawString(
"(" + h.row + "," + h.col + ")",
(int)(h.getCenterX() - 15),
(int)(h.getCenterY() + 12)
);
}
}
}
});
f.setBounds(0, 0, 500, 500);
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setVisible(true);
try {
Thread.sleep(100);
} catch (Throwable e) {
} finally {
f.repaint();
}
}
}
It produces the following output:
Sorry for the lack of anti-aliasing. A few hints:
Height H of an equilateral triangle with unit side length is sqrt(3) / 2
The six offsets from the center are (0, +1), (H, +1/2), (H, -1/2), (0, -1), (-H, -1/2), (-H, +1/2), everything times side length.
Distance between rows is 1.5, distance between columns is 2 * H (times scaling constant = side length).
Every odd row is shifted by (0, H) (times scaling constant).
The position of (row,col)-th hexagon is (1.5 * row, 2 * H * (col + 0.5 * (row % 2))) (times constant).
If you want to rotate the hexagons such that two of their sides are horizontal, you have to flip rows and columns.

How to set object in center of frame?

I am new with programming. I am not sure how to put an object in the center of a frame. This is how far i got:
public class LetSee extends JPanel {
public void paintComponent(Graphics g) {
int row; // Row number, from 0 to 7
int col; // Column number, from 0 to 7
int x,y; // Top-left corner of square
for ( row = 0; row < 5; row++ ) {
for ( col = 0; col < 5; col++) {
x = col * 60;
y = row * 60;
if ( (row % 2) == (col % 2) )
g.drawRect(x, y, 60, 60);
else
g.drawRect(x, y, 60, 60);
}
} // end for row
}
}
public class LetSeeFrame extends JFrame {
public LetSeeFrame(){
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setSize(1900, 1000);
setVisible(true);
LetSee let = new LetSee();
let.setLayout(new BorderLayout());
add(let,BorderLayout.CENTER);
setLocationRelativeTo(null);
}
public static void main(String[] args) {
LetSeeFrame l = new LetSeeFrame();
}
}
Actually your panel is centered in the frame, but what it draws isn't.
You should make use of the width and the height of the JPanel to center the drawing .
Also put your sizes and numbers into variables, it is less error-prone when you use them several times in your code .
Finally as #MadProgrammer said in the comments :
Don't forget to call super.paintComponent before you doing any custom
painting, strange things will start doing wrong if you don't. Also
paintComponent doesn't need to be public, no one should ever call it
directly
import java.awt.Graphics;
import javax.swing.JPanel;
public class LetSee extends JPanel {
public void paintComponent(final Graphics g) {
super.paintComponent(g);
int row; // Row number, from 0 to 7
int col; // Column number, from 0 to 7
int x, y; // Top-left corner of square
int maxRows = 5;
int maxCols = 5;
int rectWidth = 60;
int rectHeight = 60;
int maxDrawWidth = rectWidth * maxCols;
int maxDrawHeight = rectHeight * maxRows;
// this is for centering :
int baseX = (getWidth() - maxDrawWidth) / 2;
int baseY = (getHeight() - maxDrawHeight) / 2;
for (row = 0; row < maxRows; row++) {
for (col = 0; col < maxCols; col++) {
x = col * rectWidth;
y = row * rectHeight;
if ((row % 2) == (col % 2)) {
g.drawRect(baseX + x, baseY + y, rectWidth, rectHeight);
} else {
g.drawRect(baseX + x, baseY + y, rectWidth, rectHeight);
}
}
} // end for row
}
}

How to draw a wall in paint method based on user input

I fairly new to programming and I have decided to take an intro to java class. I have an assignment where I have to create a wall using a for loop that changes height of the wall based on user input. I think I got most of the code right but I can't seem to connect the user input with the for loop. Any help would be appreciated.
//Package List
import java.awt.*;
import java.applet.*;
import javax.swing.*;
import java.util.*;
import java.awt.event.*;
public class Wall extends JApplet implements ActionListener{
//Component declaration
JLabel directions;
JTextField input = new JTextField( 10 );
private JButton go;
//Variable declaration
int userinput;
//Method declaration
public void init()
{
getContentPane().setBackground(new Color (128, 128, 128));//Changes backround of JApplet to black
//Set JButton and JLabel
setLayout (new FlowLayout( ));
directions = new JLabel("Enter in any number between 1 and 20 and then press Enter on your keyboard.");
go = new JButton( "Go!" );
go.setBackground( Color.GREEN );
go.setFocusPainted( false );
go.addActionListener( this );
add (directions );
add (input);
add( go );
}
public void actionPerformed( ActionEvent ae )
{
String text = input.getText();
userinput = Integer.parseInt( text );
repaint();
}
//Method declaration
public void paint(Graphics g)
{
super.paint(g);
int startX = 50;
int startY = 650;
int width = 50;
int height = 20;
int spacing = 2;
int xOffset = 0;
for (int row = 0; row < userinput; row++) {
int y = startY + (row * ( height + spacing));
if ( row % 2 == 0) {
xOffset = width / 2;
} else {
xOffset = 0;
}
for (int col = 0; col < 8; col++) {
int x = xOffset + (startX + (col * (width + spacing)));
System.out.println(x + "x" + y);
g.setColor( Color.RED );
g.fillRect( x, y, width, height);
}
}
}
}
Basically, your code works, but your starty is to large and seems to be painting off the screen.
Generally, you should avoid overriding paint of top level containers like JApplet (why are using applets?!) and instead, use a component like JPanel instead.
A few reasons for this, but the one you will run into is that paint can paint over the child components, BUT, because of the way painting works, those child components, when updated, can paint over what you've painted ... which altogether, is just weird for the user.
Instead, separate you code into logic units, each unit should be responsible for a single unit (of logic) work
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JApplet;
import javax.swing.JButton;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;
public class Wall extends JApplet implements ActionListener {
//Component declaration
JLabel directions;
JTextField input = new JTextField(10);
private JButton go;
private WallPanel wallPanel;
//Method declaration
public void init() {
getContentPane().setBackground(new Color(128, 128, 128));//Changes backround of JApplet to black
//Set JButton and JLabel
setLayout(new BorderLayout());
JPanel controls = new JPanel(new GridBagLayout());
GridBagConstraints gbc = new GridBagConstraints();
gbc.gridwidth = GridBagConstraints.REMAINDER;
directions = new JLabel("Enter in any number between 1 and 20 and then press Enter on your keyboard.");
go = new JButton("Go!");
go.setBackground(Color.GREEN);
go.setFocusPainted(false);
go.addActionListener(this);
controls.add(directions, gbc);
controls.add(input, gbc);
controls.add(go, gbc);
wallPanel = new WallPanel();
add(controls, BorderLayout.NORTH);
add(wallPanel);
}
public void actionPerformed(ActionEvent ae) {
String text = input.getText();
wallPanel.setRowCount(Integer.parseInt(text));
repaint();
}
public class WallPanel extends JPanel {
private int rowCount;
public void setRowCount(int rowCount) {
this.rowCount = rowCount;
repaint();
}
public int getRowCount() {
return rowCount;
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
int startX = 50;
int startY = 0;
int width = 50;
int height = 20;
int spacing = 2;
int xOffset = 0;
for (int row = 0; row < getRowCount(); row++) {
int y = startY + (row * (height + spacing));
if (row % 2 == 0) {
xOffset = width / 2;
} else {
xOffset = 0;
}
for (int col = 0; col < 8; col++) {
int x = xOffset + (startX + (col * (width + spacing)));
g.setColor(Color.RED);
g.fillRect(x, y, width, height);
}
}
}
}
}
So, basically, all I've done here is move the "wall painting" to it's own component/class and provided a simple setter (and getter) for changing the number of rows

Chessboard game java

the code im trying to manipulate is the paint method... i'm trying to get it to show a chess board by filling in the squares evenly, but when i run the programme and move the slider to a even number it gives me one column with black one colum with empty etc.
when at an odd number it is the chess board
import java.awt.*;
import javax.swing.*;
import java.awt.event.*;
import javax.swing.event.*;
public class Blobs extends JFrame implements ActionListener, ChangeListener {
private MyCanvas canvas = new MyCanvas();
private JSlider sizeSl = new JSlider(0, 20, 0);
private JButton reset = new JButton("RESET");
private int size = 0; // number of lines to draw
public static void main(String[] args) {
new Blobs();
}
public Blobs() {
setLayout(new BorderLayout());
setSize(254, 352);
setTitle("Blobs (nested for)");
sizeSl.setMajorTickSpacing(5);
sizeSl.setMinorTickSpacing(1);
sizeSl.setPaintTicks(true);
sizeSl.setPaintLabels(true);
add("North", sizeSl);
sizeSl.addChangeListener(this);
add("Center", canvas);
JPanel bottom = new JPanel();
bottom.add(reset);
reset.addActionListener(this);
add("South", bottom);
setResizable(false);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setVisible(true);
}
public void actionPerformed(ActionEvent e) {
size = 0;
sizeSl.setValue(0);
canvas.repaint();
}
public void stateChanged(ChangeEvent e) {
size = sizeSl.getValue();
canvas.repaint();
}
private class MyCanvas extends Canvas {
#Override
public void paint(Graphics g) {
int x, y;
int n = 0;
for (int i = 0; i < size; i++) {
//n = 1 + i;
for (int j = 0; j < size; j++) {
n++;
x = 20 + 10 * i;
y = 20 + 10 * j;
//g.fillOval(x, y, 10, 10);
g.drawRect(x, y, 10, 10);
if (n % 2 == 0) {
g.fillRect(x, y, 10, 10);
}
}
}
}
}
}
The problem is that you count the number of drawn rectangles with n. This does not work for odd numbers. Easy fix:
for (int i = 0; i < size; i++) {
n = (i % 2);
This resets your counter n for each row alternately to 0 and 1.
If you lay out sequentially the squares of an NxN chess board with N being even, every N squares you'll get two equal ones in a row.
Therefore, if size is even you must adjust your method accordingly:
for (int i = 0; i < size; i++) {
n += size % 2 + 1;
for (int j = 0; j < size; j++) {
n++;
//...

Creating a multicolored board

I am to create a multicolored board, starting with the first square as black, then blue, red, and yellow, the squares are being filled diagonally and there are no empty colored squares. I know my algorithm is wrong, but I have not a clue as how to fix it.
Currently, my code prints out like this
import javax.swing.JFrame;
import javax.swing.JPanel;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Insets;
public class Grid extends JPanel {
private static final long serialVersionUID = 1L;
public static final int GRID_COUNT = 8;
private Color[] colors = { Color.black, Color.yellow, Color.red,
Color.blue };
private int colorIndex = 0;
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D graphics = (Graphics2D) g;
graphics.setColor(Color.black);
Dimension size = getSize();
Insets insets = getInsets();
int w = size.width - insets.left - insets.right;
int h = size.height - insets.top - insets.bottom;
int sqrWidth = (int)((double)w / GRID_COUNT);
int sqrHeight = (int)((double)h / GRID_COUNT);
for (int row = 0; row < GRID_COUNT; row++) {
for (int col = 0; col < GRID_COUNT; col++) {
int x = (int) (row * (double) w / GRID_COUNT);
int y = (int) (col * (double) h / GRID_COUNT);
if ((row + col) % 2 == 0) {
int colorIndex = (row + col) % 4;
graphics.fillRect(x, y, sqrWidth, sqrHeight);
graphics.setColor(colors[colorIndex]);
colorIndex = (colorIndex + 1) % colors.length;
}
}
public static void main(String[] args) {
Grid grid = new Grid();
grid.setPreferredSize(new Dimension(400, 400));
JFrame frame = new JFrame("Grid");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(grid);
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
}
Let's look at the pattern:
Bk Gr Pn Bl
Gr Pn Bl Bk
Pn Bl Bk Gr
Bl Bk Gr Pn
But to make it simpler, let's call Bk 0, Gr 1, Pn 2 and Bl 3 to get:
0 1 2 3
1 2 3 0
2 3 0 1
3 0 1 2
This pattern is easily produced by calculating tile[x][y] = (x + y) % 4 for every tile, and using a lookup table to convert these numbers to colours (Either use an enumeration, or instead of assigning an integer value to the tile use the integer as a look-up in a table of colours and assign the colour to the tile)
If you've never seen it before, % 4 means 'divide by 4 and return the REMAINDER of the division'.
There are two mistake, I saw, first mistake is your pattern, you want to go from black, "then blue, red, and yellow" but you did
private Color[] colors = { Color.black, Color.yellow, Color.red, Color.blue };
change this one
and second mistake is that your program is counting evenly, means it is filling rectangle evenly ,
2 , 4 , 6, 8..
make your program will go on every single rectangle, which is in grey color...
I've run through the code quickly and there are number of little things which seem confusing to me..
Your color calculation is been thrown off because your original code was skipping every second cell...
if ((row + col) % 2 == 0) {
Which meant that when you tried to determine the color, you weren't getting the color you were expecting.
You were also setting the color of the cell within the row loop and not in the column loop, which seems weird to me...
(I added text in to for debugging, feel free to get rid of it)
import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.FontMetrics;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Insets;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
public class Grid {
private static final long serialVersionUID = 1L;
public static final int GRID_COUNT = 8;
private Color[] colors = {Color.black, Color.yellow, Color.red,
Color.blue};
public static void main(String[] args) {
new Grid();
}
public Grid() {
EventQueue.invokeLater(new Runnable() {
#Override
public void run() {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
}
JFrame frame = new JFrame("Grid");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(new GridPane());
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
});
}
public class GridPane extends JPanel {
#Override
public Dimension getPreferredSize() {
return new Dimension(200, 200);
}
#Override
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D graphics = (Graphics2D) g;
graphics.setColor(Color.black);
Dimension size = getSize();
Insets insets = getInsets();
int w = size.width - insets.left - insets.right;
int h = size.height - insets.top - insets.bottom;
FontMetrics fm = graphics.getFontMetrics();
int sqrWidth = (int) ((double) w / GRID_COUNT);
int sqrHeight = (int) ((double) h / GRID_COUNT);
int colorIndex = 0;
for (int row = 0; row < GRID_COUNT; row++) {
for (int col = 0; col < GRID_COUNT; col++) {
int x = (int) (col * sqrWidth);
int y = (int) (row * sqrHeight);
colorIndex = (row + col) % 4;
graphics.setColor(colors[colorIndex]);
graphics.fillRect(x, y, sqrWidth, sqrHeight);
String text = row + "/" + col;
graphics.setColor(Color.WHITE);
graphics.drawString(
text,
x + ((sqrWidth - fm.stringWidth(text)) / 2),
y + ((sqrHeight - fm.getHeight()) / 2) + fm.getAscent());
}
}
}
}
}

Categories

Resources