# At work with the class

**URL:** <https://discourse.processing.org/t/at-work-with-the-class/21954>\
**Category:** Coding Questions\
**Created:** [June 17, 2020, 3:58pm UTC](https://discourse.processing.org/t/at-work-with-the-class/21954 "2020-06-17T15:58:20Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![marika20](https://avatars.discourse-cdn.com/v4/letter/m/d26b3c/32.png) [@marika20](https://discourse.processing.org/u/marika20)\
**Post date:** [June 17, 2020, 3:58pm UTC](https://discourse.processing.org/t/at-work-with-the-class/21954/1 "2020-06-17T15:58:20Z")

</div>

Hi everyone I need a confirmation or a hand for a game: I am working with colored buttons and I need to understand if when I step on with the mouse they are selected and then transported within my sketch.  
Can anyone tell me if how I did it could be correct?

```auto
float posOriginaleX;
float posOriginaleY;
color verde_color = (#12E300); 
color viola_color = (#E200E3);
color arancio_color = (#E38100);

Bottone Bottone_verde;
Bottone Bottone_viola;
Bottone Bottone_arancio;

void setup() {
  size(600, 600);
  posOriginaleX = 160;
  posOriginaleY = 20;
  Bottone_verde = new Bottone(posOriginaleX, posOriginaleY, 2, 0, 255, color (0, 255, 0)); 
  Bottone_viola = new Bottone(posOriginaleX, posOriginaleY, 1, 0, 255, color(255, 0, 255));
  Bottone_arancio = new Bottone(posOriginaleX, posOriginaleY, 3, 0, 255, color(255, 117, 20));
}

void draw() {
  background(0);

  Bottone_verde.display();
  Bottone_verde.update();

  Bottone_viola.display();
  Bottone_viola.update();

  Bottone_arancio.display();
  Bottone_arancio.update();
}

void mouseDragged() {
  if (mouseButton == LEFT) {
  }
}
class Bottone {
  float posOriginaleX, posOriginaleY;
  float posX, posY;
  int size, min, max;
  color c;
  //Bottone Bottone;

  Bottone(float xPosOrigin, float yPosOrigin, float xpos, float ypos, int s, color col) {
    posOriginaleX = xPosOrigin;
    posOriginaleY = yPosOrigin;
    posX = xpos;
    posY = ypos;
    size = s;
    c = col;
  }

  void display() {
    noStroke();
    fill(verde_color);
    rect (posOriginaleX, posOriginaleY, 80, 80);
    fill(viola_color);
    rect (posOriginaleX+100, posOriginaleY, 80, 80);
    fill(c);
    rect (posOriginaleX+200, posOriginaleY, 80, 80);
  }

  void update() {
    isInside();
  }

  boolean isInside() {
    if (mouseX >= posOriginaleX && mouseX <= posOriginaleX && mouseY >= posOriginaleY && mouseY <= posOriginaleY) return true;
    else return false;
  }
}

```

Thanks

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [June 17, 2020, 4:58pm UTC](https://discourse.processing.org/t/at-work-with-the-class/21954/2 "2020-06-17T16:58:20Z")

</div>

> [@marika20](#):
>
> I need to understand if when I step on with the mouse they are selected and then transported within my sketch.

Hi,

Could you explain a little bit more? Do you mean draggable?

---

<div class="post-metadata">

**Author:** ![marika20](https://avatars.discourse-cdn.com/v4/letter/m/d26b3c/32.png) [@marika20](https://discourse.processing.org/u/marika20)\
**Post date:** [June 17, 2020, 5:24pm UTC](https://discourse.processing.org/t/at-work-with-the-class/21954/3 "2020-06-17T17:24:31Z")

</div>

Si esatto devo riuscire a spostare i miei quadratini all’interno del mio sketch, quindi verificare quando il mio mouse è sul quadratino e quando no.

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [June 17, 2020, 6:50pm UTC](https://discourse.processing.org/t/at-work-with-the-class/21954/4 "2020-06-17T18:50:27Z")

</div>

This example should help with determining when mouse is over the rectangle areas:

[https://processing.org/examples/rollover.html](https://processing.org/examples/rollover.html)

And to drag the rectangle(s), x and y variables would be mouseX and mouseY.

---

<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:** [June 18, 2020, 1:03pm UTC](https://discourse.processing.org/t/at-work-with-the-class/21954/5 "2020-06-18T13:03:59Z")

</div>

Hello !

When I look into your class:

> [@marika20](#):
>
> ```auto
> fill(verde_color);
> rect (posOriginaleX, posOriginaleY, 80, 80);
> fill(viola_color);
> rect (posOriginaleX+100, posOriginaleY, 80, 80);
> fill(c);
> rect (posOriginaleX+200, posOriginaleY, 80, 80);
> 
> ```

please read again the tutorial about objects. See [Objects / Processing.org](https://www.processing.org/tutorials/objects/)

These lines above are wrong.

They show the 3 buttons `INSIDE` the class.

But the class has the purpose to represent only ONE button and to display only one button. He doesn’t know about the other buttons.

The class is the cookie maker, the objects (your 3 buttons) are the cookies.

**The correct way**

The correct way is in your draw() function:

> [@marika20](#):
>
> ```auto
> Bottone_verde.display();
> Bottone_verde.update();
> 
> Bottone_viola.display();
> Bottone_viola.update();
> 
> Bottone_arancio.display();
> Bottone_arancio.update();
> 
> ```

Correct is calling each button separately. (maybe `update` _before_ `display`).

**In setup()**

but alas, the way you build the buttons in setup is not correct, because they all have the same position…

> [@marika20](#):
>
> ```auto
> Bottone_verde = new Bottone(posOriginaleX, posOriginaleY, 2, 0, 255, color (0, 255, 0)); 
> Bottone_viola = new Bottone(posOriginaleX, posOriginaleY, 1, 0, 255, color(255, 0, 255));
> Bottone_arancio = new Bottone(posOriginaleX, posOriginaleY, 3, 0, 255, color(255, 117, 20));
> 
> ```

You want

```auto
  Bottone_verde = new Bottone(posOriginaleX, posOriginaleY, 2, 0, 255, color (0, 255, 0)); 
  Bottone_viola = new Bottone(posOriginaleX+100, posOriginaleY, 1, 0, 255, color(255, 0, 255));
  Bottone_arancio = new Bottone(posOriginaleX+200, posOriginaleY, 3, 0, 255, color(255, 117, 20));

```

or so…

Chrisir 😉