# Play field boundary for a: rect for loop
**URL:** https://discourse.processing.org/t/play-field-boundary-for-a-rect-for-loop/4487
**Category:** Coding Questions
**Tags:** homework
**Created:** [October 15, 2018, 12:23pm UTC](https://discourse.processing.org/t/play-field-boundary-for-a-rect-for-loop/4487 "2018-10-15T12:23:20Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@SolDrakibane](https://discourse.processing.org/u/SolDrakibane)
#### Post date: [October 15, 2018, 12:23pm UTC](https://discourse.processing.org/t/play-field-boundary-for-a-rect-for-loop/4487/1 "2018-10-15T12:23:20Z")
Alright, so for my assignment i need to make a Memory Card game. However, one of the first things i need to wrap my head around is the boundary.
I need to be able to loop the _cards_ inside the **playField**. I also need to make sure that they’re _always_ inside that playfield, perfectly aligned with spacing. So if i change the size of the window from 800-600 to a higher or lower resolution: the cards stay inside the playfield with spacing always with symmetry, no offset.
Hopefully this makes sense. For i need this to work so i can increase or decrease the amount of cards shown. This will depend on how many cards i want to play with so the playField adjusts to that amount.
The requirement for the window:
- Playfield needs to be 90% of the width and height of the window.
- Cards need to have spacing inside the playfield in X and Y and between the cards
- Playfield adjusts according to the amount of cards
```auto
int DARKGREEN = #03551F;
void setup() {
size(801, 601);
background(51);
showField(DARKGREEN);
showCards();
}
void draw() {
}
void showCards() {
int w = 80;
int h = w+w/2;
int spacing = 10;
int spacingX = spacing+w;
int x = width/10+spacing;
int y = height/10+spacing;
fill(225);
for (int i = x; i < width; x = x + spacingX) {
rect(x, y, w, h);
}
}
void showField(int colour) {
final int x = width/10;
final int y = height/10;
final int w = width-width/10-x;
final int h = height-height/10-y;
fill(colour);
rect(x, y, w, h);
}
```
---
### Author:  [@TheWizardBear](https://discourse.processing.org/u/TheWizardBear)
#### Post date: [October 16, 2018, 5:58pm UTC](https://discourse.processing.org/t/play-field-boundary-for-a-rect-for-loop/4487/2 "2018-10-16T17:58:39Z")
To get the cards to fit, replace the `width` in the for loop with `width-width/10-x`.
If you want them to automatically fit when you change the number of cards, adjust `w` (smaller for more cards).
---
### Author:  [@SolDrakibane](https://discourse.processing.org/u/SolDrakibane)
#### Post date: [October 16, 2018, 10:17pm UTC](https://discourse.processing.org/t/play-field-boundary-for-a-rect-for-loop/4487/3 "2018-10-16T22:17:20Z")
Thanks for your suggestion, it certainly solved the simple solution. But that’s not all of what i’m actually aiming for. You see, even when i make all the cards “fit” the playfield, they’re always off by a few margins. Now, i could use a random generator to stick them in randomly inside that field but that’s not exactly what i want / need. I think i should keep this thing for the last cause i can’t get it to work.
My example:
Lets say you have a playfield that i provided above in the code, and the cards below are as you see it. [] = card. Below is the playmode for 12 cards of 6 sets. The cards are perfectly aligned in the playfield.
```auto
-------------------
| [] [] [] [] |
| [] [] [] [] |
| [] [] [] [] |
-------------------
```
Now i want to switch the game mode of 12 sets (which is the minimum, max being 32 sets, pretty crazy…)
```auto
---------------------------
| [] [] [] [] [] [] |
| [] [] [] [] [] [] |
| [] [] [] [] [] [] |
| [] [] [] [] [] [] |
---------------------------
```
Once again, switched the playmode to a higher standard, the playfield stays the same and the cards are still perfectly aligned.
I guess my question is: Can you make the rectangle **_morph_** itself and **_mold_** itself to fit the field depending on the amount of cards so it always perfectly aligns itself inside those margins inside the field and between the cards?
---
### Author:  [@TheWizardBear](https://discourse.processing.org/u/TheWizardBear)
#### Post date: [October 17, 2018, 7:45pm UTC](https://discourse.processing.org/t/play-field-boundary-for-a-rect-for-loop/4487/4 "2018-10-17T19:45:54Z")
This is what I came up with:
```auto
void showCards() {
float spacing = 10;
float xMargin = width/10+spacing;
float yMargin = height/10+spacing;
float w = 80;
float h = w+w/2;
float totalHeight = height-height/10-yMargin-yMargin;
totalHeight += (floor(totalHeight/h)+1)*spacing;
h = totalHeight/floor(totalHeight/h);
float xSpacing = spacing+w;
float ySpacing = spacing+h;
fill(225);
for (float x = xMargin; x < width-width/10-xMargin; x += xSpacing) {
for (float y = yMargin; y < height-height/10-yMargin; y += ySpacing) {
rect(x, y, w, h);
}
}
}
```
Let me know if you need help understanding anything. To change the number of cards simpky adjust `w`.
I had to change your for loop (and add another one for y).
EDIT: Oh wait just realised it doesn’t work so I will try and fix it for ya!
---
### Author:  [@SolDrakibane](https://discourse.processing.org/u/SolDrakibane)
#### Post date: [October 17, 2018, 8:18pm UTC](https://discourse.processing.org/t/play-field-boundary-for-a-rect-for-loop/4487/5 "2018-10-17T20:18:51Z")
Haha thanks for the effort and time.
I also have something “similar” but it’s still broken as in it never fits. Think i might have to use a 2D array that starts at different XY positionings, and ignore the “symmetry” part and keep everything the same width/height instead of having it change to always fit the field.
Which really s\*\*ks cause i have to constantly adjust the “width” and “height” to match the field instead of having it auto-adjust. Pretty difficult thing.
```auto
/*
-= Sunny Jansen =-
-= Beroepsproduct Memory Game =-
-= Start: 12-10-2018 =-
//14-10-2018 TODO: Kaarten in setjes van min 12(6 setjes) t/m max 32(16 setjes) naast elkaar op het scherm plaatsen
//15-10-2018 TODO:
*/
String gameModeFile = "Card_Amount.txt";
float[] gameMode;
int DARKGREEN = #03551F;
void setup() {
size(800, 800);
background(51);
gameMode = loadGameModeFile(gameModeFile);
showField(DARKGREEN);
modeToCards(gameMode);
// w | h | spacing | colour | scale
drawCards(60, 80, 10, 255);
}
void draw() {
}
/*24 CARDS, 12 SETS
[][][][][][]
[][][][][][]
[][][][][][]
[][][][][][]
*/
// draw COLS & ROWS -> use maxHeight and maxWidth to control AMOUNT.
void drawCards(float w, float h, float spacing, int colour) {
pushMatrix();
fill(colour);
//float distance = dist(width/10, height/10, width-width/10*2, height-height/10*2);
float posX = width/10+spacing;
float posY = height/10+spacing;
float maxWidth = width-width/10*2+w;
float maxHeight = height-height/10*2;
for (float y = posY; y < maxHeight; y += h+spacing) {
for (float x = posX; x < maxWidth; x += w+spacing) {
rect(x, y, w, h);
}
}
popMatrix();
}
void modeToCards(float[] array) {
for (int i = 0; i < array.length; i++) {
array[i] = array[i]*2;
}
println(array);
}
float[] loadGameModeFile(String array) {
float[] fileArray = float(loadStrings(array));
return fileArray;
}
```
---
### Author:  [@SolDrakibane](https://discourse.processing.org/u/SolDrakibane)
#### Post date: [October 17, 2018, 8:39pm UTC](https://discourse.processing.org/t/play-field-boundary-for-a-rect-for-loop/4487/6 "2018-10-17T20:39:12Z")
Figured something out, maybe i can control the maxWidth and maxHeight ( see code above) to control the COLS and ROWS. Will try this tomorrow. 🙂