Questions for basic drawing program

Processing
1

pretty new to programming, so be easy on me please! Haha…I’m not sure what I am doing wrong, but I have two questions of things that don’t really affect the function of the program, but are annoying me. #1 is that while the color change is written as if (mousePressed), it doesn’t actually wait for the mouse to be pressed. hovering over the “buttons” causes the color to change without clicking the mouse. Also, I can’t figure out why it continues to draw over the black button, which is a clear page button. I set stroke to 0 but it still colors over the button when the button is clicked. code is as follows. I have tried a bunch of different things but none of them worked, so that’s why I am asking for help here. Code is as follows:

int redX = 10;
int redY = 10;
int blueX = 60; 
int blueY = 10;
int greenX = 110; 
int greenY = 10;
int orangeX = 160; 
int orangeY = 10;
int whiteX = 210; 
int whiteY = 10;
int clearX = 500;
int clearY = 10;
int buttonSize = 30;
color red = color(255, 0, 0);
color green = color(0, 255, 0);
color blue = color(0, 0, 255);
color orange = color(240, 100, 0);
color white = color(255);
boolean redOver = false;
boolean greenOver = false;
boolean blueOver = false;
boolean whiteOver = false;
boolean orangeOver = false;
boolean pageClear = false;
color currentColor;

void setup() {
  size(600, 600);
  background(0);
  createButtons();
  smooth();
}

void draw() {
  update(mouseX, mouseY);
  if (mousePressed) {
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}



void mousePressed() {
  if (redOver) {
    stroke(red);
  }
  if (greenOver) {
    stroke(green);
  }
  if (blueOver) {
    stroke(blue);
  }
  if (orangeOver) {
    stroke(orange);
  }
  if (whiteOver) {
    stroke(white);
  }
  if (pageClear) {
    stroke(0);
    background(0);
    createButtons();
    pageClear = false;
  }
}

void createButtons() {
  stroke(red);
  fill(red);
  rect(redX, redY, buttonSize, buttonSize);
  fill(blue);
  stroke(blue);
  rect(blueX, blueY, buttonSize, buttonSize);
  fill(green);
  stroke(green); 
  rect(greenX, greenY, buttonSize, buttonSize);
  fill(orange);
  stroke(orange);
  rect(orangeX, orangeY, buttonSize, buttonSize);
  fill(white);
  stroke(white);
  rect(whiteX, whiteY, buttonSize, buttonSize);
  fill(0);
  stroke(255);
  rect(clearX, clearY, buttonSize, buttonSize);
}

void update(int x, int y) {
  if (overRed(redX, redY, buttonSize, buttonSize)) {
    redOver = true;
    greenOver = false;
    blueOver = false;
    whiteOver = false;
    orangeOver = false;
    pageClear = false;
  } else if (overBlue(blueX, blueY, buttonSize, buttonSize)) {
    redOver = false;
    greenOver = false;
    blueOver = true;
    whiteOver = false;
    orangeOver = false;
    pageClear = false;
  } else if (overGreen(greenX, greenY, buttonSize, buttonSize)) {
    redOver = false;
    greenOver = true;
    blueOver = false;
    whiteOver = false;
    orangeOver = false;
    pageClear = false;
  } else if (overOrange(orangeX, orangeY, buttonSize, buttonSize)) {
    redOver = false;
    greenOver = false;
    blueOver = false;
    whiteOver = false;
    orangeOver = true;
    pageClear = false;
  } else if (overWhite(whiteX, whiteY, buttonSize, buttonSize)) {
    redOver = false;
    greenOver = false;
    blueOver = false;
    whiteOver = true;
    orangeOver = false;
    pageClear = false;
  } else if (clearPage(clearX, clearY, buttonSize, buttonSize)) {
    redOver = false;
    greenOver = false;
    blueOver = false;
    whiteOver = false;
    orangeOver = false;
    pageClear = false;
    pageClear = true;
  }
}

boolean clearPage(int x, int y, int width, int height) {
  if (mouseX >= x && mouseX <= x+width &&
    mouseY >= y && mouseY < y+height) {
    return true;
  } else {
    return false;
  }
}

boolean overRed(int x, int y, int width, int height) {
  if (mouseX >= x && mouseX <= x+width && 
    mouseY >= y && mouseY <= y+height) {
    return true;
  } else {
    return false;
  }
}
boolean overBlue(int x, int y, int width, int height) {
  if (mouseX >= x && mouseX <= x+width && 
    mouseY >= y && mouseY <= y+height) {
    return true;
  } else {
    return false;
  }
}
boolean overGreen(int x, int y, int width, int height) {
  if (mouseX >= x && mouseX <= x+width && 
    mouseY >= y && mouseY <= y+height) {
    return true;
  } else {
    return false;
  }
}
boolean overOrange(int x, int y, int width, int height) {
  if (mouseX >= x && mouseX <= x+width && 
    mouseY >= y && mouseY <= y+height) {
    return true;
  } else {
    return false;
  }
}
boolean overWhite(int x, int y, int width, int height) {
  if (mouseX >= x && mouseX <= x+width && 
    mouseY >= y && mouseY <= y+height) {
    return true;
  } else {
    return false;
  }
}
2

You messed up your functions I think.

In draw(), you are calling update() every time.
Then in update, you check if you are over a specific square and if so change the color : that’s why you don’t need to click to change the color.

And I think that what you wanted is in mousePressed() to checked if you are above a square or not. So instead of “redOver” you have to use the function you designed for it : overRed().

3

The way the code is supposed to work is this:

Update() checks if the mouse is over any of the boxes by calling the color associated functions, which only return true or false. When one returns true, set the boolean associated with that color as true and set the rest as false. None of the code in Update() should be changing the stroke color at all.

Then if the mouse is pressed, it should check the boolean variables and whichever one is true, set the stroke to that color.

After reading what you wrote and then starting to think about what each part of the code does I realize the problem. The issue is that changing the boolean variables values does not require a mouse press, so hovering over the boxes changes the boolean. Then on mouse press, before it draws the line, the stroke is changes to whichever boolean if set to true.

Seems that if I check for a mouse press before changing the boolean, it will do what I want it to do. That will prevent me from having to rewrite the code completely.

4

Scratch all that. Adding an else at the end of the update function that changes all the boolean values to false fixes the issue. That way unless the mouse is pressed WHILE over a button, all the booleans are set to false, and thus the stroke isn’t changed. Simple fix, now works great.

1 Like
5

Also figured out the drawing over the clear page button. Took that if statement out of the mousePressed, and put it into void mouseReleased() so that it redraws the buttons after the mouse is released and “drawn” on, so whatever gets drawn on gets the button drawn over it. All good now, all problems resolved.