Thread: Creating a custom panel:

I need to create a custom panel that displays X,0, or nothing, randomly.
It is supposed to be something like a tic tac toe board. The only thing is, when you open it it must randomly place the x's, 0's, or blank spaces, and when the screen is resized by pulling on the corner, or elsewhere, it must randomly change the figures in its grid.

I can not figure out how to display the images randomly. I have no idea what I'm missing, it just escapes me.

I will post what I have thus far and kindly request assistance. What I need help with is randomly generating the figures positions, and making it repaint when resized or reopened.

Thanks, here is what I have thus far:

import java.awt.Color;
import java.awt.Graphics;
import java.awt.GridLayout;
import javax.swing.JFrame;
import javax.swing.JPanel;
 
public class Exercise15_07 extends JFrame {
 
    public Exercise15_07() {
        add(new ticTacToeBoard());
 
 
    }
 
    public static void main(String[] args) {
        Exercise15_07 ticTac = new Exercise15_07();
        ticTac.setVisible(true);
        ticTac.setSize(200, 200);
        ticTac.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        ticTac.setLocationRelativeTo(null);
        ticTac.setTitle("Tic Tac Toe");
    }
}
 
class ticTacToeBoard extends JPanel {
 
    JPanel frame = new JPanel(new GridLayout(3, 3));
 
    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        g.drawLine(2, 2, 30, 30);
        g.drawLine(30, 2, 2, 30);
 
 
 
    }
}

how to display the images randomly

Are you asking how to choose which image to display?
See the Random class. It has methods to return random values that you could use to choose which image to display.

help with is randomly generating the figures positions

Again you can use the methods of the Random class to return values for positioning the figures.
You need to get the range of possible values and use that with the Random class methods to generate x,y values in the range of values you want.

Ok, so what do you mean by "randomly generating the figures positions"? Do you mean that you want them in random places? If so, have a look at how you draw your lines. Imagine your Xs and Os as having a box around them, where a coordinate would specify the the top-left corner of the box. Now, if we randomly generate a coordinate for that top-left corner, we can randomly place our box.
So, to get a random number, you can use the Math.random() method. This method returns a random double between 0 and 1 inclusively. But we want to randomly get a number between 0 and 200 inclusively, because 200 is our frame size. So, we multiply the random number by 200. So, you would want to code:

double randomNumber = Math.random()*200;

Do that to get a random x value and to get a random y value. Now that we have our coordinate for our box, we need to draw the X or O by offsetting the x and y coordinates for the start and end of your lines from the coordinate of our box. So we need a formula to do that. Now, according to your current setup, we know that the ending x coordinate and the ending y coordinate for the first line is 28 units more than the starting x and y coordinates. For the second line, the starting x coordinate is 28 units more than the ending x coordinate and the ending y coordinate is 28 units more than the starting y coordinate. So, provided you have generated a random number for x (and placed it in an int value named x) and a random number for y (and placed it in an int value named y), your code would look like this:

g.drawLine(x, y, x+28, y+28);
g.drawLine(x+28, y, x, y+28);

Would would go about the same sort of procedure for your 0s.
Does that make sense?

Originally Posted by Norm

Are you asking how to choose which image to display?
See the Random class. It has methods to return random values that you could use to choose which image to display.


Again you can use the methods of the Random class to return values for positioning the figures.
You need to get the range of possible values and use that with the Random class methods to generate x,y values in the range of values you want.

Not exactly, what I am trying to figure out is: I am using a 3 x 3 grid and each time there may be something like this: x0x or 00x
xx0 0x0
0x x0
I could get the coordinates of each spot and draw the images on there but if I want them placed randomly then how do I get them in the correct position? Earlier I had it where it painted an 0 with an x through it in every spot. I used: int fig1[] = new int[3]
for (int j = 0; j < 3; j++) {

int fig1 = (int)(Math.random() * 2);
}

