# Help with animating circles

**URL:** <https://discourse.processing.org/t/help-with-animating-circles/47346>\
**Category:** Coding Questions\
**Created:** [October 14, 2025, 3:10am UTC](https://discourse.processing.org/t/help-with-animating-circles/47346 "2025-10-14T03:10:57Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![AVREDDY](https://avatars.discourse-cdn.com/v4/letter/a/f0a364/32.png) [@AVREDDY](https://discourse.processing.org/u/AVREDDY)\
**Post date:** [October 14, 2025, 3:10am UTC](https://discourse.processing.org/t/help-with-animating-circles/47346/1 "2025-10-14T03:10:57Z")

</div>

Hello. I am coming back to processing after so long. I am trying to make an animation based on circles interlocking to create patterns. How can I make this code more effective? I also want to slow down the frame rate.

int a=0;  
int b=1;  
int c=0;  
int d=-1;  
void setup(){  
size(1000, 1000); //size  
loop();  
smooth();  
noFill();  
}  
void draw(){  
background(0); //color  
stroke(225); //stroke  
frameRate(1);  
for ( int x=-250; x\<1300; x+=100) { //sets cricles  
ellipse(x+a, -200, 200, 200);  
ellipse(x+a, -100, 200, 200);  
ellipse(x+a, 0, 200, 200);  
ellipse(x+a, 0, 200, 200);  
ellipse(x+a, 100, 200, 200);  
ellipse(x+a, 200, 200, 200);  
ellipse(x+a, 300, 200, 200);  
ellipse(x+a, 400, 200, 200);  
ellipse(x+a, 500, 200, 200);  
ellipse(x+a, 600, 200, 200);  
ellipse(x+a, 700, 200, 200);  
ellipse(x+a, 800, 200, 200);  
ellipse(x+a, 900, 200, 200);  
ellipse(x+a, 1000, 200, 200);  
ellipse(x+a, 1100, 200, 200);  
ellipse(x+a, 1200, 200, 200);  
ellipse(x+a, 1300, 200, 200);  
ellipse(x+a, 1400, 200, 200);  
ellipse(-100, x+a, 200, 200);  
ellipse(-200, x+a, 200, 200);  
ellipse(0,x+a,200,200);  
ellipse(100, x+a, 200, 200);  
ellipse(200, x+a, 200, 200);  
ellipse(300, x+a, 200, 200);  
ellipse(400, x+a, 200, 200);  
ellipse(500, x+a, 200, 200);  
ellipse(600, x+a, 200, 200);  
ellipse(700, x+a, 200, 200);  
ellipse(800, x+a, 200, 200);  
ellipse(900, x+a, 200, 200);  
ellipse(1000, x+a, 200, 200);  
ellipse(1100, x+a, 200, 200);  
ellipse(1200, x+a, 200, 200);  
ellipse(1300, x+a, 200, 200);  
ellipse(1400, x+a, 200, 200);  
ellipse(x-c, -100, 200, 200);  
ellipse(x-c, -200, 200, 200);  
ellipse(x-c, 0, 200, 200);  
ellipse(x-c, 100, 200, 200);  
ellipse(x-c, 200, 200, 200);  
ellipse(x-c, 300, 200, 200);  
ellipse(x-c, 400, 200, 200);  
ellipse(x-c, 500, 200, 200);  
ellipse(x-c, 600, 200, 200);  
ellipse(x-c, 700, 200, 200);  
ellipse(x-c, 800, 200, 200);  
ellipse(x-c, 900, 200, 200);  
ellipse(x-c, 1000, 200, 200);  
ellipse(x-c, 1100, 200, 200);  
ellipse(x-c, 1200, 200, 200);  
ellipse(x-c, 1300, 200, 200);  
ellipse(x-c, 1400, 200, 200);

ellipse(-100, x-c, 200, 200);  
ellipse(-200, x-c, 200, 200);  
ellipse(0,x-c,200,200);  
ellipse(100, x-c, 200, 200);  
ellipse(200, x-c, 200, 200);  
ellipse(300, x-c, 200, 200);  
ellipse(400, x-c, 200, 200);  
ellipse(500, x-c, 200, 200);  
ellipse(600, x-c, 200, 200);  
ellipse(700, x-c, 200, 200);  
ellipse(800, x-c, 200, 200);  
ellipse(900, x-c, 200, 200);  
ellipse(1000, x-c, 200, 200);  
ellipse(1100, x-c, 200, 200);  
ellipse(1200, x-c, 200, 200);  
ellipse(1300, x-c, 200, 200);  
ellipse(1400, x-c, 200, 200);  
a=a+b;  
if(a\>width/2) {  
b=-1;  
}  
if(a\<0){  
b=1;  
}

c=c+d;  
if(c\<0) {  
d=1;  
}  
if(c\>width/2){  
d=-1;  
}

}  
}

---

<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:** [October 14, 2025, 3:48pm UTC](https://discourse.processing.org/t/help-with-animating-circles/47346/2 "2025-10-14T15:48:07Z")

</div>

Hello @AVREDDY,

These are very helpful guidelines here:

> [@Welcome to the Processing Foundation Discourse](https://discourse.processing.org/t/welcome-to-the-processing-foundation-discourse/8):
>
> This is a place to discuss [Processing](https://processing.org/), [p5.js](https://p5js.org/), [Processing for Android](http://android.processing.org/), Processing for Pi, [Processing.py](http://py.processing.org/) and related software initiatives. It’s a place to talk about general ideas and specific projects. You can learn more about the [Processing Foundation](https://processingfoundation.org/) on its website. Our goal is to promote software literacy within the visual arts, and visual literacy within technology-related fields — and to make these fields accessible to diverse communities. Our goal is to empower people of all interests and …

Lot of resources here:  
_[https://processing.org/](https://processing.org/)_

Look up the references for starters:

- _setup()_
- _draw()_

Just a hint to increase x with each frame:

```auto
void draw() {
  background(0); //color
  stroke(225); //stroke
  //frameRate(1);
  //for ( int x=-250; x<1300; x+=100) 
  int x = frameCount;
  { //sets cricles

```

This will animate your _cricles_!

Look up the reference for _frameCount_.

Much of your code could be reduced (refactored) with a _for() loop._

Still a lot of work to do!

I suggest going through tutorials, examples and the references to start you on your journey.

`:)`

---

<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 16, 2025, 8:42pm UTC](https://discourse.processing.org/t/help-with-animating-circles/47346/3 "2025-10-16T20:42:57Z")

</div>

It looks beautiful!

Like an arabic pattern.

Well done!

Welcome to the forum, great to have you here!

And welcome back to Processing itself !