let radius = 300;

let nFrames = 200;

let fps = 1/60;

//let h = sqrt(3)/2 * size;

​

// rotation variables

let rotations = [];

​

function setup() {

  createCanvas(1080, 1080);

  frameRate(20);

  // rotation variables

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

    rotations[i] = 0;

  }

}

​

function draw() {

  let a = frameCount / nFrames;

  //let c = color(hue(a * 255), 255, 255);

  //background(0);

  col = map (mouseX, 0, 1080, 0, 255)

  background(col);

  translate(width/2, height/2);

  // Green circle

  fill(0, 255, 0);

  translate(n, 0);

  ellipse(0, 0, n/4, n/4);

​

  // Blue circle

  fill(0, 0, 255, 255);

  //rotate(degrees(rotations[8]));

  translate(-n, -n);

  ellipse(0, 0, n/0.5, n/0.5);

​

  //Colored circle

  push();

 //rotation 

  rotate(degrees(rotations[0]));

  fill(255, 0, 0, 150);

  ellipse(-n, n, n/0.4, n/0.4);

  pop();

  push();

  rotate(degrees(rotations[4]));

  fill(255, 255, 0, 100);

  ellipse(n, -n, n/0.6, n/0.6);

  pop();

  push();

  rotate(degrees(rotations[2]));

  fill(255, 0, 255, 200);

  ellipse(n, -n/2, n/0.8, n/0.8);

  pop();

  push();

  rotate(degrees(rotations[3]));

  fill(0, 255, 255, 100);

  let x = -n/2 + radius * cos(rotations[3]);

  let y = -n/2 + radius * sin(rotations[3]);

  ellipse(x, y, n, n);

  pop();

  push();

  rotate(degrees(rotations[1]));

  let r, g, b;

  let a2 = rotations[4]/(2 * PI);

  //[r, g, b] = colorsys.hsv_to_rgb(a2, 1.0, 1.0);

  fill(r, g, b, a);

  let x2 = random(-width/4, width/4);

  let y2 = random(-height/4, height/4);

  ellipse(x2, y2, n/random(200, 100), n/random(200, 100));

  pop();

  // Update rotation 

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

    rotations[i] += TWO_PI/120;

  }

}

​