​

let angles = []; 

let x = [];

let y = [];

let num = 1;

​

function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES);

  for (let i=0; i<num; i++) {

    angles[i] = i*90/num;

  }

}

​

function draw() {

  background(79, 148, 167);

  // angles[0] = map(mouseX, 0, width, 0, 360);

  x[0] = r*cos(angles[0]);

  y[0] = r*sin(angles[0]);

  for (let i=1; i<num; i++) {

    x[i] = r*cos(angles[0] + angles[i]);

    y[i] = r*sin(angles[0] + angles[i]);

  }

​

  // Big circle and Main black circle

  translate(width/2, height/2);

  noFill();

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

  fill(0);

  ellipse(x[0], y[0], 20, 20);

  // Axis and circles

  for (let i=0; i<num; i++) {

    stroke(255, 100);

    push();

    rotate(-i*90/num);

    beginShape(LINES);

    vertex(-r, 0);

    vertex(r, 0);

    endShape();

​

    beginShape(LINES);

    vertex(0, -r);

    vertex(0, r);

    endShape();

    pop();

    fill(220);

    beginShape(LINES);

    vertex(x[0], y[0]);

    vertex(x[i], y[i]);

    endShape();

    push();

    rotate(-i*90/num);   

    ellipse(x[i], 0, 15, 15);

    ellipse(0, y[i], 15, 15);

    pop();

  }

  angles[0] = 0;

}