# Mathematical circle animation

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.

`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+rcos(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);

}

`

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

``````

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

``````

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?

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

``````  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 That’s not what I’m trying to make…

1 Like

But it looks nice… You can use a for loop for the balls and increase the angle

Do I need an array for the balls?

No, it’s not necessary

Chrisir

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.

2 Likes

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

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

2 Likes