# Moving the circle in the direction of another circle revolving around it in canvas

**URL:** <https://discourse.processing.org/t/moving-the-circle-in-the-direction-of-another-circle-revolving-around-it-in-canvas/28569>\
**Category:** Coding Questions\
**Created:** [March 16, 2021, 8:17am UTC](https://discourse.processing.org/t/moving-the-circle-in-the-direction-of-another-circle-revolving-around-it-in-canvas/28569 "2021-03-16T08:17:24Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![harsha](https://avatars.discourse-cdn.com/v4/letter/h/e274bd/32.png) [@harsha](https://discourse.processing.org/u/harsha)\
**Post date:** [March 16, 2021, 8:17am UTC](https://discourse.processing.org/t/moving-the-circle-in-the-direction-of-another-circle-revolving-around-it-in-canvas/28569/1 "2021-03-16T08:17:24Z")

</div>

I have a problem of moving the big circle in the direction of small circle when a button is pressed. can anyone help?

Goals:

- Make a circle on canvas [Done]
- Draw a small circle that rotates around the big circle [Done]
- Move the big circle for 5 pixels when a button is pressed in the direction of small circle pointing at that time [pending]
- add a drawing effect while moving [pending]

```auto
let angle = 0;

function setup() {
  createCanvas(400, 400);
  
}

function draw() {
  background(0);
  stroke(255);
  strokeWeight(4);
  let cir = createVector(200,200);
  let velocity = createVector();
  
  
  
  
  let r = 10;
  k = circle(cir.x, cir.y, r * 2);

  strokeWeight(4);
  stroke(255);
  let x = r *2* cos(angle);
  let y = r *2* sin(angle);
  translate(200,200);
  point(x, y);
  angle += 0.01;
  
  if(mouseIsPressed){
    k.x += x;
    k.y += y;
  }
}

```

Please Help

---

<div class="post-metadata">

**Author:** ![ReyzArtz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/reyzartz/32/11750_2.png) [@ReyzArtz](https://discourse.processing.org/u/ReyzArtz)\
**Post date:** [March 16, 2021, 9:15am UTC](https://discourse.processing.org/t/moving-the-circle-in-the-direction-of-another-circle-revolving-around-it-in-canvas/28569/2 "2021-03-16T09:15:41Z")

</div>

Hey Harsha  
if u r trying to create a trail or drawing effect while it is moving I would recommend using  
`background(0,10)` instead of `background(0)`  
and for the second point try using ` cir.add(createVector(x,y).setMag(0.5));` if mouse in pressed and make cir global and define it value inside the setup function

---

<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:** [March 16, 2021, 1:38pm UTC](https://discourse.processing.org/t/moving-the-circle-in-the-direction-of-another-circle-revolving-around-it-in-canvas/28569/3 "2021-03-16T13:38:07Z")

</div>

Hey Harsha,

**Remark 1**

this

> [@harsha](#):
>
> Move the big circle for 5 pixels when a button is pressed

requires that we move the big circle.

And this

> [@harsha](#):
>
> Draw a small circle that rotates around the big circle [Done]

says, the small circle rotates around the big circle.

Therefore you cannot say

```auto
  translate(200,200);
      // this is only the initial position of the big circle. but it can and will change!

```

but rather

` translate(cir.x, cir.y);`

**Remark 2**

Also:

> [@harsha](#):
>
> Move the big circle for 5 pixels when a button is pressed

It says 5 pixels.

You have:

```auto
+ x and
+ y

```

but I recommend:

```auto
function mousePressed() {
  cir.x += 5 * cos(angle);
  cir.y += 5 * sin(angle);
}

```

which is like how you calculate the small circle but to move the big circle (and with 5).

Hey, and welcome to the forum!

Great to have you here!

Warm regards,

Chrisir