# Create random circles in a grid

Hello,

I’m fairly new to this and for a game I’m trying to create red circles randomly in a grid with the amount that is given in the variable.
For example I have made a grid with this:

``````void setup() {
size (1200, 800);
}

void draw() {
drawgrid();
}

void drawgrid() {
int cols = 60;
int rows = 40;
int scale = 18;
for (int i = 0; i < cols; i++) {
for (int j = 0; j < rows; j++) {
int x = i * scale;
int y = j * scale;
stroke(0);
rect(x, y, scale, scale);
}
}
}
``````

So now I have a blue grid that is 60 wide and 40 long with 18px each square and I want red circles randomly drawn in it those are also 18px big so they almost fill up the whole square.
My initial value is:

``````int drawamountofcircles = 10;
``````

This value can be set ofcourse during the starting screen but that is not important for now.

And now I don’t know how to actually create the circles within the borders and squares of the grid random.

Any help with this? Thanks!

1 Like

Start by drawing a red circle on EVERY square.

Then add a variable that counts (and keeps track of!) how many circles you HAVE drawn.

Then add a conditional statement that draws a circle only if you haven’t drawn enough circles.

Part of you final code will look something like this:

``````// Maybe draw a circle?
if( num_circles < ??? ){
fill( ???, ???, ??? );
ellipse( ???, ???, ???, ??? );
num_circles += ???;
}
``````
1 Like

for knowing where you set a circle need some memory,

• minimal boolean[][] array,
• max a class.

and the grid position [cols][rows] to set
could find by the random function.

``````int cols = 60, rows = 40, scale = 18;
boolean[][] setc = new boolean[cols][rows];

void setup() {
size (1200, 800);
ellipseMode(CORNER);
preset();
setrandom();
}

void draw() {
drawgrid();
}

void preset() {
for (int i = 0; i < cols; i++)
for (int j = 0; j < rows; j++)
setc[i][j] = false;
}

void setrandom() {
int i = (int)random(cols);
int j = (int)random(rows);
setc[i][j] = true;
}

void drawgrid() {
for (int i = 0; i < cols; i++) {
for (int j = 0; j < rows; j++) {
int x = i * scale;
int y = j * scale;
stroke(0);
rect(x, y, scale, scale);
fill(200, 0, 0);
noStroke();
if ( setc[i][j] ) circle(x, y, scale);
}
}
}

``````

here a different approach:
Creating Snake Game ,

1 Like

Hey thanks for the base.
What is preset() used for? Because the same code works without this one.

Also how do I make several of them using a variable?
I’m currently trying this

``````void drawmines() {
for (int i = 0; i < drawmines; i++) {
setrandom();
}
}
`````` This is how my start menu looks like, I can increase the amount of mines drawn with the right one and decrease the mines with the left one.
However whenever I go to the main game it doesn’t use the value given in the start menu but takes the value set in the variable when running this program.

-a- preset() just a basic loop over all of the grid length
yes, default of a variable is 0 ( or boolean false )
why i made it ? ++ to show you ++ as a future reset of the array

-b- yes drawmines might work, problem with random is that you might hit a existing one.

-c- preset from a start menu

• there you set drawmines variable
• i miss where you go to the main game? by button? keyboard?
• there / before you call main page, must run the
``````drawmines();
``````

looks like you use 2 separate variables, so you miss to set drawmines
with the value of startpage mines.
OR you miss to make drawmines a global variable.

if you now can not repair your code please post it (complete so we can run it )

1 Like

b. Is there a way to prevent that? Random seems the easiest way to use in this situation.
Do i have to make another If statement that prevents this?
However this is not a big issue at the moment as I am capping it at 10 mines drawn.

My code is fairly long for this project as it has not been optimized and still uses a lot of hard values.
The game goes to the main game by button during the start menu.
Frame

``````final int GAMEBEGIN = 1;
final int GAMEPLAYING = 2;
final int GAME_END = 3;
int gamestatus = GAMEBEGIN;

void setup() {
size (1200, 800);
ellipseMode(CORNER);
drawmines();
set_treasures();
}

void draw() {
gamestatus();
}

void gamestatus() {
if (gamestatus == GAMEBEGIN) {
gamestart();
} else if (gamestatus == GAMEPLAYING) {
gameplaying();
} else if (gamestatus == GAME_END) {
//game_end();
}
}

