Complex variables

[humano]

Hi guys,

I’m trying to put all this code in a variable, but I don’t know how to do it. I mean, I only know how to do simple variables, but not variables that have many lines. Can you help my?

I need to create a variable called button that englobes this code:

 //this is my button 
  fill(255,95,95);
  noStroke();
  circle(width/2, height/1.35, height/9);
  noFill();
  stroke(255);
  strokeWeight(4);
  circle(width/2, height/1.35, height/16); 
  noStroke();
  fill(255);
  circle(width/2, height/1.35, height/80);
}

[glv]

@humano

I need to create a variable called button that englobes this code

You can put the code into a function.

Google search for “Processing function”

[Chrisir]

Actually, you want a class Button.

From a class one object is or many objects are derived

Read the tutorial object on the website in the tutorials section

[Waboqueox]

This series of tutorials are nice to start and learn about classes

[glv]

There are also the Java Tutorials:
https://docs.oracle.com/javase/tutorial/index.html
https://docs.oracle.com/javase/tutorial/java/concepts/index.html

The Processing website is here:
https://processing.org/

And the tutorials section of the Processing website has some great tutorials:

Objects - The basics of object-oriented programming

is one of them.

I did this (my interpretation of what you asked) last night using functions and classes as an exercise.

This a worthwhile exercise.

[kll]

while @glv is close,
with his idea of a function what would be STEP 1

but only after STEP 0 is completed.

sorry @humano, that is not a functioning button

and if you not have the functions of a button,
how can that be arranged / rewritten from

• basic button

TO

• variables and functions
• functions with arrays
• class
• array of class

because none of these steps you would understand nor would they work
with just your circles.

---

so i would recommend that you follow glv’s advice ( about variables and functions )
after you have, play, understand
something like i call a “hard coded button”

boolean sel = false;

void setup() {
  size(300,300);
}

void draw() {
  background(200, 200, 0);
  if (sel)   fill(0, 200, 0);
  else       fill(0, 0, 200);
  if (mouseX > 100 & mouseX < 180 & mouseY > 100 & mouseY < 130) stroke(200, 0, 200);
  else                                                           stroke(0, 200, 200);
  strokeWeight(3);
  rect(100, 100, 80, 30);
  noStroke();
  fill(200);
  text("press", 110, 120);
}

void mousePressed() {
  if (mouseX > 100 & mouseX < 180 & mouseY > 100 & mouseY < 130)  sel = !sel; // button action
}

well, this is not what you want, but it is the minimum what you need to start from.
sorry, i know its heavy.

[kll]

today now the mentioned next ( actually 2 ) step:
variables and functions

// -a- using additional variables for button position 
// -b- using a function for the button and telling it / handing down / the button variables
// -c- and one function for mouse over

// please see how little change needed now, to make one more button  (2)

//_____________________________________________________________ button variables: (1)
int x1 = 100, y1 = 100, w1 =80, h1 =30;
boolean sel1 = false;
String text1 = "text1";

int x2 = x1, y2 = y1+h1+10, w2 =w1, h2 =h1; //_________________ button variables: (2)
boolean sel2 = false; //_______________________________________ (2)
String text2 = "text2"; //_____________________________________ (2)


void setup() {
  size(300, 300);
}

void draw() {
  background(200, 200, 0);
  myButton(x1, y1, w1, h1, sel1, text1);
  myButton(x2, y2, w2, h2, sel2, text2); //____________________ button call: (2)
}

void mousePressed() {
  if ( over(x1, y1, w1, h1) ) sel1 = ! sel1;            // button 1 action
  if ( over(x2, y2, w2, h2) ) sel2 = ! sel2;            // button 2 action: (2)
}


void myButton(int x, int y, int w, int h, boolean sel, String atext) {
  if ( sel )               fill(0, 200, 0);
  else                     fill(0, 0, 200);
  strokeWeight(3);
  if ( over(x, y, w, h) )  stroke(200, 0, 200);
  else                     stroke(0, 200, 200);
  rect(x, y, w, h);
  noStroke();
  fill(200);
  text(atext, x+10, y+h-10);
}

boolean over(int x, int y, int w, int h) {
  return ( mouseX > x & mouseX < x + w &  mouseY > y & mouseY < y + h ) ;
}

if you understand this, all your future ( mouse operated ) projects
will have / use that

over(rx,ry,rw,rh);

function ( inside or outside a class ), and not

if (mouseX > 100 & mouseX < 180 & mouseY > 100 & mouseY < 130) …

[glv]

@humano

I need to create a variable called button that englobes this code

Did you find a solution to your original quest?

[kll]

yes, as @glv asked, what is your status, and how far you understand this here?

---

now as earlier you hear from @Chrisir
the next step would be a Button class
( as that is a bigger step you might play with it a day )

// here we make a class for ONE Button.
// a class has 2 advantages, it has a own set of memory, with mixed variable types...
// like a record struct
// and it can have methods ( functions ) included.
// https://processing.org/reference/class.html

Button myButton = new Button(100, 100, 80, 30, false, "text", 0); // make a button of type class Button

// handing parameter  Button( x , y , w , h , initial ONOFF , description test , serial id );

