Increment within class

Processing Coding Questions
1

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

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!

1 Like
2

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

  • same for y
3

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

1 Like
4

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

1 Like
5

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.

1 Like
6

this works

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