void mousePressed() {
to_maingame();
}

void keyPressed() {
movementdiver();
}
``````

``````int mines = 1;
int treasures = 1;
final int yloc = 200;
final int buttonsize = 50;

void gamestart() {
background(255);
drawsquares();
drawtext();
drawbuttons();
}

void drawsquares() {
int xrectsize = 150;
int yrectsize = 100;
int ysquare = height/6;
float xsquare = width / 1.8;
fill(#1144ff);
drawsquare(width / 2.5, height - 50, xrectsize, yrectsize);
drawsquare(xsquare, ysquare, xrectsize + 50, yrectsize - 50);
drawsquare(xsquare / 2, ysquare, xrectsize + 50, yrectsize - 50);
}

void drawsquare(float xlocation, int location, int xsize, int ysize) {
rect(xlocation, location, xsize, ysize);
}

void drawtext() {
int textheight = height/5;
fill(0);
textSize(18);
drawtext("Start game", width / 2.35, height - 20);
drawtext("Diving for treasure", width/2.5, height/10);
drawtext("Mines = " + mines, width / 3.4, textheight);
drawtext("Treasures = " + treasures, width / 1.78, textheight);
}

void drawtext(String text, float xtext, float ytext) {
text(text, xtext, ytext);
}

void drawbuttons() {
fill(0);
drawbutton(690, yloc, buttonsize);
drawbutton(790, yloc, buttonsize);
drawbutton(360, yloc, buttonsize);
drawbutton(460, yloc, buttonsize);
}

void drawbutton(int xloc, int yloc, int buttonsize) {
rect(xloc, yloc, buttonsize, buttonsize);
}

if (mouseX > 360 && mouseX < 360 + buttonsize && mouseY > yloc && mouseY < yloc + buttonsize) {
mines = mines - 1;
}
if (mouseX > 460 && mouseX < 460 + buttonsize && mouseY > yloc && mouseY < yloc + buttonsize) {
mines = mines + 1;
}
if (mines < 0) {
mines = 0;
}
if (mines > 10) {
mines = 10;
}
}

if (mouseX > 690 && mouseX < 690 + buttonsize && mouseY > yloc && mouseY < yloc + buttonsize) {
treasures = treasures - 1;
}
if (mouseX > 790 && mouseX < 790 + buttonsize && mouseY > yloc && mouseY < yloc + buttonsize) {
treasures = treasures + 1;
}
if (treasures < 0) {
treasures = 0;
}
if (treasures > 10) {
treasures = 10;
}
}

void to_maingame() {
if (mouseX > width / 2.5 && mouseX < width / 1.8 + 150 && mouseY > height - 50 && mouseY < (height - 50) + 100 ) {
gamestatus = GAMEPLAYING;
}
}
``````

Main game

``````int xdiverloc = 0;
int ydiverloc = 0;
int score = 0;
int life = 3;
final int diversize = 18;
int cols = 60;
int rows = 40;
int scale = 18;
boolean[][] mineArr = new boolean[cols][rows];
boolean[][] treasureArr = new boolean[cols][rows];

void gameplaying() {
background(255);
drawgrid();
drawdiver();
drawscore();
borders();
}

void setmines() {
int i = (int)random(cols);
int j = (int)random(rows);
mineArr[i][j] = true;
}

void set_treasures() {
int i = (int)random(cols);
int j = (int)random(rows);
treasureArr[i][j] = true;
}

void drawgrid() {
for (int i = 0; i < cols; i++) {
for (int j = 0; j < rows; j++) {
int x = i * scale;
int y = j * scale;
noStroke();
rect(x, y, scale, scale);
fill(255, 0, 0);
if ( mineArr[i][j] ) {
circle(x, y, scale);
}
fill(0, 0, 255);
if ( treasureArr[i][j] ) {
circle (x, y, scale);
}
}
}
}

void drawdiver() {
fill(0);
ellipse(xdiverloc, ydiverloc, diversize, diversize);
}

