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

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]
``````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;
}
}
``````

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

1 Like

Hey Harsha,

Remark 1

this

requires that we move the big circle.

And this

says, the small circle rotates around the big circle.

Therefore you cannot say

``````  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:

It says 5 pixels.

You have:

``````+ x and
+ y
``````

but I recommend:

``````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

2 Likes