# Background hides circles inside the for loop

**URL:** https://discourse.processing.org/t/background-hides-circles-inside-the-for-loop/21377
**Category:** Beginners
**Created:** [May 28, 2020, 4:57pm UTC](https://discourse.processing.org/t/background-hides-circles-inside-the-for-loop/21377 "2020-05-28T16:57:16Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![dumash](https://avatars.discourse-cdn.com/v4/letter/d/8491ac/32.png) [@dumash](https://discourse.processing.org/u/dumash)
#### Post date: [May 28, 2020, 4:57pm UTC](https://discourse.processing.org/t/background-hides-circles-inside-the-for-loop/21377/1 "2020-05-28T16:57:16Z")

</div>

Hi,

I am trying to draw a set of circles using the for loop.

It works just fine, the problem is that the background (also inside the draw() function) makes the circle disappear.

When I move the background to the setup() it also work, but I wanted the background in the draw() function.

Here is the code and thanks

* * *

let x=0;

function setup() {  
createCanvas(400, 400);  
}

function draw() {

background(0);

```
fill(255);

```

## for(let i=0; i\< 10; i++){ circle(x, height/2, 30); x = x + 20; } }

---

<div class="post-metadata">

### Author: ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)
#### Post date: [May 28, 2020, 5:18pm UTC](https://discourse.processing.org/t/background-hides-circles-inside-the-for-loop/21377/2 "2020-05-28T17:18:02Z")

</div>

The `background()` is not making the circle disappear… you are updating the x position each frame resulting in the circle moving to the right and off the canvas.

instead of `x + x = 20`, try something like `x+=2` and you can see it animate.

---

<div class="post-metadata">

### Author: ![virtuous1](https://avatars.discourse-cdn.com/v4/letter/v/b9bd4f/32.png) [@virtuous1](https://discourse.processing.org/u/virtuous1)
#### Post date: [June 1, 2020, 2:45pm UTC](https://discourse.processing.org/t/background-hides-circles-inside-the-for-loop/21377/3 "2020-06-01T14:45:02Z")

</div>

Adding a fourth parameter to the background function will add transparency. The lower the number the more transparent it will be.

---

<div class="post-metadata">

### Author: ![musiciantriescoding](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/musiciantriescoding/32/7662_2.png) [@musiciantriescoding](https://discourse.processing.org/u/musiciantriescoding)
#### Post date: [June 2, 2020, 7:29am UTC](https://discourse.processing.org/t/background-hides-circles-inside-the-for-loop/21377/4 "2020-06-02T07:29:14Z")

</div>

Yes, another solution is to put `let x = 0` inside of the draw function.

You could even make the for loop look like this:

```auto
for(let x = 0; x < 10; x++){
   circle(x*20, height/2, 30);
}

```