# Complex variables

**URL:** <https://discourse.processing.org/t/complex-variables/16349>\
**Category:** Beginners\
**Created:** [December 12, 2019, 6:14pm UTC](https://discourse.processing.org/t/complex-variables/16349 "2019-12-12T18:14:22Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [December 12, 2019, 6:14pm UTC](https://discourse.processing.org/t/complex-variables/16349/1 "2019-12-12T18:14:22Z")

</div>

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:

```auto
 //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);
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 12, 2019, 9:45pm UTC](https://discourse.processing.org/t/complex-variables/16349/2 "2019-12-12T21:45:29Z")

</div>

> [@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”](https://www.google.com/search?rlz=1C1CHBF_enCA822CA822&sxsrf=ACYBGNTVRba3qdIBo-uBfzOIchc7Nz1qvw%3A1576187086924&ei=zrTyXayPOIa0tQb09YSwBg&q=Processing+function+&oq=Processing+function+&gs_l=psy-ab.3..0l3j0i20i263j0l2j0i20i263j0l3.4491.6124..7733...0.1..0.241.399.2j0j1......0....1j2..gws-wiz.......0i71j35i39j0i273j0i7i30j0i67.oTPbc-mXNWo&ved=0ahUKEwisrqm7irHmAhUGWs0KHfQ6AWYQ4dUDCAs&uact=5)

🙂

---

<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:** [December 12, 2019, 10:07pm UTC](https://discourse.processing.org/t/complex-variables/16349/3 "2019-12-12T22:07:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Waboqueox](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/waboqueox/32/5643_2.png) [@Waboqueox](https://discourse.processing.org/u/Waboqueox)\
**Post date:** [December 13, 2019, 7:50am UTC](https://discourse.processing.org/t/complex-variables/16349/4 "2019-12-13T07:50:41Z")

</div>

👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇  
[This series of tutorials are nice to start and learn about classes](https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bb7z2IJaTlzwzIg_5yvL4i)  
👆 👆 👆 👆 👆 👆 👆 👆 👆 👆 👆 👆 👆 👆 👆 👆 👆

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 13, 2019, 10:59am UTC](https://discourse.processing.org/t/complex-variables/16349/5 "2019-12-13T10:59:23Z")

</div>

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

The Processing website is here:  
[https://processing.org/](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.

🙂

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 13, 2019, 11:58am UTC](https://discourse.processing.org/t/complex-variables/16349/6 "2019-12-13T11:58:03Z")

</div>

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”

```auto
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.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 14, 2019, 6:22am UTC](https://discourse.processing.org/t/complex-variables/16349/7 "2019-12-14T06:22:03Z")

</div>

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

```auto
// -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

```auto
over(rx,ry,rw,rh);

```

function _( inside or outside a class )_, and not

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

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 14, 2019, 11:39pm UTC](https://discourse.processing.org/t/complex-variables/16349/8 "2019-12-14T23:39:36Z")

</div>

> [@humano](#):
>
> I need to create a variable called button that englobes this code

Did you find a solution to your original quest?

🙂

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 15, 2019, 1:36am UTC](https://discourse.processing.org/t/complex-variables/16349/9 "2019-12-15T01:36:06Z")

</div>

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 )

```auto
// 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

```

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [December 15, 2019, 2:27am UTC](https://discourse.processing.org/t/complex-variables/16349/10 "2019-12-15T02:27:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 16, 2019, 4:01am UTC](https://discourse.processing.org/t/complex-variables/16349/11 "2019-12-16T04:01:01Z")

</div>

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.

```auto
// 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

```

```auto

```

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [December 16, 2019, 11:46am UTC](https://discourse.processing.org/t/complex-variables/16349/12 "2019-12-16T11:46:05Z")

</div>

Never considered to draw from a class itself, interesting idea 🤭