void movementdiver() {
if (key == CODED) {
if (keyCode == DOWN) {
ydiverloc = ydiverloc + 18;
}
}
if (key == CODED) {
if (keyCode == RIGHT) {
xdiverloc = xdiverloc + 18;
}
}
if (key == CODED) {
if (keyCode == LEFT) {
xdiverloc = xdiverloc - 18;
}
}
if (key == CODED) {
if (keyCode == UP) {
ydiverloc = ydiverloc - 18;
}
}
if (key == ' ') {
}
}

void borders() {
if (xdiverloc < width - width) {
xdiverloc = width - width;
}
if (ydiverloc < height - height) {
ydiverloc = height - height;
}
if (xdiverloc > width - 138) {
xdiverloc = width - 138;
}
if (ydiverloc > height - 98) {
ydiverloc = height - 98;
}
}

void drawscore() {
fill(0);
text("Score = " + score, 20, height / 1.05);
text("Levens = " + life, 120, height / 1.05);
}

void drawmines() {
for (int i = 0; i < mines; i++) {
setmines();
}
}
``````
1 Like

in case you have a list ( like 60 * 40 positions )
or just 10 songs
and you want play that 10 songs in a different sequence / like a music-player would do
you can use: a shuffled sequence:

``````int many = 10;
IntList seq = new IntList(many);
int current=0;

void preset() {
for (int i = 0; i<many; i++) seq.append(i);
seq.shuffle();
for (int i = 0; i<many; i++) println(" i "+i+" "+seq.get(i));
}

void setup() {
preset();
}

void draw() {
}

void keyPressed() {
current++;
if ( current >= many) {
current =0;
seq.shuffle();             //  optional reshuffle
}
println(" current "+current+" "+seq.get(current));
}

``````

( sorry not looked your code, later … )

This doesn’t work for mine project.
I have a variable that I can change during the start menu that determines how many mines will be drawn.
It can vary from 0 to 10, If set to 0 It will drawn none and if set to 5 it will drawn for example 5.

However my issue at the moment right now is that I can’t set the mines in the start menu because it keeps the value that is given before running the program.
E.G : Mines is set as int mines = 1
I use a - and + button,

``````if (mouseX > 360 && mouseX < 360 + buttonsize && mouseY > yloc && mouseY < yloc + buttonsize) {
mines = mines - 1;
}
if (mouseX > 460 && mouseX < 460 + buttonsize && mouseY > yloc && mouseY < yloc + buttonsize) {
mines = mines + 1;
}
``````

This is how my start menu looks (Treasures is not important for now). I have for example added mines up to 5 with the button as a test however when I go to the next screen it still draw 1 red circles instead of 5.

well;

``````void to_maingame() {
if (mouseX > width / 2.5 && mouseX < width / 1.8 + 150 && mouseY > height - 50 && mouseY < (height - 50) + 100 ) {
drawmines();
gamestatus = GAMEPLAYING;
}
}

``````

might give you more mines, at the moment when you go from start to game screen
must use the new set of mines

you used lots of functions,
but the very much needed
RECT BUTTON MOUSE OVER function is missing!

``````boolean over( int x, int y, int w, int h ) {
return ( mouseX > x & mouseX < x + w &  mouseY > y & mouseY < y + h ) ;
}

``````

Thanks!
Calling the function in to_maingame seems to fix the issue.
However you told me that I missed a function but I can’t see where it should be used?
Can you expand further on this boolean? As I cannot see why I am missing it.

you have 5 hard coded buttons in the start screen.
and 5 mouse over codes where that little boolean function
could help to make it readable

esp if you want to work more with own buttons
better use button variables ( later array or class )
and button function
and button mouse over

``````// using a function for the button and one for mouse over:
// please see how little change needed to make (2) one more button

int x1 = 100, y1 = 100, w1 =80, h1 =30;
boolean sel1 = false;
String text1 = "text1";

int x2 = x1, y2 = y1+h1+10, w2 =w1, h2 =h1; //_________________ (2)
boolean sel2 = false; //_______________________________________ (2)
String text2 = "text2"; //_____________________________________ (2)

void setup() {
size(300,300);
strokeWeight(3);
textSize(20);
}

void draw() {
background(200, 200, 0);
myButton(x1, y1, w1, h1, sel1, text1);
myButton(x2, y2, w2, h2, sel2, text2); //____________________ (2)
}

void keyPressed() {
}

void mousePressed() {
if ( over(x1, y1, w1, h1) ) sel1 = ! sel1;            // button 1 action
if ( over(x2, y2, w2, h2) ) sel2 = ! sel2;            // button 2 action //_ (2)
}

