Play field boundary for a: rect for loop

Processing Coding Questions
1

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
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);
}
2

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).

1 Like
3

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.

-------------------
| [ ] [ ] [ ] [ ] |
| [ ] [ ] [ ] [ ] |
| [ ] [ ] [ ] [ ] |
-------------------

Now i want to switch the game mode of 12 sets (which is the minimum, max being 32 sets, pretty crazy…)

---------------------------
| [ ] [ ] [ ] [ ] [ ] [ ] |
| [ ] [ ] [ ] [ ] [ ] [ ] |
| [ ] [ ] [ ] [ ] [ ] [ ] |
| [ ] [ ] [ ] [ ] [ ] [ ] |
---------------------------

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?

4

This is what I came up with:

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!

1 Like
5

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.

/*
-= 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;
}
6

Figured something out, maybe i can control the maxWidth and maxHeight ( see code above) to control the COLS and ROWS. Will try this tomorrow. :slight_smile:

1 Like