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]

radial wiping rectangle

[p5js code canvas]
int w = 8, h = 8;
int points = 8;
float [] xArray = new float [points];
int constant = 1;
float angle = 4;
float scalar = 124;
float speed = .5;
float colorBG = 150;
float shade;

void setup() {
size(300, 300);
frameRate(60);
background(0,150,0);
}

void draw() {
rotate(scalar/10);
float x2 = constant * sin(angle) + scalar;
float y2 = constant * cos(angle) + scalar;
angle = angle + speed;
speed = 1;
scalar -= 1;
scalar = scalar%300;
if (scalar <= – 300) {
scalar+=1;
}
if (scalar >= 300) {
scalar-=1;
}

for (int i = 0; i < points; i+=4) {
xArray[i] = i-(points/2);
stroke(255);
fill(0,10);
rect(150+width/2+xArray[i]+x2, 150+height/2+y2, w*-scalar/32, h*-scalar/32);
}

if (mousePressed){
fill(0, 10);
rect(0,0,width,height);
}
}

[/p5js]

radiating rectangles

[p5js code canvas]
int w = 4, h = 4;
int points = 4;
float [] xArray = new float [points];
int constant = 1;
float angle = 4;
float scalar = 124;
float speed = .1;
float colorBG = 150;
float shade;

void setup() {
size(300, 300);
frameRate(120);
background(0);
}

void draw() {
//rotate(scalar/10);
float x2 = constant – sin(angle) * scalar;
float y2 = constant – cos(angle) * scalar;
angle = angle + speed;
speed = 1;
shade = (angle%100)*random(1, 3);
scalar -= 1;
scalar = scalar%300;
if (scalar <= – 300) {
scalar+=1;
}
if (scalar >= 300) {
scalar-=1;
}

for (int i = 0; i < points; i+=4) {
xArray[i] = i-(points/2);
//    noStroke();
stroke(255);
fill(shade, 100);
rect(width/2+xArray[i]+x2, height/2+y2, w*-scalar/16, h*-scalar/16);

}
//if (angle%700 >=600) {
//  fill(0, 10);
//  rect(0, 0, width, height);
//}
if (mousePressed) {
fill(0, 10);
rect(0, 0, width, height);
}
}
void keyPressed() {
fill(0, 10);
rect(0, 0, width, height);
}
[/p5js]

Overlapping Ellipses

 

[p5js code canvas]

int rad = 2;        // margin
float xpos, ypos;    // Starting position of shape
float xspeed = 8;  // Speed of the shape
float yspeed = 2;  // Speed of the shape
int xdirection = 1;  // Left or Right
int ydirection = 0;  // Top to Bottom

void setup() {
size(600, 200);
frameRate(16);
background(0);
//stroke(100);
noStroke();

xpos = 2;
ypos = height/2;
}

void draw() {
strokeWeight(random(0, 3));

float randomR = random(0, 50);
float randomG = random(100, 200);
float randomB = random(100, 255);
float randomA = random(0, 100);
float randomWidth = random(0, 150);
float randomHeight = random(0, 150);

xpos = xpos + ( xspeed * xdirection );
ypos = ypos + ( yspeed * ydirection );
for (float x = 10; x < width; x += 20) {
for (float y = 10; y < height; y += 20) {
//      point(x, y);
}
}

if (xpos > width-rad || xpos < rad) {
background(0);

xpos = rad;
fill(randomR, randomG, randomB, randomA);
}
if (ypos > height-rad || ypos < rad) {
ydirection *= -1;
fill(randomR, randomG, randomB, randomA);
}
// Draw the shape
fill(randomR, randomG, randomB, randomA);
ellipse(xpos, ypos, randomWidth, randomHeight);
if (ypos>=height) {
//    saveFrame(“chameleonEyes-######4.png”);
reset();
}
}

void reset() {
background(0);
ypos=2;
}

[/p5js]