# Why is my button placed like that?

**URL:** https://discourse.processing.org/t/why-is-my-button-placed-like-that/11165
**Category:** Beginners
**Created:** [May 12, 2019, 11:30am UTC](https://discourse.processing.org/t/why-is-my-button-placed-like-that/11165 "2019-05-12T11:30:45Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![anna](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@anna](https://discourse.processing.org/u/anna)
#### Post date: [May 12, 2019, 11:30am UTC](https://discourse.processing.org/t/why-is-my-button-placed-like-that/11165/1 "2019-05-12T11:30:45Z")

</div>

I have:

```auto
void setup() {
  size(1250,800);
}

```

and I would like my button:

```auto
  rect(495,500,260,260,35); 

```

to be placed in the middle of the screen.

So I thought I could make a button

```auto
rect(button2X, buttonY, buttonSize, buttonSize, 35);

```

with:

```auto
int buttonSize = 260;
int buttonY = 500; 
int button2X = width/2-(buttonSize/2); 

```

but when I play the code, It looks like this:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f53fdd62dc7be7e5b7023fd424afe5178e178a8b.png)

PS. it’s the one on the far left, that is supposed to be in the middle like this:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/27bded643cfd61b63fb26f07dba161abb5bb16f9.png)

---

<div class="post-metadata">

### Author: ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)
#### Post date: [May 12, 2019, 11:36am UTC](https://discourse.processing.org/t/why-is-my-button-placed-like-that/11165/2 "2019-05-12T11:36:02Z")

</div>

> [@anna](#):
>
> button2X = width/2-(buttonSize/2);

The problem is that the `width` variable is not set until the `size()` method is executed in `setup()`

Change your code to

```auto
int buttonSize = 260;
int buttonY = 500; 
int button2X; 

```

and in setup

```auto
void setup(){
    size(480, 320); // use your own width and height
    button2X = width/2-(buttonSize/2); 
    // rest of your setup code
}

```

---

<div class="post-metadata">

### Author: ![anna](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@anna](https://discourse.processing.org/u/anna)
#### Post date: [May 12, 2019, 11:36am UTC](https://discourse.processing.org/t/why-is-my-button-placed-like-that/11165/3 "2019-05-12T11:36:56Z")

</div>

That makes a lot of sense, thank you!!