# Tracing a point on a moving circle

**URL:** <https://discourse.processing.org/t/tracing-a-point-on-a-moving-circle/17544>\
**Category:** Coding Questions\
**Created:** [February 4, 2020, 2:30pm UTC](https://discourse.processing.org/t/tracing-a-point-on-a-moving-circle/17544 "2020-02-04T14:30:56Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ndelong91](https://avatars.discourse-cdn.com/v4/letter/n/43a26b/32.png) [@ndelong91](https://discourse.processing.org/u/ndelong91)\
**Post date:** [February 4, 2020, 2:30pm UTC](https://discourse.processing.org/t/tracing-a-point-on-a-moving-circle/17544/1 "2020-02-04T14:30:56Z")

</div>

I am trying to create an animation of a cardioid, I currently have 2 circles:  
one is set to (0, 0) translated to width/2, height/2 (center).  
the other is moving around the stationary

I would like to start at point(-100, 0)  
with the point drawing a line of its motion as the “wheel” spins around the world… is that possible in Java?

Here is my code:

int rad = 100; //radius of each circle  
float xpos, ypos; //starting position for circle in motion  
int xpo, ypo = 0; //position for stable circle  
float xspeed = 1;  
float yspeed = 1;  
float xdi = 1.5; //direction moves along x axis  
float ydi = -1.5; // direction moves along y axis  
float step = .01;  
float pct = 0.0;  
int xa = 200; //point for xdi to change  
int xb = -200; //point for xdi to change  
int ya = -200; //point for ydi to change  
int yb = 200; // point for ydi to change

void setup(){  
size(800,800);  
// background(0);  
smooth();  
noStroke();  
frameRate(30);  
ellipseMode(RADIUS);  
//center point for circle in motion  
xpos = -200;  
ypos = 0;  
}

void draw() {  
background(0);  
translate(width/2, height/2);

```
  stroke(255, 0, 0);
  strokeWeight(2);
  noFill();
  ellipse(xpo, xpo, rad, rad);

  float t = millis()/1000.0f;
  xpos = (int)(ypo+xa*cos(t));
  ypos = (int)(ypo+xa*sin(t));

 /* xpos = xpos + (xspeed * xdi);
    ypos = ypos + (yspeed * ydi);
*/ 
/*
   if (xpos == xa) { //change direction when circle is right of other circle
         xdi = -1.5;
   } 
   if (xpos == xb) { //change direction when circle is left of circle
            xdi = 1.5;
   }
   if (ypos == ya){ // change direction when circle is below
         ydi = -1.5;
   } 
   if(ypos == yb) { //change direction when circle is above
          ydi = 1.5;
   }

```

\*/  
stroke(0, 0, 255);  
strokeWeight(2);  
set(-100, 0, 0);  
noFill();  
rotate(.01);  
ellipse(xpos, ypos, rad, rad);

stroke(0, 255, 0);  
point(-100, 0);

}

**edited to clean up the coding for clarity**

---

<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:** [February 4, 2020, 7:35pm UTC](https://discourse.processing.org/t/tracing-a-point-on-a-moving-circle/17544/2 "2020-02-04T19:35:05Z")

</div>

Go back please

Edit your post

Select the code and hit the small button `</>`

Then Save Edit