# Concentric Circles Animation doubt

**URL:** https://discourse.processing.org/t/concentric-circles-animation-doubt/39992
**Category:** Coding Questions
**Created:** [December 2, 2022, 4:01pm UTC](https://discourse.processing.org/t/concentric-circles-animation-doubt/39992 "2022-12-02T16:01:57Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![JoseRocha](https://avatars.discourse-cdn.com/v4/letter/j/f475e1/32.png) [@JoseRocha](https://discourse.processing.org/u/JoseRocha)
#### Post date: [December 2, 2022, 4:01pm UTC](https://discourse.processing.org/t/concentric-circles-animation-doubt/39992/1 "2022-12-02T16:01:57Z")

</div>

Hi All.

Is it possible to do this kind of animation smoothly with code in p5.js

![Rosca](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/1/4162dd7405ea2a9ccaebcf2b8d773a2db8c278e4.gif)

Thanks for any help.

---

<div class="post-metadata">

### Author: ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)
#### Post date: [December 2, 2022, 5:20pm UTC](https://discourse.processing.org/t/concentric-circles-animation-doubt/39992/2 "2022-12-02T17:20:02Z")

</div>

Hello @JoseRocha

Some additional clarification is needed.  
You’ve tagged this as “processing”, but your question is “p5.js”.

Can you show your code so we know what you have attempted so far?  
🤓

---

<div class="post-metadata">

### Author: ![JoseRocha](https://avatars.discourse-cdn.com/v4/letter/j/f475e1/32.png) [@JoseRocha](https://discourse.processing.org/u/JoseRocha)
#### Post date: [December 2, 2022, 7:00pm UTC](https://discourse.processing.org/t/concentric-circles-animation-doubt/39992/3 "2022-12-02T19:00:02Z")

</div>

Hello @debxyz,

New to this hole thing.

```auto
function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(0);
  
  noFill();
  strokeWeight(4);
  stroke(255);
  
  for (let i = 0; i < 400; i++){
    
    circle (300, 300, 30 + i);
    
  } 
}

```

Not working at all.

Thanks

---

<div class="post-metadata">

### Author: ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)
#### Post date: [December 2, 2022, 7:31pm UTC](https://discourse.processing.org/t/concentric-circles-animation-doubt/39992/4 "2022-12-02T19:31:35Z")

</div>

Hello @JoseRocha

See comments next to relevant lines for explanation.

```auto
let grow = 1;

function setup() {
createCanvas(600, 600);
}

function draw() {
background(0);

noFill();
strokeWeight(4);
stroke(255);

for (let i = 0; i < 3; i++){ //use for loop to count the number of circles you want
if (i == 0){//depending on iteration of "i", set starting circle size
  s = 0;
} else if (i == 1){
    s = 30;
} else {
  s = 60;
}

circle (300, 300, s+grow);
 grow+=1; //grow variable increases by 1 with each draw loop, creating the animation
}
}

```

Hope this helps!  
🤓

---

<div class="post-metadata">

### Author: ![JoseRocha](https://avatars.discourse-cdn.com/v4/letter/j/f475e1/32.png) [@JoseRocha](https://discourse.processing.org/u/JoseRocha)
#### Post date: [December 2, 2022, 8:52pm UTC](https://discourse.processing.org/t/concentric-circles-animation-doubt/39992/5 "2022-12-02T20:52:37Z")

</div>

Perfect @debxyz

Now I will try to loop it.

Thank you very much.

---

<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: [December 3, 2022, 2:57pm UTC](https://discourse.processing.org/t/concentric-circles-animation-doubt/39992/6 "2022-12-03T14:57:23Z")

</div>

Hello @JoseRocha ,

> [@JoseRocha](#):
>
> Is it possible to do this kind of animation smoothly with code in p5.js

Yes it is!

I often use frameCount (or you can use a counter) and the modulo % operator.

Consider this for the circle size in your draw():

```auto
  let r1 = frameCount%360;
  let r2 = (frameCount+60)%360;

```

You may want to print values to console to see change in variables over time.

Add a few more circles and voila!

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/1/01f15566842b1350d5b15ebd1045a33a72523f52.png)

This animates nicely and is very smooth!

`:)`

---

<div class="post-metadata">

### Author: ![JoseRocha](https://avatars.discourse-cdn.com/v4/letter/j/f475e1/32.png) [@JoseRocha](https://discourse.processing.org/u/JoseRocha)
#### Post date: [December 4, 2022, 2:28pm UTC](https://discourse.processing.org/t/concentric-circles-animation-doubt/39992/7 "2022-12-04T14:28:40Z")

</div>

Hi @glv

Thanks for the tip.