# How to make circles grow and shrink, but each circle to have a delay?

**URL:** <https://discourse.processing.org/t/how-to-make-circles-grow-and-shrink-but-each-circle-to-have-a-delay/39277>\
**Category:** Coding Questions\
**Created:** [October 15, 2022, 2:16am UTC](https://discourse.processing.org/t/how-to-make-circles-grow-and-shrink-but-each-circle-to-have-a-delay/39277 "2022-10-15T02:16:33Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![animanoir](https://avatars.discourse-cdn.com/v4/letter/a/e495f1/32.png) [@animanoir](https://discourse.processing.org/u/animanoir)\
**Post date:** [October 15, 2022, 2:16am UTC](https://discourse.processing.org/t/how-to-make-circles-grow-and-shrink-but-each-circle-to-have-a-delay/39277/1 "2022-10-15T02:16:33Z")

</div>

The best I have is this—I don’t know what I am missing. I want for each circle to have a delay or something, because right now all the circles grow at the same time.

```auto
int size = 300;
float theta;

void setup() {
  noFill();
  colorMode(HSB, 1.0);
  size(800, 800);
  ellipseMode(CENTER);
  stroke(1.0);
  strokeWeight(3);
  background(0);
  frameRate(30);
}

void draw() {
  background(0);

  for (int i = 1; i <= 10; i++) {
    stroke(1.0, 1.0, 1.0);
    circle(width/2, height/2, map(sin(theta), -1.0, 1.0, 0, width/2)*i*0.1);
  }
  
  theta += 0.1;
}

```

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [October 15, 2022, 8:38am UTC](https://discourse.processing.org/t/how-to-make-circles-grow-and-shrink-but-each-circle-to-have-a-delay/39277/2 "2022-10-15T08:38:24Z")

</div>

You might try this

```auto
circle(width/2, height/2, map(sin(theta + i * 0.3 ), -1.0, 1.0, 0, width/2)*i*0.1);

```

and try different values instead of the 0.3

Might not give the effect you want but its a start.

---

<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:** [October 15, 2022, 8:43am UTC](https://discourse.processing.org/t/how-to-make-circles-grow-and-shrink-but-each-circle-to-have-a-delay/39277/3 "2022-10-15T08:43:12Z")

</div>

You can also have an array of thetas and so each circle has its individual theta (and 2nd array for the value you add to it, so that can be different too)

---

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [October 20, 2022, 7:02pm UTC](https://discourse.processing.org/t/how-to-make-circles-grow-and-shrink-but-each-circle-to-have-a-delay/39277/4 "2022-10-20T19:02:14Z")

</div>

Try this:

```auto
for (int i= 0; i <=180; i++) {
          if(i==180){
                i=0
          }
    thetha = PI*i/180

    circle(width/2, height/2,(width/20)*sin(theta));

  }

```

I divided the width by 20 because I wanted the initial radius of the circle to be small, if you want the initial radius to be smaller, you should divided it by a number greater than 20 and if you want it to be larger, then you divide by a number less than 20. The relationship between the radius of the circle and the denominator is an inverse relationship.

You can also increase the increment operator to i+=2, i+=3 etc

---

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [October 20, 2022, 9:30pm UTC](https://discourse.processing.org/t/how-to-make-circles-grow-and-shrink-but-each-circle-to-have-a-delay/39277/5 "2022-10-20T21:30:34Z")

</div>

To add another circle with delay you should add this line of code and subtract from thetha, e.g.:

```auto
circle(width/2, height/2,(width/20)*sin(theta-0.5));

circle(width/2, height/2,(width/20)*sin(theta-1));

```

You can add as many circles as you wish but you cannot substract a number greater than 2\*PI = 6.28 from thetha. thetha

```auto
circle(width/2, height/2,(width/20)*sin(theta-7));

```

The above shouldn’t be used because 7 is greater than 6.28

You can also change the position of the circles by varying their X and Y positions e.g.

```auto
circle(width/4, height/8,(width/20)*sin(theta-1.4));

```