let angle2 = 0;

let angle3 = 0; // for the circle

​

let angleV1 = 0.9;

let angleV2 = 0.015; // angleV = controls the speed and proximity of each yoyo

let angleV3 = 0; // for the circle

​

function setup() {

  createCanvas(800, 600); // canvas size

  background(0); // canvas background: black

}

​

function draw() {

  translate(width / 2, height / 2); // positioning all elements to start at the center of the canvas

  fill(255, 198, 0); // This sets a yellowish-orange color for all shapes.

​

  let r = map(sin(angle3), -1, 1, 0, 200); // calculate the r of the circle based on sine of angle3; radius oscillates between 0 to 200.

​

  circle(0, 0, r * 1.4); // draws a circle at the center with a radius that varies with time (r) and is scaled by 1.4.

​

  angle3 += angleV3; //circle

​

  angleV3 += 0.00002; //circle speed

​

  background(0, 4); // the last digit gives that glowing effect

​

  fill(252, 238, 33, 100); // the last element gives the transparency to the colors of the smaller circles that are orbiting

  stroke(252, 100, 33, 200);

​

  //starting here...

  let ampx1 = (0.55 * width) / 2;

  let ampx2 = (0.9 * width) / 2;

​

  let ampy1 = (0.55 * height) / 2;

  let ampy2 = (0.9 * height) / 2;

​

  let x1 = map(cos(angle2), -1, 1, -ampx1, ampx1);

  let x2 = map(cos(angle1), -1, 1, -ampx2, ampx2);

​

  let y1 = map(sin(angle2), -1, 1, -ampy1, ampy1);

  let y2 = map(sin(angle1), -1, 1, -ampy2, ampy2);

​

  // calculate the positions of the two smaller circles (x1, y1 & x2, y2) based on their angles & amplitudes --> this mapping of angles in positions within specific ranges is what creates the oscillating motion.

​

  // draw the two smaller circles that are oscillating around the center

  strokeWeight(3);

  line(0, 0, x1, y1);

  line(0, 0, x2, y2);

  circle(x1, y1, 32);

  circle(x2, y2, 32);

  angle1 += angleV1;

  angle2 += angleV2;

}

​