Mathematical circle animation

Processing Coding Questions
1

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
ezgif-3-957284c0c831600×572 3.35 MB

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

}

`

2

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

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?

4

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

5

c1

c2
c2595×525 47 KB

6

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

1 Like
7

But it looks nice… :wink:

8

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

9

Do I need an array for the balls?

10

No, it’s not necessary

Chrisir

11

Spoilers ahead:
The rotation is an illusion. :wink:

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
12

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

1 Like
13

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

2 Likes