1. Draw (x, y) as a function of circle --> main circle

2. Draw just (x, 0) and (0, y) to get the oscillation motion. Point out how it is perpendicular to the main circle

3. Rotate axis by -45 and keep everything the same

4. Rotate just axis and corresponding ball to get the x and y location of the main circle on the main axis 

​

5. Change angle to startingAngle 

6. Create numAxis, x[], y[], angles[] arrays

7. For loop to initialize and draw shapes 

8. Don't forget push() and pop(); 

9. Increment starting Angle 

10. Beautify

​

*/

​

​

let startingAngle = 45; let r = 150; 

let size = 15;

​

let numAxis = 3;

let x = [];

let y = [];

let angles = [];

​

function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES);

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

    angles[i] = i*90/numAxis;

  }

}

​

function draw() {

  background(220);

  // Big circle and traveling red 

  x = r*cos(startingAngle);

  y = r*sin(startingAngle);

  translate(width/2, height/2);

  noFill();

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

  fill(255, 0, 0);

  ellipse(x, y, size, size);

  // Yellow circles on main axis

  fill(255, 255, 0);

//   line(x, y, x, 0);

//   line(x, y, 0, y);

  ellipse(x, 0, size, size);

  ellipse(0, y, size, size);

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

    push();

    rotate(-angles[i]);

    beginShape(LINES);

    vertex(-r, 0);

    vertex(r, 0);

    endShape();

​

    beginShape(LINES);

    vertex(0, -r);

    vertex(0, r);

    endShape();

    let x2 = r*cos(startingAngle + angles[i]);

    let y2 = r*sin(startingAngle + angles[i]);

    // line(x2, y2, x2, 0);

    // line(x2, y2, 0, y2);

    fill(0);

    ellipse(x2, 0, size, size);

    ellipse(0, y2, size, size);

    pop();

  }

  startingAngle += 1;

}