//First, do the setup stuff
void setup(){
       size(400, 400);
       colorMode(HSB, 400);
       background(0); //start with a black background
       strokeWeight(10); //the size of the dot
       smooth();
}

//next, name set some variables to keep track of where each dot will go
   //starting location of the first dot
   int mrDot1X = 0;
   int mrDot1Y = 0;

   //starting location of the second dot
   int mrDot2X = 400;
   int mrDot2Y = 0;

   //starting location of the third dot
   int mrDot3X = 0;
   int mrDot3Y = 400;

   //starting location of the fourth dot
   int mrDot4X = 400;
   int mrDot4Y = 400;

   int mrHue = 400;
   int mrSaturation = 400;
   int mrBrightness = 400;

//Now, start animating!
void draw(){
 fill(0,0,0,30); //set the fill colour to be 90% transparent black
 noStroke(); //turn off stroke so the outline of the box doesn't show
 rect(0,0,400,400); //cover everything with a semi-transparent box

 stroke(mrHue,mrSaturation,mrBrightness);
  //the colour of the first dot
 point(mrDot1X, mrDot1Y);

 stroke(mrHue,mrSaturation,mrBrightness);
 point(mrDot1X, mrDot2Y);

 stroke(mrSaturation,mrBrightness,mrHue); //the colour of the second dot
 point(mrDot2X, mrDot2Y);

 stroke(mrSaturation,mrBrightness,mrHue);
 point(mrDot2X, mrDot3Y);

 stroke(mrSaturation,mrBrightness,mrHue);
 point(mrDot1X, mrDot3Y);

  stroke(mrSaturation,mrBrightness,mrHue);
 point(mrDot3X, mrDot1Y);

 stroke(mrSaturation,mrBrightness,mrHue);
 point(mrDot1X, mrDot2Y);

 stroke(mrSaturation,mrBrightness,mrHue);
 point(mrDot1X, mrDot3Y);

 stroke(mrSaturation,mrBrightness,mrHue);
 point(mrDot1X, mrDot4Y);

 stroke(mrSaturation,mrBrightness,mrHue);
 point(mrDot2X, mrDot1Y);

 stroke(mrSaturation,mrBrightness,mrHue);
 point(mrDot2X, mrDot3Y);

  stroke(mrSaturation,mrBrightness,mrHue);
 point(mrDot2X, mrDot4Y);

 stroke(mrSaturation,mrBrightness,mrHue);
 point(mrDot3X, mrDot1Y);

  stroke(mrSaturation,mrBrightness,mrHue);
 point(mrDot3X, mrDot2Y);

 stroke(mrSaturation,mrBrightness,mrHue);
 point(mrDot3X, mrDot4Y);

 stroke(mrSaturation,mrBrightness,mrHue);
 point(mrDot4X, mrDot1Y);

 stroke(mrSaturation,mrBrightness,mrHue);
 point(mrDot4X, mrDot2Y);

 stroke(mrSaturation,mrBrightness,mrHue);
 point(mrDot4X, mrDot3Y);

 stroke(mrSaturation,mrBrightness,mrHue);
 point(mrDot4X, mrDot4Y);

 stroke(mrBrightness,mrHue,mrSaturation); //the colour of the third dot
 point(mrDot3X, mrDot3Y);

 stroke(mrHue,mrBrightness,mrSaturation); //the colour of the fourth dot
 point(mrDot4X, mrDot4Y);

 //now, move the dots
 mrDot1X = mrDot1X + 2;
 mrDot2X = mrDot2X - 3;
 mrDot3X = mrDot3X + 4;
 mrDot4X = mrDot4X - 5;
 mrDot1Y = mrDot1Y + 1;
 mrDot2Y = mrDot2Y + 1;
 mrDot3Y = mrDot3Y - 2;
 mrDot4Y = mrDot4Y - 2;

 mrHue = mrHue - 10;
 mrSaturation = mrSaturation - 10;
 mrBrightness = mrBrightness - 10;


 //if the dots fell off the edges, move them back to their starting places
 if (mrDot1X > 400){mrDot1X = 0;}
 if (mrDot2X < 1)  {mrDot2X = 400;}
 if (mrDot3X > 400){mrDot3X = 0;}
 if (mrDot4X < 1)  {mrDot4X = 400;}

 if (mrDot1Y > 400){mrDot1Y = 0;}
 if (mrDot2Y > 400){mrDot2Y = 0;}
 if (mrDot3Y < 1)  {mrDot3Y = 400;}
 if (mrDot4Y < 1)  {mrDot4Y = 400;}
 if (mrHue < 1) {mrHue = 400;}
 if (mrSaturation < 1) {mrSaturation = 400;}
 if (mrBrightness < 1) {mrBrightness = 400;}

}

void mousePressed () {
 mrDot1X = mouseX;
 mrDot1Y = mouseY;
   mrDot2X = mouseX;
 mrDot2Y = mouseY;
 mrDot3X = mouseX;
 mrDot3Y = mouseY;
 mrDot4X = mouseX;
 mrDot4Y = mouseY;
}