​

let a1 = 0; 

let a2 = 45;

​

function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES);

}

​

function draw() {

  background(220);

  // a1 = map(mouseX, 0, width, 0, 360);

  let x1 = r*cos(a1);

  let y1 = r*sin(a1);

  let x2 = r*cos(a1 + a2);

  let y2 = r*sin(a1 + a2);

  translate(width/2, height/2);

  noFill();

  ellipse(0, 0, r*2, r*2);

  fill(0);

  ellipse(x1, y1, 20, 20);

  // push();

  rotate(0);

  beginShape(LINES);

  vertex(-r, 0);

  vertex(r, 0);

  endShape();

​

  beginShape(LINES);

  vertex(0, -r);

  vertex(0, r);

  endShape();

  // pop();

  push();

  rotate(-a2);

  beginShape(LINES);

  vertex(-r, 0);

  vertex(r, 0);

  endShape();

​

  beginShape(LINES);

  vertex(0, -r);

  vertex(0, r);

  endShape();

  pop();

  fill(255, 0, 0);

  ellipse(x1, 0, 15, 15);

  ellipse(0, y1, 15, 15);

  fill(0, 0, 255);

  push();

  rotate(-a2);

  ellipse(x2, 0, 15, 15);

  ellipse(0, y2, 15, 15);

  pop();

  a1+=1;

​

}