Background hides circles inside the for loop

p5.js Beginners
1

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;
}
}

2

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.

3

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

4

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

You could even make the for loop look like this:

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