# Mathematical circle animation

**URL:** <https://discourse.processing.org/t/mathematical-circle-animation/26117>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [December 10, 2020, 2:04pm UTC](https://discourse.processing.org/t/mathematical-circle-animation/26117 "2020-12-10T14:04:43Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![IziBartek](https://avatars.discourse-cdn.com/v4/letter/i/5f9b8f/32.png) [@IziBartek](https://discourse.processing.org/u/IziBartek)\
**Post date:** [December 10, 2020, 2:04pm UTC](https://discourse.processing.org/t/mathematical-circle-animation/26117/1 "2020-12-10T14:04:43Z")

</div>

Hello,  
I am very new to processing and would be grateful if I got some help with my assignment. I have took on a project to create something like this animation in processing. I have little to no idea how to come up with the code, but here’s what I started. The grey circles meet the red circle on the circumference. I’m looking to add more circles to this but I am stuck. I’ll include some gifs to explain this better, any help is appreciated.

 ![ezgif-3-957284c0c831](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6a028782adb3e78ac24327600e143e450c76b43d.gif)

`int cx = 250;  
int cy = 250;  
int ax = 250;  
int ay = 150;  
int r = 100;  
float period = 360;  
float amplitude = 100;

void setup()  
{  
size(500, 500);  
}

void draw()  
{  
background(240);  
stroke(255);

fill(255,255,255);  
ellipse(250,250,200,200);

float t = millis() / 960.00f;  
int x = (int)(cx+r_cos(t));  
int y = (int)(cy+r_sin(t));

fill(255,0,0);  
ellipse(x,y,10,10);

float x1 = amplitude \* cos(TWO\_PI \* frameCount / period);  
stroke(0);  
fill(175);  
translate(width/2,height/2);  
ellipse(x1,0,10,10);

float y1 = amplitude \* sin(TWO\_PI \* frameCount / period);  
stroke(0);  
fill(175);  
translate(0,0);  
rotate(0);  
ellipse(0,y1,10,10);

}

`

---

<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:** [December 10, 2020, 2:41pm UTC](https://discourse.processing.org/t/mathematical-circle-animation/26117/2 "2020-12-10T14:41:29Z")

</div>

I worked furter on this.

When you want to achieve the graphic above, I think you want the blue circle in my Sketch below.

So use x2,y2 for the center of the new circle and place balls on its circumference

```auto

int cx = 250;
int cy = 250;
int ax = 250;
int ay = 150;

int r = 100;
int r2 = 70;

float period = 360;
float amplitude = 100;

void setup()
{
  size(500, 500);
}

void draw()
{
  background(240);
  stroke(255);

  fill(255, 255, 255);
  ellipse(250, 250, 200, 200);

  float t = millis() / 960.00f;
  int x = (int)(cx+r*cos(t));
  int y = (int)(cy+r*sin(t));

  int x2 = (int)(cx+r2*cos(t));
  int y2 = (int)(cy+r2*sin(t));
  fill(0, 0, 255); // NEW blue !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  ellipse(x2, y2, 10, 10);
  noFill(); 
  stroke(0, 0, 255);
  ellipse(x2, y2, 
    2*30, 2*30);
  noStroke(); 

  fill(255, 0, 0);
  ellipse(x, y, 10, 10);

  float x1 = amplitude * cos(TWO_PI * frameCount / period);
  stroke(0);
  fill(175);
  translate(width/2, height/2);
  ellipse(x1, 0, 10, 10);

  float y1 = amplitude * sin(TWO_PI * frameCount / period);
  stroke(0);
  fill(175);
  translate(0, 0);
  rotate(0);
  ellipse(0, y1, 10, 10);
}

```

---

<div class="post-metadata">

**Author:** ![IziBartek](https://avatars.discourse-cdn.com/v4/letter/i/5f9b8f/32.png) [@IziBartek](https://discourse.processing.org/u/IziBartek)\
**Post date:** [December 10, 2020, 2:49pm UTC](https://discourse.processing.org/t/mathematical-circle-animation/26117/3 "2020-12-10T14:49:18Z")

</div>

That makes more sense, thank you! And how do I put circles on top of that NoFill blue circle so that it rotates around like in the gif?

---

<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:** [December 10, 2020, 2:51pm UTC](https://discourse.processing.org/t/mathematical-circle-animation/26117/4 "2020-12-10T14:51:24Z")

</div>

> [@IziBartek](#):
>
> how do I put circles on top of that NoFill blue circle

As I said use x2,y2 as center for those balls

```auto
  int x3 = (int)(x2+r3*cos(t));
  int y3 = (int)(y2+r3*sin(t));

```

r3 being `2*30` or so

With another t value eg. from a for loop

---

<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:** [December 10, 2020, 3:33pm UTC](https://discourse.processing.org/t/mathematical-circle-animation/26117/5 "2020-12-10T15:33:39Z")

</div>

![c1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a0500878c34a46bfae0980b419809417effda1f9.png)

 ![c2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/21f4450efae6ea181cef3b8bd13e496a518dca79.png)

---

<div class="post-metadata">

**Author:** ![IziBartek](https://avatars.discourse-cdn.com/v4/letter/i/5f9b8f/32.png) [@IziBartek](https://discourse.processing.org/u/IziBartek)\
**Post date:** [December 10, 2020, 3:39pm UTC](https://discourse.processing.org/t/mathematical-circle-animation/26117/6 "2020-12-10T15:39:16Z")

</div>

That’s not what I’m trying to make…

---

<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:** [December 10, 2020, 3:49pm UTC](https://discourse.processing.org/t/mathematical-circle-animation/26117/7 "2020-12-10T15:49:32Z")

</div>

But it looks nice… 😉

---

<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:** [December 10, 2020, 3:57pm UTC](https://discourse.processing.org/t/mathematical-circle-animation/26117/8 "2020-12-10T15:57:32Z")

</div>

> [@Chrisir](#):
>
> As I said use x2,y2 as center for those balls

You can use a for loop for the balls and increase the angle

---

<div class="post-metadata">

**Author:** ![IziBartek](https://avatars.discourse-cdn.com/v4/letter/i/5f9b8f/32.png) [@IziBartek](https://discourse.processing.org/u/IziBartek)\
**Post date:** [December 10, 2020, 4:04pm UTC](https://discourse.processing.org/t/mathematical-circle-animation/26117/9 "2020-12-10T16:04:15Z")

</div>

Do I need an array for the balls?

---

<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:** [December 10, 2020, 4:08pm UTC](https://discourse.processing.org/t/mathematical-circle-animation/26117/10 "2020-12-10T16:08:56Z")

</div>

No, it’s not necessary

Chrisir

---

<div class="post-metadata">

**Author:** ![noahbuddy](https://avatars.discourse-cdn.com/v4/letter/n/73ab20/32.png) [@noahbuddy](https://discourse.processing.org/u/noahbuddy)\
**Post date:** [December 10, 2020, 6:50pm UTC](https://discourse.processing.org/t/mathematical-circle-animation/26117/11 "2020-12-10T18:50:52Z")

</div>

Spoilers ahead:  
The rotation is an illusion. 😉

The balls are moving back and forth on their own “spoke”.  
Each spoke has a fixed angle.

It is the distance of the balls from center that is changing, all at a different phase in a sine/cosine cycle.

---

<div class="post-metadata">

**Author:** ![IziBartek](https://avatars.discourse-cdn.com/v4/letter/i/5f9b8f/32.png) [@IziBartek](https://discourse.processing.org/u/IziBartek)\
**Post date:** [December 10, 2020, 7:09pm UTC](https://discourse.processing.org/t/mathematical-circle-animation/26117/12 "2020-12-10T19:09:31Z")

</div>

Yeah I know, I’ve actually figured this out myself, but because you had the most informative answer, Ill give you the “Solution” 😁

---

<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:** [December 10, 2020, 7:40pm UTC](https://discourse.processing.org/t/mathematical-circle-animation/26117/13 "2020-12-10T19:40:29Z")

</div>

Yeah, but you can still see this as a small ring that rolls on the inside of a bigger ring.

> **[Spirograph](https://en.wikipedia.org/wiki/Spirograph)**
>
> Spirograph is a geometric drawing device that produces mathematical roulette curves of the variety technically known as hypotrochoids and epitrochoids. The well known toy version was developed by British engineer Denys Fisher and first sold in 1965.
> The name has been a registered trademark of Hasbro Inc. since 1998 following purchase of the company that had acquired the Denys Fisher company. The Spirograph brand was relaunched worldwide in 2013, with its original product configurations, by Ka...