void myButton(int x, int y, int w, int h, boolean sel, String atext) {
if ( sel )               fill(0, 200, 0);
else                     fill(0, 0, 200);
strokeWeight(3);
if ( over(x, y, w, h) )  stroke(200, 0, 200);
else                     stroke(0, 200, 200);
rect(x, y, w, h);
noStroke();
fill(200);
text(atext, x+10, y+h-10);
}

boolean over(int x, int y, int w, int h) {
return ( mouseX > x & mouseX < x + w &  mouseY > y & mouseY < y + h ) ;
}

``````
1 Like

Big thanks for the explanation.

I have followed your explanation and used what you told.

But how do I know the location of the red circles with this way of creating them?
Because everytime when my diver steps on the red circle they lose a health.
Should it be something like

``````If (xdiverlocation == ??? && ydiverlocation == ??? ) {
life -= 1;
}
``````

I don’t know how to find the location of the red circles that should be in the ???.

not sure whats your current status?
ref to your first code: test

``````int cols = 60;
int rows = 40;

boolean[][] mineArr = new boolean[cols][rows];

void reset(){
for (int i = 0; i < cols; i++) {
for (int j = 0; j < rows; j++) {
mineArr[i][j] = false;
}
}
}

void setmine() {
int i = (int)random(cols);
int j = (int)random(rows);
mineArr[i][j] = true;
}

void checkmine() {
for (int i = 0; i < cols; i++) {
for (int j = 0; j < rows; j++) {
if ( mineArr[i][j] ) {
println("mine at i: "+i+", j: "+j);
// do what ever you want do here
}
}
}
}

void setup() {
reset();
setmine();
checkmine();
}

``````

using the seq list:

``````int mines = 7;

int cols = 60;
int rows = 40;

int many = cols*rows;
IntList seq = new IntList(many);
int current=0;

void preset() {
for (int i = 0; i<many; i++) seq.append(i);
seq.shuffle();
// for (int i = 0; i<many; i++) println(" i "+i+" "+seq.get(i));
}

boolean[][] mineArr = new boolean[cols][rows];

void reset() {
for (int i = 0; i < cols; i++) {
for (int j = 0; j < rows; j++) {
mineArr[i][j] = false;
}
}
}

void setmine(int rec) {
for (int i = 0; i < cols; i++) {
for (int j = 0; j < rows; j++) {
if ( seq.get(j+i*rows) == rec ) mineArr[i][j] = true;
}
}
}

void setmanymines(int mine) {
for ( int i = 0; i < mine; i++ ) setmine(i);
}

void checkmine() {
for (int i = 0; i < cols; i++) {
for (int j = 0; j < rows; j++) {
if ( mineArr[i][j] ) {
println("mine at i: "+i+", j: "+j);
// do what ever you want do here
}
}
}
}

void setup() {
reset();  //_____________________________ create mine array empty
preset(); //_____________________________ create a shuffled list
setmanymines(mines); //__________________ set mines
checkmine(); //__________________________ check what is set
}

``````

I currently have this
Mainframe

``````final int GAMESTART = 1;
final int GAMEPLAYING = 2;
final int GAME_END = 3;
int gamestatus = GAMESTART;
final int SCREEN_HEIGHT = 800;
final int SCREEN_WIDTH = 1200;

void settings() {
size ( SCREEN_WIDTH, SCREEN_HEIGHT);
}

void setup() {
ellipseMode(CORNER);
}

void draw() {
gamestatus();
}

void gamestatus() {
if (gamestatus == GAMESTART) {
} else if (gamestatus == GAMEPLAYING) {
gamemainscreen();
} else if (gamestatus == GAME_END) {
//game_endscreen();
}
}

void mousePressed() {
to_maingame();
}

void keyPressed() {
movementdiver();
}
``````

No big changes here except for the size removal from setup and adding it into settings.

``````final int YLOC_BUTTON = 200;
final int BUTTONSIZE = 50;
final float XLOC_BUTTON1 = SCREEN_WIDTH / 1.75;
final float XLOC_BUTTON2 = SCREEN_WIDTH / 1.5;
final float XLOC_BUTTON3 = SCREEN_WIDTH / 2.55;
final float XLOC_BUTTON4 = SCREEN_WIDTH / 3.4;
final int XRECTSIZE= 150;
final int YRECTSIZE = 100;
int amountmines = 1;
int amount_treasures = 1;
PImage photo;

