Why does this not work? (8 Squares)

daniel00101

Hi! I'm an absolute beginner programmer, and my exercise is to make 8 squares, that scales with the window and with numbers from 1 to 8 inside them (which is pretty much already done).

What I cannot get to work is to make the rectangles change color to red when you click on one of them, and when you clock on another of the 8 rectangle the rectangle you clock on changes color to red and the the rectangle you previously clicked on goes white again

Here is my code so far:

int pressedButton;
float spaceWidth;
float boxSize;

void setup() {
  size(900, 300);
  boxSize = width/10;
  spaceWidth = width/(5*9);
  background(0);
  pressedButton = 0;
}

void draw() {
  noStroke();
  for (int i = 0; i < 8; i++) {
    fill(255);
    rect(spaceWidth+i*(boxSize+spaceWidth), 70, boxSize, boxSize);
    fill(0);
    text(i+1, spaceWidth+i*(boxSize+spaceWidth), 81);
    fill(255);
  }
}

void mousePressed() {
  for (int i=0; i<8; i++) {
    if (mouseX > spaceWidth+i*(boxSize+spaceWidth) && mouseX < spaceWidth+i*(boxSize+spaceWidth)+width) {
      fill (255, 0, 0);
    }
    if (mouseY > height && mouseY < height) {
      fill (255, 0, 0);
    }
  }
}

Chrisir

use pressedButton

set it in mousePressed()

read it in draw() with if :

if(i==pressedButton)
     fill(255,0,0);
   else   
    fill(255);

daniel00101

What do you mean about "read it in draw() with if :"??

Chrisir

just as I wrote:

in the sense that you use the value of pressedButton (as opposed to set the value of it)

if(i==pressedButton)
     fill(255,0,0);
   else  
    fill(255);

daniel00101

But how does the program know if it's inside the box without the

if (mouseX > spaceWidth+i*(boxSize+spaceWidth) && mouseX < spaceWidth+i*(boxSize+spaceWidth)+width)

Chrisir

the point is, it won't work when you set the color only in mousePressed, because that is only active as long as the mouse is pressed (very short)

so store the result in pressedButton and then use pressedButton

Chrisir

you wrote :

But how does the program know if it's inside the box without the

if (mouseX > spaceWidth+i(boxSize+spaceWidth) && mouseX < spaceWidth+i(boxSize+spaceWidth)+width)

you are right,

set pressedButton in mousePressed()

depending on

if (mouseX > spaceWidth+i*(boxSize+spaceWidth) && 
    mouseX < spaceWidth+i*(boxSize+spaceWidth)+width)

daniel00101

It doesn't give any errors, but the it still doesn't work

int pressedButton;
float spaceWidth;
float boxSize;

void setup() {
  size(900, 300);
  boxSize = width/10;
  spaceWidth = width/(5*9);
  background(0);
  pressedButton = 0;
}

void draw() {
  noStroke();
  for (int i = 0; i < 8; i++) {
    fill(255);
    rect(spaceWidth+i*(boxSize+spaceWidth), 70, boxSize, boxSize);
    fill(0);
    text(i+1, spaceWidth+i*(boxSize+spaceWidth), 81);
    fill(255);
  }
}

void mousePressed() {
  for (int i=0; i<8; i++) {
    if (mouseX > spaceWidth+i*(boxSize+spaceWidth) && mouseX < spaceWidth+i*(boxSize+spaceWidth)+width && mouseY > height && mouseY < height) {
      pressedButton = 1;
    } else {
      fill(255);
    }
    if (i == pressedButton) {
      fill(255,0,0);
    } else {
      fill(255);
    }
  }
}

Chrisir

you forgot the "read it in draw() with if" part - see above

also, the idea is to store the number of the cell that is active in pressedButton

pressedButton = 1;

Chrisir

setup() runs only once, draw() runs on and on, 60 times per second, mousepressed runs only once when the mouse is pressed

Hence the idea is to store what happens in mousepressed and use that data in draw(). In our case, let pressedButton store the number of the pressed cell / button and act on it.

OK?

Chrisir

daniel00101

setup() runs only once, draw() runs on and on, 60 times per second, mousepressed runs only once when the mouse is pressed

But they're all voids

Chrisir

well, they are all functions (void is just their return type, which is empty / void in this case)

but they are different kinds of functions. As I described.

does it work now?