# Why isn't the box in the center of the screen?

**URL:** <https://discourse.processing.org/t/why-isnt-the-box-in-the-center-of-the-screen/32580>\
**Category:** Coding Questions\
**Created:** [October 3, 2021, 1:55pm UTC](https://discourse.processing.org/t/why-isnt-the-box-in-the-center-of-the-screen/32580 "2021-10-03T13:55:09Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [October 3, 2021, 1:55pm UTC](https://discourse.processing.org/t/why-isnt-the-box-in-the-center-of-the-screen/32580/1 "2021-10-03T13:55:09Z")

</div>

```auto
float x=height/2;
float y=width/2;
float z=0;

void setup(){

size(400,400,P3D);
}
void draw(){
  print(x,y,z);
  background(255);
translate(x, y, z); 
noFill();
box(160);
print(z);
z++;
}

```

---

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [October 3, 2021, 2:04pm UTC](https://discourse.processing.org/t/why-isnt-the-box-in-the-center-of-the-screen/32580/3 "2021-10-03T14:04:26Z")

</div>

i’ve never used push and popmatrix i tried all these and none of them worked

```auto
float x=height/2;
float y=width/2;
float z=0;

void setup(){

size(400,400,P3D);
}
void draw(){
  pushMatrix();
  print(x,y,z);
  background(255);
  pushMatrix();
translate(x, y, z); 
popMatrix();
noFill();
box(160);
print(z);
z++;
}

```

```auto
float x=height/2;
float y=width/2;
float z=0;

void setup(){

size(400,400,P3D);
}
void draw(){
  pushMatrix();
  print(x,y,z);
  background(255);
translate(x, y, z); 
noFill();
box(160);
print(z);
popMatrix();
z++;
}

```

```auto
float x=height/2;
float y=width/2;
float z=0;

void setup(){

size(400,400,P3D);
}
void draw(){
  pushMatrix();
  print(x,y,z);
  background(255);
translate(x, y, z); 
noFill();
box(160);
print(z);
z++;
popMatrix();
}

```

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [October 3, 2021, 2:07pm UTC](https://discourse.processing.org/t/why-isnt-the-box-in-the-center-of-the-screen/32580/4 "2021-10-03T14:07:14Z")

</div>

sorry. you can ignore what i said i didn’t grok what the problem was.

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [October 3, 2021, 2:22pm UTC](https://discourse.processing.org/t/why-isnt-the-box-in-the-center-of-the-screen/32580/5 "2021-10-03T14:22:41Z")

</div>

Your definitions of `x` and `y` happen before `setup()` and since you use `height` and `width` (that are not yet set, you get unexpected results.

Also you define you x and y as float numbers but you are doing an integer division so you’ll always get an integer result.

```auto
float x, y;
float z = 0;

void setup(){
  size(400, 400, P3D);
  x = height / 2.0;
  y = width / 2.0;
}

```

---

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [October 3, 2021, 2:25pm UTC](https://discourse.processing.org/t/why-isnt-the-box-in-the-center-of-the-screen/32580/6 "2021-10-03T14:25:36Z")

</div>

also is there a way to make the box not square?

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [October 3, 2021, 2:31pm UTC](https://discourse.processing.org/t/why-isnt-the-box-in-the-center-of-the-screen/32580/7 "2021-10-03T14:31:28Z")

</div>

I don’t want to be rude but part of your job is to at least look at the reference before asking a question.

You have the answer AND an example in the doc:

> **[Reference](https://processing.org/reference/box_.html)**
>
> A box is an extruded rectangle. A box with equal dimension on all sides is a cube.

---

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [October 3, 2021, 2:47pm UTC](https://discourse.processing.org/t/why-isnt-the-box-in-the-center-of-the-screen/32580/8 "2021-10-03T14:47:50Z")

</div>

I actually did, no idea how i missed that one. i checked for this problem too and couldn’t find it.  
why is there only one box in this code and not 2?

```auto
float x;
float y;
float z=0;
PImage shrek;

float x2;
float y2;
float z2=0;

void setup() {
  shrek= loadImage("shrek.jpg");
  size(400, 400, P3D);
  x=width-60;
  y=height/2;
  
  x=0;
  y=0;
}
void draw() {
  background(255);
  translate(x, y, z);
  strokeWeight(10);
  fill(0,170,255);
  box(60, height-20, 1000);
  push();
  translate(x2,y2,z2);
  box(60, height-20, 1000);
  pop();
}

```

---

<div class="post-metadata">

**Author:** ![rapatski](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rapatski/32/5164_2.png) [@rapatski](https://discourse.processing.org/u/rapatski)\
**Post date:** [October 3, 2021, 7:02pm UTC](https://discourse.processing.org/t/why-isnt-the-box-in-the-center-of-the-screen/32580/9 "2021-10-03T19:02:02Z")

</div>

You’re drawing the two boxes exactly at the same spot, as x2, y2, z2 are all set to 0.

---

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [October 3, 2021, 7:03pm UTC](https://discourse.processing.org/t/why-isnt-the-box-in-the-center-of-the-screen/32580/10 "2021-10-03T19:03:54Z")

</div>

i changed it a bit, it’s still not working

```auto
float x;
float y;
float z=0;
PImage shrek;

float x2;
float y2;
float z2=0;

void setup() {
  shrek= loadImage("shrek.jpg");
  size(400, 400, P3D);
  x=width-60;
  y=height/2;
  
  x2=0;
  y2=0;
}
void draw() {
  background(255);
  translate(x, y, z);
  strokeWeight(10);
  fill(0,170,255);
  box(60, height-20, 1000);
  push();
  translate(x2,y2,z2);
  box(60, height-20, 1000);
  pop();
}

```

---

<div class="post-metadata">

**Author:** ![rapatski](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rapatski/32/5164_2.png) [@rapatski](https://discourse.processing.org/u/rapatski)\
**Post date:** [October 3, 2021, 7:33pm UTC](https://discourse.processing.org/t/why-isnt-the-box-in-the-center-of-the-screen/32580/11 "2021-10-03T19:33:38Z")

</div>

It’s still the exact same problem. Look up “translate” in the reference.

---

<div class="post-metadata">

**Author:** ![JSGauthier](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jsgauthier/32/9910_2.png) [@JSGauthier](https://discourse.processing.org/u/JSGauthier)\
**Post date:** [October 5, 2021, 1:50pm UTC](https://discourse.processing.org/t/why-isnt-the-box-in-the-center-of-the-screen/32580/12 "2021-10-05T13:50:02Z")

</div>

Hi there,

(Woops looks like this was solved prior…)

It appears that you are assigning your values for x and y before width and height are specified in setup().  
Step 1: Declare your variables x,y and z.  
step 2: In setup assign their values (once size if defined).

Note; float and integers will be set to 0 when created so no need to add z = 0 (unless you really want to. ) 🙂

Once size has run and width and height are defined, x and y will work as you wish.

Code works for me now.

> float x,y,z;
> 
> void setup(){  
> size(400,400,P3D);  
> x = height/2;  
> y = width/2;
> 
> }
> 
> void draw(){  
> background(255);  
> noFill();  
> rectMode(CORNER);  
> translate(x, y, z);  
> box(160);  
> print(z);  
> z++;  
> }

Hope this helps.  
Code away!

Cheers,  
JS