Rectangle button

Processing Coding Questions
1

Dear
As a beginner, I wanted to create 4 buttons that show different colors when being pressed, however, when I press each of them they don’t work individually. Additionally, I have a serious problem with writing distances for them. In fact, I’m not sure about the distances I’ve written for each of them. Needless to say, conditionals have been written in mousePressed event haven’t been completed yet.
may I ask you to help me?

color colA = color(255,0,0);
color colB = color(0,255,0);
color colC = color(0,0,255);
color colD = color(70,0,255);
float colSwitch = 0;
float positionX1 = 150;
float positionX2 = 380;
float positionX3 = 610;
float positionY1 = 150;
float positionY2 = 380;
float positionY3 = 610;

void setup()
{
size(760,760);
}
void draw()
{

background(0);

rect(positionX1,positionY1,230,230);
rect(positionX2,positionY1,230,230);
rect(positionX1,positionY2,230,230);
rect(positionX2,positionY2,230,230);

if(colSwitch==0)
{ fill(colA);
}else if(colSwitch==1)
{ fill(colB);
}
}
void mousePressed()
{

float d1 = dist(positionX1,positionY1,mouseX,mouseY);
float d2 = dist(positionX2,positionY1,mouseX,mouseY);
float d3 = dist(positionX1,positionY2,mouseX,mouseY);
float d4 = dist(positionX2,positionY2,mouseX,mouseY);

if(positionX1<d1 && d1<positionX2 && positionY1<d1 && d1<positionY2)
{
  if(colSwitch==0)
  { colSwitch = 1; 
}else if(positionX2<d2 && d2<positionX3 && positionY1<d2 && d2<positionY2 )
 
  { colSwitch = 2; 

}
 


}

}

2

hi,

as you say you re a beginner, i have to remind there are libraries to do this in a quite easy way

however, you re close to a functionning code , it may be better for learning to finish this

the test you do in mousePressed() are a little bit mixed:

dist() will calculate distance between mouse and the xy position you give to it

so if mouse is close to a button position value will be low, and high if far away
(you can add println(d1); to check what values it give)

why do you compare that ‘d’ value with a position?

the closest button is button1 if d1 is the smallest value you get no?

if it s still too complicate, i recomand to process only first button, then manage others
you can have a look on how it s done in this processing example

well this example is a little bit complex:

but you can look how it test if the mouse is over the rectangle:

  // Test if the cursor is over the box 
  if (mouseX > bx-boxSize && mouseX < bx+boxSize && 
      mouseY > by-boxSize && mouseY < by+boxSize) {
3 Likes
4

you can enhancement your code your start is good

here you can add buttons and control with mousePressed

Button red;  

void setup() {
  size (600, 650);
  smooth();
  background(0); 
  
 red = new Button("red color", 20, 20, 100, 50);
}

void draw() {
red.Draw();
  }

void mousePressed()
{
  if (red.mousePressed()) {
   
    fill(222,0,0);
   
    rect(12,111,230,230);
}

}

class Button {
  String label; 
  float x;     
  float y;      
  float w;      
  float h;      
  
  Button(String labelB, float xpos, float ypos, float widthB, float heightB) {
    label = labelB;
    x = xpos;
    y = ypos;
    w = widthB;
    h = heightB;
  }
  
  void Draw() {
 fill(222,0,0);
    stroke(141);
    rect(x, y, w, h, 10);
    textAlign(CENTER, CENTER);
    fill(0);
    text(label, x + (w / 2), y + (h / 2));
  }
  
  boolean mousePressed () {
    if (mouseX > x && mouseX < (x + w) && mouseY > y && mouseY < (y + h)) {
      return true;
    }
    return false;
  }

}
5

Hello,

I provided you with example code to help with your coding.
println() and text() can be useful tools.
I also added a line() and circle() to see boundaries.
You could also show dist() as you are moving mouse.

Please format your code as a courtesy to the community:
https://discourse.processing.org/faq#format-your-code

There are are resources (tutorials, references, examples) here:

Check out the GUI section in the examples for some insight.

Example code:

float positionX1;
float positionY1;

void setup()
  {
  size(400, 400);
  positionX1 = width/2;
  positionY1 = height/2;
  println(width, height);
  textSize(16);
  textAlign(CENTER, CENTER);
  }

void draw()
  {
  background(0);
  rectMode(CENTER);
  fill(255);
  rect(positionX1, positionY1, 200, 200);
  ellipseMode(CENTER);
  circle(positionX1, positionY1, 200);
  mouseOver();

  line(positionX1, positionY1, mouseX, mouseY);
  }

void mouseOver()
  {
  float d1 = dist(positionX1, positionY1, mouseX, mouseY);
  if (d1<100)
    {
    fill(0, 255, 0);  
    text("Over!", mouseX, mouseY);
    println("Over!", mouseX, mouseY);
    }
  else
    {
    fill(255, 0, 0); 
    text("Out!", mouseX, mouseY);
    println("Out!", mouseX, mouseY);
    }
  }

If you are using a button Class such as this:
https://blog.startingelectronics.com/a-simple-button-for-processing-language-code/

You may want to start with these tutorials:

And related references:

:)