# Why this rectangle disappear?

**URL:** https://discourse.processing.org/t/why-this-rectangle-disappear/15812
**Category:** Coding Questions
**Created:** [November 25, 2019, 8:23pm UTC](https://discourse.processing.org/t/why-this-rectangle-disappear/15812 "2019-11-25T20:23:29Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![kkxxbdm](https://avatars.discourse-cdn.com/v4/letter/k/b5a626/32.png) [@kkxxbdm](https://discourse.processing.org/u/kkxxbdm)
#### Post date: [November 25, 2019, 8:23pm UTC](https://discourse.processing.org/t/why-this-rectangle-disappear/15812/1 "2019-11-25T20:23:30Z")

</div>

```auto
void setup(){
  size(1000,1000,P3D);
} 

void draw(){
  noStroke();
    fill(0, 20);
    rect(0, 0, width, height);
    pushMatrix();
         pushStyle();
           translate(500, 500);
           rotate(PI/2 + PI/2);
           rectMode(CENTER);
           rect(0, 0, 100, 400);
     popStyle();
     popMatrix();
}

```

If I understand correctly, translate(500,500) will translate (0,0) into position (500,500). rotate(PI/2 + PI/2) will rotate the coordinate system clock-wise for PI radians, then a rectangle with respect to this new coordinate system is drawn, with center (0,0), width and height 100 and 400. When I tried the above code, I did see the rectangle, it disappeared and then with a black screen. Could anyone please let me know how to understand this?

---

<div class="post-metadata">

### Author: ![unique\_username2](https://avatars.discourse-cdn.com/v4/letter/u/aca169/32.png) [@unique\_username2](https://discourse.processing.org/u/unique_username2)
#### Post date: [November 25, 2019, 9:33pm UTC](https://discourse.processing.org/t/why-this-rectangle-disappear/15812/2 "2019-11-25T21:33:14Z")

</div>

Actually, translate(500,500) turns (0,0) into (-500,-500). The translate function moves the graph over by the amount specified(500 right, 500 down). To get the results you are looking for, change  
translate(500,500);  
into  
translate(-500,-500);

---

<div class="post-metadata">

### Author: ![unique\_username2](https://avatars.discourse-cdn.com/v4/letter/u/aca169/32.png) [@unique\_username2](https://discourse.processing.org/u/unique_username2)
#### Post date: [November 25, 2019, 9:36pm UTC](https://discourse.processing.org/t/why-this-rectangle-disappear/15812/3 "2019-11-25T21:36:41Z")

</div>

Also, the rectangle is black.

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [November 25, 2019, 10:02pm UTC](https://discourse.processing.org/t/why-this-rectangle-disappear/15812/4 "2019-11-25T22:02:46Z")

</div>

Hello,

Use background() at start of draw() to set a background.

You are filling entire sketch window with a rect() that is black and drawing a rect() that is black over it.

Set different colors with fill() before each shape to see them.

References:  
[https://processing.org/tutorials/](https://processing.org/tutorials/)  
[https://processing.org/tutorials/drawing/](https://processing.org/tutorials/drawing/)  
[https://processing.org/tutorials/transform2d/](https://processing.org/tutorials/transform2d/)  
[https://processing.org/reference/draw\_.html](https://processing.org/reference/draw_.html)  
[https://processing.org/reference/background\_.html](https://processing.org/reference/background_.html)  
[https://processing.org/reference/fill\_.html](https://processing.org/reference/fill_.html)

🙂