let y = 0;

let ang = 90;

let col = 0;

let moveC = 1;

​

function setup() {

​

  //i like the drawings to be dynamic so I used these values

  createCanvas(windowWidth, windowHeight);

​

  //way better than radians!!

  angleMode(DEGREES);

​

  //tyring HSB out

  colorMode(HSB);

}

​

function draw() {

  //and already abandoning HSB color by using push/pop 

  //cause I don't know alpha in HSB

  push();

  colorMode(RGB);

  background(random(100, 120), random(200, 50), random(100, 255), 5);

  pop();

​

  //diff stroke values are fun with this one

  stroke(100, 100, 40);

​

  //moving the color value

  col += moveC;

  fill(col + 50, 75, 100);

​

  //if color gets greater than or equal to 100 OR color gets less than 0, 

  //change the value at which we move color to negative.  

  //this allows an oscillation.  You can use print(col); to test your values

​

  if (col >= 100 || col < 0) {

    moveC = moveC * -1;

  }

​

  //sets up the drawing to rotate around the center

  translate(width/2, height/2);

​

  //increments the rotation so it moves - remember x = x++ down below

  rotate(x);

  // comment this out to stop the rotation or increase the inc value to rotate faster

  x+=1;

​

  //this FOR loop draws set of ellipses in the shape of a circle. 

  //And 360 / 13 determines is how many I will get, 

  //final numbers found by trial and error

  for (i = 0; i < 360; i += 13) {

    //these ellipse values were found by trial and error.  the fact that cos and sin 

    //work opposite in the x / y planes is what makes the circles be drawn 

    //around the center

    // I used mouseX / mouseY to manipulate the shape of the ellipse

    ellipse(width / 20 + cos(i++) * width / (400 / 72), width / 20 + sin(i++) * width / (400 / 72), width / 20 + mouseX, width / 20 -mouseY);

  }

​

​

​

​

​

}