orbiting ellipses

[p5js code canvas]
float r = 64; // RADIUS
int offSet = 250; //CENTERED
int x; //POSITIONS
int xx;
int xxx;
int xS = 1; //SPEEDS
int xxS = 3;
int xxxS = 6;
int xSW = 5; //STROKEWEIGHTS
int xxSW = 3;
int xxxSW = 3;
float xC = random(0, 100);
float xxC = xC*random(.5, 1.5);
float xxxC = xC*random(.5, 1.5);
boolean showBG;
color bg = (0,0,100);

void setup() {
size(500, 500);
colorMode(HSB, 100);
background(bg);
}

void draw() {
if (showBG){
background(bg);
}

xC=map(mouseX,0,500,0,100);

//background(0);
strokeWeight(xSW);
stroke(xC, 30, 100);
point((sin(radians(xx))*r)+offSet, (cos(radians(xx))*r)+offSet);

strokeWeight(xSW);
stroke(xC, 60, 100);
point((sin(radians(x))*r)+(sin(radians(xx))*r)+offSet, (cos(radians(x))*r)+(cos(radians(xx))*r)+offSet);

strokeWeight(xSW);
stroke(xC, 100, 100);
point((sin(radians(x))*r)+(sin(radians(xx))*r)+(sin(radians(xxx))*r)+offSet, (cos(radians(x))*r)+(cos(radians(xx))*r)+(cos(radians(xxx))*r)+offSet);

x+=xS;
xx+=xxS;
xxx+=xxxS;

//saveFrame(“compiled/##########.png”);
if (xxx > 360*xxxS) {
//saveFrame(“##########.png”);
//println(“saved frame”);
background(bg);
x = 0;
xx = 0;
xxx = 0;
xS = int(random(0, 10));
xxS = int(random(0, 10));
xxxS = int(random(0, 10)+1);
xSW = 5;
xxSW = int(random(1, 6));
xxxSW = int(random(3, 6));
xC = random(0, 100);
xxC = xC*random(.5, 1.5);
xxxC = xC*random(.5, 1.5);
}
//noFill();
//stroke(100);
//strokeWeight(1);
//ellipse(250, 250, 500, 500);
}

void mousePressed() {
showBG = true;
}
void mouseReleased() {
showBG = false;
}

[/p5js]