Ha, that may have been part of the problem I don't think that I had an image for the "blank" space. Regardless though, I was using the ImageIcon earlier and had the numbers stored in an array so I had something like this: ImageIcon card1 = new ImageIcon(fig[0]);

I am writing this while trying to remember but even as I do so I am seeing that I had more errors than I had thought.

Let me give this another shot, I have changed so many things that I need to just start over.

Ok, we'll want until you get a new design.

OK, I can't get any further. I have written and erased and re-written my code over and over and I can't seem to figure it out, or even get to the point I was at earlier.

I think I am getting hung up on the idea of doing in as an ImageIcon because in one of the later problems in my book it asks us to redo the program in a JPanel instead of as an ImageIcon.

Please help

If getting a image is a problem right now, leave it until later to solve.
Use something simple to get the logic working for now. Something like: drawString(x,y, "X") for example.

Which problem are you working on? One at a time is better.

How would I store the lines

You compute the x,y of the ends of the lines and save them for the paint method to use.

well if I draw a line by its coordinates as: g.drawLine(x, y, x, y,);
then how can I store it as an object or something so that I can randomly paint it in any of the positions in a 3 x 3 grid?

or is this a terrible way of attempting to do what I want?

how can I store it as an object or something so that I can randomly paint it

Which problem is this one? I thought we were working on how to draw the lines for the 3x3 grid.
What goes in the squares of the grid was going to be a simple "X" or "O" drawn by drawString().

Which problem do you want to work on?

No, I am sorry if I was misleading. I know how to draw lines for a 3 x 3 grid, I already had to write a program like that for my first assignment in GUI. The program description does not even call for lines in the grid. I am trying to get the images, the 'x', 'o', or ' ' placed randomly in the grid. Or when I said I wanted a way to store the letters it was only so I could then get them into the grid. I am probably trying to write this program all wrong...

Ok, drawing the lines and repositioning them when the component changes size is solved.
Now you want to draw an image in one of the nine squares created by the lines.
Is that the problem?
A design: When the positions for the lines are computed, also compute the center of each of the nine squares and save it with the size of the square in a 9 element array. Need new class to save the x,y and size.
To chose one at random, generate a random number from 0 to 8 as index to the array.
The paint method takes that index into the array and draws the figure centered on the location.

OK, I get what you are saying to do. However, since I don't actually need to draw the lines that would separate the grid into 3 x 3, should I still just compute the centers of where the 9 boxes would be and then save that to an array.

Now, since I am going to try and put these coordinates in an array wouldn't I also need two two dimensional arrays for the x, y of the first line and the x, y of the second line to create a cross? Or is there a way to draw a cross and a circle just from their center coordinates? Then for the circles I would need just an x, y for the starting position and then a width and a height. So I could just put those coordinates in the 2d array also?


But if I use the random methods to get the coordinates couldn't I potentially get 4 coordinates that wouldn't draw a cross, but something like two lines parallel or something?

need two two dimensional arrays

Use classes to hold the properties of the figures vs using arrays.

way to draw a cross and a circle just from their center coordinates

If the center coords require too much programming, then save the x,y for the upper left corner vs the center.

if I use the random methods to get the coordinates

What is random about drawing a circle or an X at a given x,y location?
I thought the random part was in choosing one of 9 locations to do the drawing.

I just don't get it, I guess.

I don't see how to use a class to save the coordinates and then use that in paintComponent.

// A class to save the starting and ending x,y coords for a line

class LineCoords {
 int firstX;
 int firstY;
 int endX;
 int endY;
  // draw the above line
 public void drawLine(Graphics g) {
    g.drawLine(firstX, firstY, endX, endY);
 }
}

OK, I see but how do I get it to be random whether it will draw a line or a circle?

Look at the Random class. It has many methods to choose from.
Get the System time and test if its odd or even.

Cross posted
Creating a custom panel: - Java Forums

db