# Weird background stroke of a growing circle

**URL:** <https://discourse.processing.org/t/weird-background-stroke-of-a-growing-circle/36588>\
**Category:** Coding Questions\
**Created:** [April 25, 2022, 2:30pm UTC](https://discourse.processing.org/t/weird-background-stroke-of-a-growing-circle/36588 "2022-04-25T14:30:09Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![hannymymy](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@hannymymy](https://discourse.processing.org/u/hannymymy)\
**Post date:** [April 25, 2022, 2:30pm UTC](https://discourse.processing.org/t/weird-background-stroke-of-a-growing-circle/36588/1 "2022-04-25T14:30:09Z")

</div>

Hello everyone! I’m very new to processing and have a few questions regarding this code:  
It is supposed to be a growing and a shrinking circle, and it works, but the background is such a weird black pattern, that I don’t know how to get rid of. Does anyone have an idea? I’d like to incoorperate the variables into the void draw() but I don’t know how to do that

 ![Bildschirmfoto 2022-04-25 um 16.27.01](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/b/2b2784ad481c8a313b23018f70aa84e136237009.jpeg)

```auto

 int c = 0;
 int d = 500;
 
 void setup() 
{
  size(500, 500);
  background(200);
}

void draw() { 

 if ( c <= 500) {
   
  fill(270, 72, 204);
  circle(width/2, height/2, c); 
  c += 1;
  fill(200, 91, 71);
  circle(width/2, height/2, d);
  d -= 2;
 
  } else {
    
   c = 0;
   d = 500;
     
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 25, 2022, 2:40pm UTC](https://discourse.processing.org/t/weird-background-stroke-of-a-growing-circle/36588/2 "2022-04-25T14:40:18Z")

</div>

> [@hannymymy](#):
>
> `background(200);`

Repeat this line at the start of draw()

---

<div class="post-metadata">

**Author:** ![hannymymy](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@hannymymy](https://discourse.processing.org/u/hannymymy)\
**Post date:** [April 25, 2022, 2:51pm UTC](https://discourse.processing.org/t/weird-background-stroke-of-a-growing-circle/36588/3 "2022-04-25T14:51:13Z")

</div>

yes I’ve tried that and it works, but I want to add another thing to draw that would be covered by the background then

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 25, 2022, 3:07pm UTC](https://discourse.processing.org/t/weird-background-stroke-of-a-growing-circle/36588/4 "2022-04-25T15:07:26Z")

</div>

Just draw it in draw() after the background command

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [April 25, 2022, 8:12pm UTC](https://discourse.processing.org/t/weird-background-stroke-of-a-growing-circle/36588/5 "2022-04-25T20:12:12Z")

</div>

Hi

May this close to your demand

```auto
void setup () {
size (600,600);
colorMode(HSB);
}
void draw(){
for(int i= 500; i >0; i=i -2) {
  stroke((i/2) + (mouseX/3), 255,255);
ellipse (300,300,i,i);
}
}

```

 ![Screenshot_2022-04-25-23-09-32-310](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/3/33d262d1ccbac3136b2d59da41cedb0b74bb3195.jpeg)  
 ![Screenshot_2022-04-25-23-10-07-140](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/b/5/b58ac4b4c7a26833e2d0f61d256ca9a2611dda28.jpeg)

---

<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:** [April 25, 2022, 9:34pm UTC](https://discourse.processing.org/t/weird-background-stroke-of-a-growing-circle/36588/6 "2022-04-25T21:34:55Z")

</div>

Hello @hannymymy,

The default _strokeWeight_ is 1 pixel.

What your are seeing is the black stroke (outline) of the circle being painted to the screen and generating _moiré_ patterns:

> **[Moiré Loops in Java (Processing) @ Think Space Studio](https://thinkspacestudio.com/tutorials/moire_loops_in_java)**
>
> A Moiré pattern is a pattern that is created as a visual artifact from drawing a lot of lines close together.  Learn how to create your own with very simple applications of loops in Java & Processing.

Try adding _stroke(2)_ to _setup()_ and see what happens.

Reference:

> **[Reference](https://processing.org/reference/strokeWeight_.html)**
>
> Sets the width of the stroke used for lines, points, and the border around shapes. All widths are set in units of pixels. Using point() with strokeWeight(1) or smaller may draw nothing t…

Remove _strokeWeight(2)_ and try adding _noStroke()_ to _setup()_ and see what happens.

Reference:

> **[Reference](https://processing.org/reference/noStroke_.html)**
>
> Disables drawing the stroke (outline). If both noStroke() and noFill() are called, nothing will be drawn to the screen.

Have fun!

`:)`