# \[Solved\] Drawing lots of circles

**URL:** <https://discourse.processing.org/t/solved-drawing-lots-of-circles/13697>\
**Category:** Beginners\
**Created:** [August 30, 2019, 12:33am UTC](https://discourse.processing.org/t/solved-drawing-lots-of-circles/13697 "2019-08-30T00:33:18Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![nicnut](https://avatars.discourse-cdn.com/v4/letter/n/7feea3/32.png) [@nicnut](https://discourse.processing.org/u/nicnut)\
**Post date:** [August 30, 2019, 12:33am UTC](https://discourse.processing.org/t/solved-drawing-lots-of-circles/13697/1 "2019-08-30T00:33:18Z")

</div>

Hi,

I am new to Processing and still have lots to learn and there is a ton I don’t understand.

I watched the Youtube Coding Train video on For Loops and While Loops. In the video he uses a while loop to draw lot’s of lines.

I basically changed his code, as I am trying to draw lot’s of circles, but I only get one circle. I left in the code that draws lot’s of lines so you can see what I am referencing.

I think this is the first step to what I am trying to do, which is create a more complex animation around this, but I want to start with this concept.

Thanks you, I’m posting my code below.

```auto
int r = 0;
int x = 0;
int circles = 300;

void setup(){

size(600,600);
  background(255);
}

void draw(){
  

while (r < width){
  ellipse(width/2, height/2, r, r); // while loop
  r = r + 10;
}

while (x < width){
  line(x, 0, x,height); // while loop
  x = x + 20;
}

}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [August 30, 2019, 1:46am UTC](https://discourse.processing.org/t/solved-drawing-lots-of-circles/13697/2 "2019-08-30T01:46:09Z")

</div>

you can try a

```auto
  noFill();

```

in setup();

like:

```auto
int r = 0,x = 0;

void setup() {
  size(600, 600);
  background(255);
  noFill();
}

void draw() {
  while (r < width) circle(width/2, height/2, r+=40); 
  while (x < width) line(x+=20, 0, x, height); 
}

```

also i want show a FOR loop version

```auto
void setup() {
  size(600, 600);
  noFill();
  stroke(0);
}

void draw() {
  background(200,200,0);
  for ( int d=0;d < width; d+=40) circle(width/2, height/2, d); 
  for ( int x=0;x < width; x+=20) line(x, 0, x, height); 
  for ( int y=0;y < height; y+=20) line(0, y, width, y); 
}

```

---

<div class="post-metadata">

**Author:** ![nicnut](https://avatars.discourse-cdn.com/v4/letter/n/7feea3/32.png) [@nicnut](https://discourse.processing.org/u/nicnut)\
**Post date:** [August 30, 2019, 2:12am UTC](https://discourse.processing.org/t/solved-drawing-lots-of-circles/13697/3 "2019-08-30T02:12:34Z")

</div>

Yes. noFill(); that’s it!!

thanks, Nick

---

<div class="post-metadata">

**Author:** ![Waboqueox](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/waboqueox/32/5643_2.png) [@Waboqueox](https://discourse.processing.org/u/Waboqueox)\
**Post date:** [August 30, 2019, 6:56am UTC](https://discourse.processing.org/t/solved-drawing-lots-of-circles/13697/4 "2019-08-30T06:56:05Z")

</div>

In order to know what was happening, is just that you were drawing the circles but all in the same point, and the draws are done in the same order you write in your code, so the circles were being painted each one over the last one , that’s why you could only see the bigger one, you could also do drawing in the opposite order:

```auto
int r = 0;
int x = 0;
int circles = 300;

void setup(){

size(600,600);
  background(255);
}

void draw(){
  
while (r < width){
  ellipse(width/2, height/2, width - r , width - r); // while loop
  r = r + 10;
}

while (x < width){
  line(x, 0, x,height); // while loop
  x = x + 20;
}

}

```

😃