//Tammy Choi


int size = 8; 
int legth = 50; 
int m = millis ();
 
float bPos; 
float bSpeed; 
int bDirection = 1; 
 
float cPos; 
float cSpeed; 
int cDirection = 1; 
 
float dPos; 
float dSpeed; 
int dDirection = 1; 

void setup() 
{ 
  size(600, 300); 
  noStroke(); 
  framerate(60); 
  smooth ();
  bPos = cPos = dPos = width/2; 
  
} 
 
void draw() 
{  
float m = millis();
if (m < 10000) {
background (204);
  }


  
 //Blue circle
  bSpeed = quad(bPos/float(width-size)) * 2.0; 
  bPos = bPos + ((bSpeed*1.0+0.6) * bDirection ); 
   
if (bPos > width-size || bPos < 0) { bDirection *= -1; } 
if (m < 10000) {
  fill (16, 99, 237, 255); //blue
  rect(bPos, mouseX, 75,100);
  rect(bPos, width -mouseX, 15,15);
  }
if(mouseX < 300 & m < 30000) {
    fill (16, 99, 237, 25); //blue
    rect(bPos, mouseX, 75,100); 
    } else if (mouseX > 300 & m < 30000) {
      fill (16, 99, 175, 100); //blue
      rect(bPos, width -mouseX, 15,15);
     } else if (mouseX < 300 & m < 50000) {
         fill (240, 250, 255, 200); //white
         rect (bPos, mouseX, 6,6);
           }else if (mouseX > 300 & m >50000) {
             fill (10, 150);    //black
             rect (bPos, width - mouseX, 6, 6);
               }else if(mouseX < 300 & m > 50000) {
                 fill (240, 250, 255, 200); //white
                 rect (bPos, mouseX, 25, 25);
                   } else { 
                       fill (10, 150); //black
                       rect (bPos, width - mouseX, 4, 4);
     } 
     
 //Red circle
  cSpeed = hump(cPos/float(width-size)) * 2.0; 
  cPos = cPos + ((cSpeed*1.0+1.5) * cDirection ); 
 
  if (cPos > width-size || cPos < 0) { cDirection *= -1; } 
  //beginning circle
  if(m < 10000) {
      fill(270, 180,60, 255); //red
      ellipse(cPos + 25,  mouseX + 50, 150, 150);
      ellipse(cPos, width - mouseX, 50, 50); 
      }  
  
if(mouseX < 400 & m < 30000) {
      fill(270, 180,60, 25); //red
      ellipse(cPos + 25,  mouseX + 50, 150, 150);
        }else if (mouseX > 400 & m < 30000){
          fill (250, 170, 25,25); // red
          ellipse(cPos, width - mouseX, 50, 50);     
             
  }else if (mouseX < 400 & m < 50000){
     fill (62, 204, 204, 75); // small turquoise
     rect(cPos, mouseX, 50, 50);
       }else if ( mouseX > 400 & m < 50000) {
           fill (110, 226, 226, 50); //big turquoise
           rect (cPos, width - mouseX, 100, 100);
             }else if (mouseX < 400 & m > 50000) {
               fill (246, 192, 49, 125);//golden
               rect(cPos, mouseX, 90, 110); 
                   }else if (mouseX > 400 & m > 50000){
                       fill (260, 210, 110,65);//light golden
                       rect(cPos, width - mouseX, 60, 60);
                          } else {
                             fill ( 204, 100);
                             ellipse(cPos, width - mouseX, 1, 1);
    }
    
  if ( m > 50000) {
  fill( 0, 0);
  rect (0, 0, width, height);
  }
  //Green rectangle
  dSpeed = quadHump(dPos/float(width-size)) * 2.0; 
  dPos = dPos + ((dSpeed*2.0+3.0) * dDirection ); 
 if (dPos > width-size || dPos < 0) { dDirection *= -1; }
   if ( m < 10000 ) {
    fill (111, 200, 16, 255); //green
    rect(dPos + 25, mouseX, 5, 45);
    }
  if (mouseX < 450 & m < 30000 ) {
    fill (111, 200, 16, 100); //green
    rect(dPos + 25, mouseX, 5, 45);
  } else if (mouseX > 450 & m < 30000) {
      fill(204, 100); //grey
      rect (dPos + 25, width -mouseX, 35, 2);
      } else if (mouseX <450 & m < 50000) {
        fill (220, 243, 140, 75); //skinny long
        rect(dPos,mouseX, 35, 2);
          }else if (mouseX >450 & m <50000) {
            fill (200, 248, 32, 100);//tall
            rect ( dPos, width - mouseX, 5, 35);
              }else if (mouseX < 450 & m > 50000) {
                fill (241, 38, 11, 100);
                rect (dPos, mouseX, 5, 35);
                  }else if (mouseX > 450 & m > 50000) { 
                    fill (241,38, 11, 150);
                    rect (dPos, width - mouseX, 50, 2);
                      }else {
                        fill (204, 0);
                        rect (dPos, mouseX, size, 35);
                    }


  
  marker();  
} 
 
float quad(float sa) { 
  return sa*sa*sa*sa; 
} 
 
float quadHump(float sa) { 
  sa = (sa - 0.5); //scale from -2 to 2 
  sa = sa*sa*sa*sa * 16; 
  return sa; 
} 
 
float hump(float sa) { 
  sa = (sa - 0.5) * 2; //scale from -2 to 2 
  sa = sa*sa; 
  if(sa > 1) { sa = 1; } 
  return 1-sa; 
} 
 
float squared(float sa) { 
  sa = sa*sa; 
  return sa; 
} 





float mx = 0.0;

void marker() 
{
  // Set the location of marker
  float dif = mouseX - mx;
  if(abs(dif) > 1.0) {
    mx = mx + dif/8.0;
  }
  // Keep the marker on the screen
  mx = constrain(mx, 1, width-1);
  // Draw bottom rectangle
  noStroke();
  fill(255);
  rect(0, height-5, width, 5);
  // Draw bottom positional marker
  fill(0);
  rect(mx-2, height-5, 4, 5);
}
 
Project 1: Meta-matic
In the sprit (not the style) of Jean Tinguely or Allan Kaprow, develop a kinetic system controlled through one variable called "mx", which is set by the horizontal position of the mouse.