# Single rectangle button

**URL:** <https://discourse.processing.org/t/single-rectangle-button/30948>\
**Category:** Coding Questions\
**Created:** [June 28, 2021, 3:58pm UTC](https://discourse.processing.org/t/single-rectangle-button/30948 "2021-06-28T15:58:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![PARINAZ129](https://avatars.discourse-cdn.com/v4/letter/p/9f8e36/32.png) [@PARINAZ129](https://discourse.processing.org/u/PARINAZ129)\
**Post date:** [June 28, 2021, 3:58pm UTC](https://discourse.processing.org/t/single-rectangle-button/30948/1 "2021-06-28T15:58:07Z")

</div>

Dear  
As you or your co-workers suggested to me,I tried to change my code.at this time I want to make a single rect button that has been filled with multiple colors as it being pressed however it doesn’t work. may I ask you to help me?

```auto
float A = 100;
float B = 100;
color colA = color(#DE22DB);
color colB = color(#22DEDC);
color colC = color(#22DE2F);
color colD = color(#6F51A7);
float colSwitch = 0;

void setup()
{
  size(740, 740);
  background(0);
  rectMode(CENTER);
}

void draw()
{ 
  if (colSwitch == 0)
  { 
    fill(colA);
  } else if (colSwitch==1)
  { 
    fill(colB);
  } else if (colSwitch==2)
  { 
    fill(colC);
  } else if (colSwitch==3)
  { 
    fill(colD);
  }

  stroke(255);

  rect(width/2, height/2, A, B);
}

void mousePressed()
{
  if (mouseX>width/2 && mouseX<width/2+A && mouseY> height/2 && mouseY< height/2+B)
  { 
    if (colSwitch==0)
    { 
      colSwitch = 1;
    } else if (colSwitch==1)
    { 
      colSwitch = 2;
    } else if (colSwitch==2)
    { 
      colSwitch = 3;
    } else if (colSwitch==3)
    { 
      colSwitch = 0;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 28, 2021, 4:28pm UTC](https://discourse.processing.org/t/single-rectangle-button/30948/2 "2021-06-28T16:28:20Z")

</div>

Hello,

your colors seem very close to each other / indistinguishable. They must be more different from each other.

check `Menu Tools | color selector` in processing

(I filled in some random colors)

* * *

**Checking the mouse**

also, when you say `rectMode(CENTER);`

you need to change this part (which assumes that the upper left corner is `width/2, height/2` ):

```auto
  if (mouseX > width/2 && 
    mouseX < width/2+A &&
    mouseY > height/2 &&
    mouseY < height/2+B) {

```

it must take in to account the `rectMode(CENTER);`-situation;  
therefore it must be something like this:

```auto
  if (mouseX > width/2 - A/2 && 
     etc.

```

(I haven’t done this)

* * *

**Full CODE**

without the `rectMode(CENTER);` part :

```auto
float A = 100;
float B = 100;
color colA = color(33); // color(#DE22DB);
color colB = color(255, 2, 2);//color(#22DEDC);
color colC = color(255); //color(#22DE2F);
color colD = color(#6F51A7);
float colSwitch = 0;

void setup() {
  size(740, 740);
  background(0);
  // rectMode(CENTER);
}

void draw() {
  background(0);

  if (colSwitch == 0) { 
    fill(colA);
  } else if (colSwitch==1) { 
    fill(colB);
  } else if (colSwitch==2) { 
    fill(colC);
  } else if (colSwitch==3) { 
    fill(colD);
  }

  stroke(255);
  rect(width/2, height/2, A, B);
}

void mousePressed() {
  if (mouseX > width/2 && 
    mouseX < width/2+A &&
    mouseY > height/2 &&
    mouseY < height/2+B) {

    println("a");
    if (colSwitch==0) { 
      colSwitch = 1;
    } else if (colSwitch==1) { 
      colSwitch = 2;
    } else if (colSwitch==2) { 
      colSwitch = 3;
    } else if (colSwitch==3) { 
      colSwitch = 0;
    }
  }
}
//

```

---

<div class="post-metadata">

**Author:** ![PARINAZ129](https://avatars.discourse-cdn.com/v4/letter/p/9f8e36/32.png) [@PARINAZ129](https://discourse.processing.org/u/PARINAZ129)\
**Post date:** [June 28, 2021, 5:05pm UTC](https://discourse.processing.org/t/single-rectangle-button/30948/3 "2021-06-28T17:05:51Z")

</div>

thank you very much \<3

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 28, 2021, 8:14pm UTC](https://discourse.processing.org/t/single-rectangle-button/30948/4 "2021-06-28T20:14:57Z")

</div>

simplified

```auto
float buttonWidth = 100;
float buttonHeight = 100;

color[] list =
  {
  color(33), // color(#DE22DB);
  color(255, 2, 2), //color(#22DEDC);
  color(255), //color(#22DE2F);
  color(#6F51A7)
};

// index for List
int colSwitch = 0;

void setup() {
  size(740, 740);
  background(0);
  // rectMode(CENTER);
}

void draw() {
  background(0);

  fill(list[colSwitch]);
  stroke(255);
  rect(width/2, height/2, buttonWidth, buttonHeight);
}

void mousePressed() {
  if (mouseX > width/2 && 
    mouseX < width/2+buttonWidth &&
    mouseY > height/2 &&
    mouseY < height/2+buttonHeight) {

    colSwitch++;

    if (colSwitch>=list.length-1) { 
      colSwitch = 0;
    }
  }
}
//

```

---

<div class="post-metadata">

**Author:** ![Flolo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/flolo/32/13874_2.png) [@Flolo](https://discourse.processing.org/u/Flolo)\
**Post date:** [July 10, 2021, 11:30am UTC](https://discourse.processing.org/t/single-rectangle-button/30948/5 "2021-07-10T11:30:36Z")

</div>

Hey i know this is not the answer but maybe it can help somebody. 😅

I wrote a Button class a while ago, here is the code:

**Button Class:**

> **Click to see code**
>
> ```auto
> public class Button {
> //IMPORTANT rectMode = CENTER && imageMode = CENTER 
> MethodRelay methodRelay;
> boolean buttonPressed;
> PVector pos, size;
> //The name that is passed as a parameter of the function 
> //so that you know which button is executing the function
> String buttonName;
> PImage pressedImage;
> PImage normalImage;
> Button(PApplet mainSketch, String name, String method, float x, float y, float sx, float sy) {
> methodRelay = new MethodRelay(mainSketch, method, String.class);
> pos = new PVector(x, y);
> size = new PVector(sx, sy);
> buttonName = name;
> buttonPressed = false;
> registerMethod("mouseEvent", this);
> }
> Button(PApplet mainSketch, String name, String method, float x, float y, PImage pImg, PImage nImg) {
> methodRelay = new MethodRelay(mainSketch, method, String.class);
> pos = new PVector(x, y);
> buttonName = name;
> buttonPressed = false;
> pressedImage = pImg;
> normalImage = nImg;
> registerMethod("mouseEvent", this);
> }
> void buttonPressed() {
> println(buttonName + " Pressed!");
> methodRelay.execute(buttonName);
> }
> void show() {
> if (normalImage == null || pressedImage == null) {
> System.err.println("ERROR:\n normalImage or pressedImage is not loaded!");
> return;
> }
> 
> if (buttonPressed) {
> image(pressedImage, pos.x, pos.y);
> } else {
> image(normalImage, pos.x, pos.y);
> }
> }
> void showDebug() {
> stroke(255);
> strokeWeight(2);
> if (buttonPressed) {
> fill(255);
> } else {
> noFill();
> }
> rect(pos.x, pos.y, size.x, size.y);
> }
> boolean onButton(float x, float y) {
> return (x >= pos.x-size.x/2 && x <= pos.x+size.x/2 && y >= pos.y-size.y/2 && y <= pos.y+size.y/2);
> }
> void mouseWheel(MouseEvent evt) {
> }
> void mousePressed() {
> if (onButton(mouseX, mouseY)) {
> buttonPressed();
> buttonPressed = true;
> }
> }
> void mouseReleased() {
> buttonPressed = false;
> }
> void mouseMoved() {
> }
> void mouseDragged() {
> }
> void destroyMouseFunctions() {
> unregisterMethod("mouseEvent", this);
> }
> void mouseEvent(final MouseEvent evt) {
> switch(evt.getAction()) {
> case MouseEvent.PRESS:
> mousePressed();
> break;
> case MouseEvent.RELEASE:
> mouseReleased();
> break;
> case MouseEvent.MOVE:
> mouseMoved();
> break;
> case MouseEvent.DRAG:
> mouseDragged();
> break;
> case MouseEvent.WHEEL:
> mouseWheel(evt);
> }
> }
> //-----------------------------------------------------------------------------------------------------------------------------------------
> import java.lang.reflect.*;
> 
> //Code from:https://forum.processing.org/two/discussion/13093/how-to-call-function-by-string-content
> class MethodRelay {
> /** The object to handle the draw event */
> Object handlerObject = null;
> /** The method in drawHandlerObject to execute */
> Method handlerMethod = null;
> /** the name of the method to handle the event */
> String handlerMethodName;
> /**
> * An array of classes that represent the function parameters in order
> */
> Class[] parameters = null;
> 
> MethodRelay(Object obj, String name, Class... args) {
> try {
> handlerMethodName = name;
> parameters = args;
> handlerMethod = obj.getClass().getMethod(handlerMethodName, parameters);
> handlerObject = obj;
> } 
> catch (Exception e) {
> System.out.println("Unable to find the function");
> System.out.print(handlerMethodName + "( ");
> if (parameters != null) {
> for (Class c : parameters) {
> System.out.print(c.getSimpleName() + " ");
> }
> }
> System.out.println(")");
> }
> }
> 
> /**
> * Register a method that has no parameters. parameter obj the object that
> * contains the method to invoke parameter name the name of the method
> */
> MethodRelay(Object obj, String name) {
> this(obj, name, (Class[]) null);
> }
> 
> /**
> * Execute a paramerterless method
> */
> void execute() {
> execute((Object[]) null);
> }
> 
> /**
> * Execute a method with parameters parameter data a comma separated list of
> * values to be passed to the method
> */
> void execute(Object... data) {
> if (handlerObject != null) {
> try {
> handlerMethod.invoke(handlerObject, data);
> } 
> catch (Exception e) {
> System.out.println("Error on invoke");
> }
> }
> }
> }
> //Button Class by Flolo W ;)
> }
> 
> ```

**Example Sketch:**

> **Click to see code**
>
> ```auto
> Button b;
> void setup() {
> rectMode(CENTER);
> size(600, 600);
> b = new Button(this, "bestButton", "coolFunction", width/2, height/2, 500, 300);
> }
> void draw() {
> background(0);
> b.showDebug();
> }
> void coolFunction(String s){
> println("coolFunction is called by: " + s);
> }
> 
> ```