Single rectangle button

Processing Coding Questions
1

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?

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;
    }
  }
}
1 Like
2

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 ):

  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:

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

(I haven’t done this)

Full CODE

without the rectMode(CENTER); part :

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;
    }
  }
}
//
3

thank you very much <3

1 Like
4

simplified

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;
    }
  }
}
//
5

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

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

Button Class:

Click to see code 
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 
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);
}