//********************************************************************************************
//Define the setup function, which will be called once in the beginning
//  to set up some initial settings of the program 
//********************************************************************************************
void setup() 
{
  
       //Set the canvas size
       size(800, 800);
       
       //Set the background color of the canvas
       background(192, 64, 0);
       
      //Set the stroke color as white
       stroke(255, 255, 255);
} 



void drawFish(float headX, float headY, float tailX, float tailY) 
{
       //Draw the body as a quad
       quad(  headX, headY, 
              (headX+tailX)/2 + (headY-tailY)/5,     (headY+tailY)/2  - (headX-tailX)/5,
              tailX, tailY,
              (headX+tailX)/2 - (headY-tailY)/5,     (headY+tailY)/2  + (headX-tailX)/5
           ) ;

       //Draw the tail as a triangled
       triangle(tailX, tailY,
                tailX + (tailX-headX)/5 + (headY-tailY)/10,    tailY + (tailY-headY)/5 - (headX-tailX)/10,
                tailX + (tailX-headX)/5 - (headY-tailY)/10,    tailY + (tailY-headY)/5 + (headX-tailX)/10
               );

} 


//********************************************************************************************
//For each circle,
// declare two variables to store the X and Y coordinates of the center of the circle and
// initilize the contents to represent the starting locations of the points
//********************************************************************************************
float circleX1=400;
float circleY1=400;

float circleX2=430;
float circleY2=450;

float circleX3=500;
float circleY3=520;



//********************************************************************************************
//Define the draw function, which will be called repeatedly to draw pictures on the screen
//********************************************************************************************
void draw() 
{
       //Clear the canvas
       background(192, 64, 0);
       
       //*********************************************************************
       //Set the fill color to the red color, and then draw a 20 x 20 rectangle,
       //  with (mouseX, mouseY) as the center of the rectangle
       //*********************************************************************
       fill(255, 0, 0);
       rectMode(CENTER); //Use the center mode when the rect function below draw the rectangle
       rect(mouseX, mouseY, 20, 20);
       
       
       //*********************************************************************
       //Set the fill color to the green color, and then draw a circle with a radis of 20
       //  centered at (circleX1,  circleY1).
       //*********************************************************************
       fill(0, 255, 0);
       drawFish(mouseX, mouseY, circleX1,  circleY1);
       
       //*********************************************************************
       //Set the fill color to another color, and then draw a circle with a radis of 20
       //  centered at (circleX2,  circleY2).
       //*********************************************************************
       fill(0, 255,225);
       ellipse(circleX2,  circleY2, 25, 25);
       
       
       //*********************************************************************
       //Set the fill color tto another color, and then draw a circle with a radis of 20
       //  centered at (circleX3,  circleY3).
       //*********************************************************************
       fill(225, 255, 0);
       ellipse(circleX3,  circleY3, 30, 30);

       
       //********************************************************************************************
       //Update the X and Y coordinates of the first circle to move it closer toward the current location 
       //   of the mouse at (mouseX, mouseY),
       //********************************************************************************************
       circleX1= circleX1 + 0.04*(mouseX-circleX1);
       circleY1= circleY1 + 0.04*(mouseY-circleY1);

      
       //********************************************************************************************
       //Update the X and Y coordinates of the second circle to move it closer toward the current location 
       //   of the first circle at (circleX1, circleY1),
       //********************************************************************************************
       circleX2 = circleX2 + 0.02*(circleX1-circleX2);
       circleY2 = circleY2 + 0.02*(circleY1-circleY2);


       //********************************************************************************************
       //Update the X and Y coordinates of the 3rd circle to move it closer toward the current location 
       //   of the 2nd circle at (circleX1, circleY1),
       //********************************************************************************************
       circleX3 = circleX3 + 0.02*(circleX2-circleX3);
       circleY3 = circleY3 + 0.02*(circleY2-circleY3);

}