//photo.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
//image(photo, 0, 0);
drawsquares();
drawbuttons();
drawtexts();
}

void drawsquares() {
int ysquare = height/6;
float xsquare = width / 1.8;
fill(#1144ff);
drawsquare(width / 2.3, height - 50, XRECTSIZE, YRECTSIZE);
drawsquare(xsquare, ysquare, XRECTSIZE + 50, YRECTSIZE - 50);
drawsquare(xsquare / 2, ysquare, XRECTSIZE + 50, YRECTSIZE - 50);
}

void drawsquare(float xloc, int yloc, int xsize, int ysize) {
rect(xloc, yloc, xsize, ysize);
}

void drawtexts() {
int textheight = height/5;
final float YTEXTLOC = height / 2.9;
final float XTEXTLOC = SCREEN_WIDTH / 1.71;
fill(0);
textSize(18);
drawtext("Start game", width / 2.17, height - 20);
drawtext("Diving for treasure", width/2.35, height/10);
drawtext("Mines = " + amountmines, width / 3.2, textheight);
drawtext("Treasures = " + amount_treasures, SCREEN_WIDTH / 1.7, textheight);
fill(0);
textSize(30);
drawtext("-", XTEXTLOC, YTEXTLOC);
drawtext("+", XTEXTLOC / 1.45, YTEXTLOC);
drawtext("+", XTEXTLOC * 1.16, YTEXTLOC);
drawtext("-", XTEXTLOC / 1.9, YTEXTLOC);
}

void drawtext(String text, float xtext, float ytext) {
text(text, xtext, ytext);
}

void drawbuttons() {
fill(0);
drawbutton(XLOC_BUTTON1, YLOC_BUTTON, BUTTONSIZE);
drawbutton(XLOC_BUTTON2, YLOC_BUTTON, BUTTONSIZE);
drawbutton(XLOC_BUTTON3, YLOC_BUTTON, BUTTONSIZE);
drawbutton(XLOC_BUTTON4, YLOC_BUTTON, BUTTONSIZE);
}

void drawbutton(float xloc, int yloc, int buttonsize) {
rect(xloc, yloc, buttonsize, buttonsize);
}

if (over(XLOC_BUTTON4, YLOC_BUTTON, BUTTONSIZE, BUTTONSIZE)) {
amountmines = amountmines - 1;
}
if (over(XLOC_BUTTON3, YLOC_BUTTON, BUTTONSIZE, BUTTONSIZE)) {
amountmines = amountmines + 1;
}
if (amountmines < 0) {
amountmines = 0;
}
if (amountmines > 10) {
amountmines = 10;
}
}

if (over(XLOC_BUTTON1, YLOC_BUTTON, BUTTONSIZE, BUTTONSIZE)) {
amount_treasures = amount_treasures  - 1;
}
if (over(XLOC_BUTTON2, YLOC_BUTTON, BUTTONSIZE, BUTTONSIZE)) {
amount_treasures  = amount_treasures + 1;
}
if (amount_treasures  < 0) {
amount_treasures  = 0;
}
if (amount_treasures  > 10) {
amount_treasures  = 10;
}
}

void to_maingame() {
if (over(width/2.3, height-50, XRECTSIZE, YRECTSIZE) && gamestatus == GAMESTART) {
gamestatus = GAMEPLAYING;
drawmines();
drawtreasures();
}
}

boolean over(float x, int y, int w, int h) {
return (mouseX > x & mouseX < x + w & mouseY > y & mouseY < y + h);
}
``````

In this tab, I added the boolean and used it for my mouseover if’s.
Also called the drawmines and drawtreasures in this tab as told.
No big changes overall too.
Main game

``````int xdiverloc = 0;
int ydiverloc= 0;
int score = 0;
int life = 3;
final int DIVERSIZE = 18;
final int COLS = 60;
final int ROWS = 40;
final int SCALE = 18;
boolean[][] minesArr = new boolean[COLS][ROWS];
boolean[][] treasuresArr = new boolean[COLS][ROWS];

