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

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.

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

You might try this

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.

5 Likes

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)

5 Likes

Try this:

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

2 Likes

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

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

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.

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