How do I know which rectangle I selected?

blackelv

Hi, I'm trying to make Memory for an assignment. I'm stuck at the point where I try to select one rectangle and make it change color (later it should flip to show the picture on the other side).

This is the code I have so far:

Note 1: I'm dutch so my variables are all dutch. If this poses a problem please let me know.

Note 2: I'm not allowed to use classes. Don't know if it is relevant to my problem, but thought I should mention it anyways.

int kolommen = 6;
int rijen = 4;
int maxPaar = (kolommen * rijen) / 2;
int[][] bord;


void setup() {
  size(500, 500);
  surface.setResizable(true);
  background(0);
  bord = vulBord(kolommen, rijen, maxPaar);

}

void draw() {

  tekenBord(bord, kolommen, rijen);

}

int [][]vulBord(int kolommen, int rijen, int maxPaar) {

  //vul bord met kaarten -> maxkaart
  //elke kaart moet 2x voorkomen
  //kaarten moeten random verdeeld worden over bord

  int [] aantalVanEenPaar = new int [maxPaar];
  int bord [][] = new int [kolommen][rijen];
  int kaartNummer;
  for (int kolom = 0; kolom < kolommen; kolom++) {
    for (int rij = 0; rij < rijen; rij++) {
      kaartNummer = floor(random(maxPaar));
      while ( aantalVanEenPaar[kaartNummer] >= 2) {
        kaartNummer = floor(random(maxPaar));
      }
      bord[kolom][rij] = kaartNummer; 
      //println("Vul bord kolom=",kolom," e nrij=",rij," met de waarde ",kaartNummer);
      aantalVanEenPaar[kaartNummer] ++;
    }
  }
  return bord;
}


void tekenBord(int [][]bord, int kolommen, int rijen) {
// mouseClicked();
  int marge = 20;
  float breedte = width / (kolommen + rijen);
  float hoogte = height / (kolommen + rijen);
  float margeTussenBlokjesX = ((width - (2*marge) - (breedte * kolommen))) / (kolommen - 1);
  float margeTussenBlokjesY = ((height - (2*marge) - (hoogte * rijen))) / (rijen - 1);
  for ( int kolom = 0; kolom < kolommen; kolom++) {
    for ( int rij = 0; rij < rijen; rij++) {
      float x = marge + ((breedte + margeTussenBlokjesX) * kolom);
      float y = marge + ((hoogte + margeTussenBlokjesY) * rij);

      rect(x, y, breedte, hoogte);
      text( bord[kolom][rij], x, y );
      //println(muisBovenKaart(x, y, breedte, hoogte));

    }
  }
}
/////KLOPT NIET!!!!!!!!!!!!

/*void mouseClicked() {
  int marge = 20;
  float breedte = width / (kolommen + rijen);
  float hoogte = height / (kolommen + rijen);
  float margeTussenBlokjesX = ((width - (2*marge) - (breedte * kolommen))) / (kolommen - 1);
  float margeTussenBlokjesY = ((height - (2*marge) - (hoogte * rijen))) / (rijen - 1);
  for ( int kolom = 0; kolom < kolommen; kolom++) {
    for ( int rij = 0; rij < rijen; rij++) {
      float x = marge + ((breedte + margeTussenBlokjesX) * kolom);
      float y = marge + ((hoogte + margeTussenBlokjesY) * rij);

      if (muisBovenKaart( x, y, breedte, hoogte) == true) {
        fill(100, 100, 100);
      } else {
        fill(255);
      }
    }
  }
}*/


boolean muisBovenKaart (float x, float y, float breedte, float hoogte) {
  int bovenKaart = 0;
  for (int kolom = 0; kolom < kolommen; kolom++) {
    for (int rij = 0; rij < rijen; rij++) {
      if (mouseX >= x  && mouseX <= x + breedte) {
        if (mouseY >= y && mouseY <= y + hoogte) {
          bovenKaart += 1;
          kolom += 10;
        }
      } else {
        bovenKaart = 0;
      }
    }
  }
  if (bovenKaart > 0) {
    fill(200,10,100);
    return true;
  } else {
    return false;
  }
}

KevinWorkman

Why aren't you allowed to use classes?

But whether you use classes or not, the approach is the same: you know where you're drawing each rectangle (because you're drawing them). To detect a mouse click, you need to check the mouse position against the position of the rectangle.

I would start with a simpler example. Can you create a sketch that shows a single rectangle that changes color when you click it?

blackelv

My school thinks learning to program "algorithms" is more important than object oriented programming.

something like this?

int x;
int y; 
int x2;
int y2;




void setup() {
  size(500, 500);
  background(0);
}

void draw() {

  x = (width / 2) - 40;
  y = (height / 2) - 40;
  x2 = 80;
  y2 = 80;

  if (mousePressed == true) {
    if ( mouseX >= x && mouseX <= x + x2) {
      if (mouseY >= y && mouseY <= y + y2) {
        fill(200, 50, 50);
      }
    } else {
      fill(50);
    }
  }
  rect(x, y, x2, y2);
}

GoToLoop

http://studio.SketchPad.cc/sp/pad/view/ro.9L5jAtga7SpyF/latest
http://www.JeffreyThompson.org/collision-detection/point-rect.php

KevinWorkman

something like this?

You tell us. What happens when you run that code? Does it do what you expect? If so, then good job! If not, then what does it do instead?

blackelv

GoToLoop thanks for those links. I think I can work something out with those examples.

Also thanks KevinWorkman for replying to my questions. It did what I expected it to do. But now i have a whole table full of rectangles made with a for loop. How do i get one rectangle to change color?

Chrisir

where you wrote

something like this?

the if clause is good

---

I recommend to use the first sketch and put a

void mousePressed() {
        // 
}

into it

in this, insert the double for-loop (like you have above)

in this insert the

if-clause

  float x = marge + ((breedte + margeTussenBlokjesX) * kolom);
  float y = marge + ((hoogte + margeTussenBlokjesY) * rij);

 if ( mouseX >= x && mouseX <= x + x2) {
      if (mouseY >= y && mouseY <= y + y2) {

use the if to change

int[][] bord;    // or something where you say this card is open or not

because when the card is clicked, you want to open it.

First or second card?

store in a var whether it's the 1st or 2nd card you are opening

• when it's the first : open ONE and just set cardNumber to 2

• when it's the 2nd : open TWO and compare (if equal do A, else B, reset cardNumber to 1)

KevinWorkman

Well, your logic will be the same, you'll just have to apply that logic to each individual square. Or you could map the mouse position directly to the square its on using basic arithmetic, something like this:

int cellColumnIndex = (mouseX/width)*columnCount;

blackelv

Okay thanks!! You guys have given me a lot to work with! Thank you for the fast response!

Chrisir

;-)