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

p5.js Coding Questions
1

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

Please Help

2

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
3

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