void gamemainscreen() {
background(255);
drawgrid();
drawdiver();
drawscore();
border();
checkmineloc();
}

void setmines() {
int i = (int)random(COLS);
int j = (int)random(ROWS);
minesArr[i][j] = true;
}

void set_treasures() {
int i = (int)random(COLS);
int j = (int)random(ROWS);
treasuresArr[i][j] = true;
}

void checkmineloc() {
for (int i = 0; i < COLS; i++) {
for (int j = 0; j < ROWS; j++) {
if ( minesArr[i][j] ) {
if (xdiverloc == i && ydiverloc == j) {
life = life - 1;
}
}
}
}
}

void drawgrid() {
for (int i = 0; i < COLS; i++) {
for (int j = 0; j < ROWS; j++) {
int x = i * SCALE;
int y = j * SCALE;
noStroke();
rect(x, y, SCALE, SCALE);
fill(255, 0, 0);
if ( minesArr[i][j] ) {
circle(x, y, SCALE);
}
fill(0, 0, 255);
if ( treasuresArr[i][j] ) {
circle (x, y, SCALE);
}
}
}
}

void drawdiver() {
fill(0);
ellipse(xdiverloc, ydiverloc, DIVERSIZE, DIVERSIZE);
}

void movementdiver() {
if (key == CODED) {
if (keyCode == DOWN) {
ydiverloc = ydiverloc + DIVERSIZE;
}
}
if (key == CODED) {
if (keyCode == RIGHT) {
xdiverloc = xdiverloc + DIVERSIZE;
}
}
if (key == CODED) {
if (keyCode == LEFT) {
xdiverloc = xdiverloc - DIVERSIZE;
}
}
if (key == CODED) {
if (keyCode == UP) {
ydiverloc = ydiverloc - DIVERSIZE;
}
}
if (key == ' ') {
}
}

void border() {
if (xdiverloc < width - width) {
xdiverloc = width - width;
}
if (ydiverloc  < height - height) {
ydiverloc = height - height;
}
if (xdiverloc > width - (SCREEN_WIDTH - 18*59) ) {
xdiverloc = width - (SCREEN_WIDTH - 18*59);
}
if (ydiverloc > height - (SCREEN_HEIGHT - 18*39)) {
ydiverloc = height - (SCREEN_HEIGHT - 18*39);
}
}

void drawscore() {
textSize(18);
fill(0);
text("Score = " + score, 20, height / 1.05);
text("Life = " + life, 120, height / 1.05);
}

void drawmines() {
for (int i = 0; i < amountmines; i++) {
setmines();
}
}

void drawtreasures() {
for (int i = 0; i < amount_treasures; i++) {
set_treasures();
}
}
``````

The game looks like this when running:

When the diver is stepping on the red circle then he loses 1 life.
I tried to make it with this

``````void checkmineloc() {
for (int i = 0; i < COLS; i++) {
for (int j = 0; j < ROWS; j++) {
if ( minesArr[i][j] ) {
if (xdiverloc == i && ydiverloc == j) {
life = life - 1;
}
}
}
}
}
``````

however this does not work because i & j goes up to 60 and 40 respectively and does not mean the location.
What should be used here?

1 Like

if you work on a grid game not only your mines must be in the grid,
also your diver / snake /… must move in grid steps and not in float or int pix.
so you can divide the pix position by the grid cell width ? use also floor() ?
to determine what grid cell you are in

1 Like

But how do I do that?
I have changed the field into an array.

``````int[][] field = new int[cols][rows];
void drawgrid() {
for (int i = 0; i < field.length; i++) {
for (int j = 0; j < field[i].length; j++) {
``````

How do I make a black diver that moves inside the array/grid?
Should i use:
`int[][] diver = new int[cols][rows];` ?
Or am I thinking wrong?

So I managed to make the diver set at the location of what I want using the same formula.

``````boolean[][] diver = new boolean[cols][rows];
void setdiver() {
int i = 0;
int j = 0;
diver[i][j] = true;
movementdiver(i);
}
``````

However now that movementdiver is out of keypressed() how do I make it move?
I tried calling the function in setdiver as you can see however it does not respond to keypresses this way.

``````void movementdiver(int i) {
if (key == CODED) {
if (keyCode == DOWN) {
i = i + 1;
}
}
``````