// in that case not need predefined variables, ( the button ( a class ) remembers its settings )
// but in later cases like making a button row as array of class it might make sense again to define int xi,yi,wi,hi...

void setup() {
  size(300, 300);
}

void draw() {
  background(200, 200, 0);
  myButton.draw();
}

class Button { //________________________________________ begin class
  int x, y, w, h, id;
  boolean click=false, sel;
  String atext;

  Button(int _x, int _y, int _w, int _h, boolean _sel, String _atext, int _id) {
    x = _x;
    y = _y;
    w = _w;
    h = _h;
    sel = _sel;
    atext = _atext;
    id = _id;
  }

  void  draw() {
    mouse(); //__________________________________________ check on operation
    if (sel)       fill(0, 200, 0); //___________________ ON OFF fill color
    else           fill(0, 0, 200);
    if (over())    stroke(200, 0, 200); //_______________ hover stroke color
    else           stroke(0, 200, 200);
    strokeWeight(3);
    rect(x, y, w, h); //_________________________________ button area as rectangle
    noStroke(); //_______________________________________ button text ( here only one )
    fill(200);
    text(atext, x + 10, y + h  - 10);
  }

  boolean  over() {
    return (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + h);
  }

  void  mouse() {
    if ( over() && mousePressed && !click) { //__________ operation
      click = true; //___________________________________ just clicked
      sel = !sel; //_____________________________________ toggle action
    }
    if ( over() && !mousePressed )  click = false; //____ reset
  }
  
} //_____________________________________________________ end class

[humano]

thank you so much, your explications are really exhaustive and I think that I’m close to understand it!

[kll]

there is one more step,
and i know it is of no use for you now,
but possibly later that question will come up.
( and i want that topic here as a kind of complete sequence ( mini tutorial ) )

a class what can draw itself …
( you might already notice when you compare the mouse action code
of this ( to the above example of a easy class )
interaction works much better this way.

// we have already a simple class for ONE Button,
// but there is one step more, what brings it closer to the objects / elements you might know from some libraries.
// a button what can draw itself ( no need to call it in/from draw() )
// also has its own key and mouse functions registered

// but all this also has its disadvantages, besides the overhead,
// if you not need it anymore how you stop it? you need to make a add show / hide method ...


Button myButton = new Button(this, 100, 100, 80, 30, false, "text", 0); // make a button of type class Button

void setup() {
  size(300, 300);
}

void draw() {
  background(200, 200, 0);
}

void keyPressed() { // test button disable
  if ( key == 's' ) myButton.setShow(true);  
  if ( key == 'h' ) myButton.setShow(false);
}


public class Button { //________________________________________ begin class BUTTON
  PApplet pa;
  int x, y, w, h, id;
  boolean click=false, sel;
  String atext;

  boolean showit=true;

  Button(PApplet pa, int x, int y, int w, int h, boolean sel, String atext, int id) {
    this.pa = pa;
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.sel = sel;
    this.atext = atext;
    this.id = id;

    pa.registerMethod("draw", this);
    pa.registerMethod("mouseEvent", this);
    pa.registerMethod("keyEvent", this);
  }

  public void draw() {
    if ( this.showit ) {
      if (this.sel)       fill(0, 200, 0); //___________________ ON OFF fill color
      else                fill(0, 0, 200);
      if (this.over())    stroke(200, 0, 200); //_______________ hover stroke color
      else                stroke(0, 200, 200);
      strokeWeight(3);
      rect(this.x, this.y, this.w, this.h); //__________________ button area as rectangle
      noStroke(); //____________________________________________ button text ( here only one )
      fill(200);
      text(this.atext, this.x + 10, this.y + this.h  - 10);
    }
  }

  public void setShow(boolean set) {
    this.showit = set;
  }

  public boolean  over() {
    return (mouseX > this.x && mouseX < this.x + this.w && mouseY > this.y && mouseY < this.y + this.h);
  }

  public void mouseEvent(MouseEvent m) {   // from @quark
    if ( this.over() ) {
      switch (m.getAction()) {
      case MouseEvent.PRESS:
        this.sel = !this.sel; //________________________________ toggle memory
        break;
      case MouseEvent.RELEASE:
        //
        break;
      }
    }
  }

  // the keyboard input we not use, just prepare
  public void keyEvent(KeyEvent e) {   // from @quark
    int keyCode = e.getKeyCode();
    char keyChar = e.getKey();
    int keyID = e.getAction();
    if (keyID == KeyEvent.PRESS  ) keyPressedProcess(keyCode, keyChar);
    if (keyID == KeyEvent.RELEASE) keyReleasedProcess(keyCode, keyChar);
  }
  // here we use .sel like a focus for test
  protected void keyPressedProcess(int keyCode, char keyChar) {
    if ( this.sel ) println("Button: "+this.id+"  keyPressed, key "+keyChar);
  }

  protected void keyReleasedProcess(int keyCode, char keyChar) {
    if ( this.sel ) println("Button: "+this.id+"  keyPressed, key "+keyChar);
  }
} //_____________________________________________________ end class

[Tiemen]

Never considered to draw from a class itself, interesting idea