# Increment within class

**URL:** <https://discourse.processing.org/t/increment-within-class/36261>\
**Category:** Coding Questions\
**Created:** [April 10, 2022, 4:40pm UTC](https://discourse.processing.org/t/increment-within-class/36261 "2022-04-10T16:40:59Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Whell](https://avatars.discourse-cdn.com/v4/letter/w/9e8a1a/32.png) [@Whell](https://discourse.processing.org/u/Whell)\
**Post date:** [April 10, 2022, 4:40pm UTC](https://discourse.processing.org/t/increment-within-class/36261/1 "2022-04-10T16:40:59Z")

</div>

Hi, i’m trying to draw a button as an exercise, with hover effect, this button i’m doing have a dot close to each corner of the button, on the outside and this dot is supposed to animate entering the button, the problem is it only increment one time, i’ve tested only this animation in another sketch without writing in a class, just in the draw function and it worked just fine. i’ve tried using a for loop as well, but i got a grey screen.

The question is, how do animate something using the incrementing variable within the class?

This is my code

```auto
Button b = new Button();
PFont space;

void setup () {
  size(700, 700);
  space = createFont("SpaceGrotesk-Medium.ttf", 72);
}

void draw () {
  background(0);
  b.display("ENVIAR", 50, 50, 72);
}

class Button {

  void display(String buttonTitle, int x, int y, int t) {
    int dot = 3;
    int paddingLR = 20;
    int paddingTB = t/2;
    int w = (int)textWidth(buttonTitle)+paddingLR*2;
    int h = t+paddingTB*2;

//mL stands for margin Left, so the others are margin Top, Right, Bottom.
    int mL = x-10;
    int mT = y-10;
    int mR = x+w+10;
    int mB = x+h+10;

    color mainColor = color(#85D89C);
    color hoverColor = color(#6CB27F);
    color bttnColor = mainColor;

    if (mouseX>x && mouseX<w && mouseY>y && mouseY<h) {
      bttnColor = hoverColor;
        mL++;
        mT++;
        mR--;
        mB--;
    } else {
      bttnColor = mainColor;
        mL--;
        mT--;
        mR++;
        mB++;
    }

    stroke(255);
    strokeWeight(2);
    fill (bttnColor);
    rect(x, y, w, h);

    noStroke();
    fill(#FFFFFF);
    rect(mL, mT, dot, dot);
    rect(mR, mT, dot, dot);
    rect(mR, mB, dot, dot);
    rect(mL, mB, dot, dot);

    textFont(space);
    textSize(t);
    textAlign(LEFT, CENTER);
    text(buttonTitle, x+paddingLR, y+paddingTB+t/3);
  }
}

```

Thank you for your attention!

---

<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:** [April 10, 2022, 9:25pm UTC](https://discourse.processing.org/t/increment-within-class/36261/2 "2022-04-10T21:25:57Z")

</div>

> [@Whell](#):
>
> ```auto
> if (mouseX>x && mouseX<w
> 
> ```

Instead of w, don’t you want x+w ?

- same for y

---

<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:** [April 10, 2022, 9:38pm UTC](https://discourse.processing.org/t/increment-within-class/36261/3 "2022-04-10T21:38:02Z")

</div>

You don’t have a constructor

You don’t have class variables that are global within the class. Therefore your variables are resetted in every call of display ()

---

<div class="post-metadata">

**Author:** ![Whell](https://avatars.discourse-cdn.com/v4/letter/w/9e8a1a/32.png) [@Whell](https://discourse.processing.org/u/Whell)\
**Post date:** [April 12, 2022, 5:58pm UTC](https://discourse.processing.org/t/increment-within-class/36261/4 "2022-04-12T17:58:26Z")

</div>

Yeah, that was a mistake i didn’t notice, thank you.

---

<div class="post-metadata">

**Author:** ![Whell](https://avatars.discourse-cdn.com/v4/letter/w/9e8a1a/32.png) [@Whell](https://discourse.processing.org/u/Whell)\
**Post date:** [April 12, 2022, 6:42pm UTC](https://discourse.processing.org/t/increment-within-class/36261/5 "2022-04-12T18:42:49Z")

</div>

I’ve tried to put the variables in the constructor but had some issues like w cannot be resolved as a variable or w doesn’t extist, etc. It got messy in my head.

I think i’ll make a simpler exercise to understand better how the class variable works and then come back to this.

Thank you very much for your help.

---

<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:** [April 13, 2022, 11:40am UTC](https://discourse.processing.org/t/increment-within-class/36261/6 "2022-04-13T11:40:18Z")

</div>

this works

```auto
Button b;
PFont space;

void setup () {
  size(700, 700);

  space = createFont("ARIAL", 72); // ("SpaceGrotesk-Medium.ttf", 72);
  b = new Button("ENVIAR", 50, 50, 72);
}

void draw () {
  background(0);
  b.display();
}

//===========================================================================

class Button {

  // the fields of the class
  float x, y, t ;

  String buttonTitle="";

  int dot = 3;
  int paddingLR = 20;
  int paddingTB = int(t/2);
  float w, h; 

  color mainColor = color(#85D89C);
  color hoverColor = color(#6CB27F);
  color bttnColor = mainColor;

  // mL stands for margin Left, so the others are margin Top, Right, Bottom. See resetFourPoints().
  float mL ;
  float mT ;
  float mR ;
  float mB ;

  // constructor  
  Button(String buttonTitle_, 
    int x_, int y_, 
    int t_ ) {
    buttonTitle=buttonTitle_; 
    x=x_;
    y=y_;
    t=t_;

    textFont(space);
    textSize(t);
    w = (int)textWidth(buttonTitle)+paddingLR*2;
    h = t+paddingTB*2;

    resetFourPoints();
  }// constructor

  // the methods of the class
  void display() {
    if (mouseX>x && 
      mouseX<x+w &&
      mouseY>y && 
      mouseY<y+h) {
      bttnColor = hoverColor;
      mL++;
      mT++;
      mR--;
      mB--;
    } else {
      bttnColor = mainColor;
      resetFourPoints();
      //mL--;
      //mT--;
      //mR++;
      //mB++;
    }

    stroke(255);
    strokeWeight(2);
    fill (bttnColor);
    rect(x, y, w, h);

    noStroke();
    fill(#FFFFFF);
    rect(mL, mT, dot, dot);
    rect(mR, mT, dot, dot);
    rect(mR, mB, dot, dot);
    rect(mL, mB, dot, dot);

    textFont(space);
    textSize(t);
    textAlign(LEFT, CENTER);
    text(buttonTitle, x+paddingLR, y+paddingTB+t/3);
  }

  void resetFourPoints() {
    mL = x-10;
    mT = y-10;
    mR = x+w+10;
    mB = y+h+10;
  }//method
  //
}//class
//

```