//********************************************************************************************
//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);
       
       //Set up the text font
       PFont f;
       f = createFont("Arial",16,true);
       textFont(f,32);

} 


//********************************************************************************************
//Declare two variables to store the X and Y coordinates of a circle and
// initilize the contents to represent the point (400, 400)
//********************************************************************************************
float circleX=400;
float circleY=400;


//********************************************************************************************
//Define the draw function, which will be called repeatedly to draw pictures on the screen
//********************************************************************************************
void draw() {
       //Clear the canvas
       background(192, 64, 0);
       
       //Display a simple game message
       text("Circle is trying to destroy Rectangle",200,  30) ;
       
       //*********************************************************************
       //Set the fill color to the red color, and then draw a 20 x 20 rectangle,
       //  with (mouseX-10, mouseY-10) as the upperleft corner of the rectangle
       //*********************************************************************
       fill(255, 0, 0);
       rect(mouseX-10, mouseY-10, 20, 20);
       
       //*********************************************************************
       //Set the fill color to the green color, and then draw a circle with a radis of 20
       //  centered at (circleX,  circleY).
       //*********************************************************************
       fill(0, 255, 0);
       ellipse(circleX,  circleY, 15, 15);
       
       //********************************************************************************************
       //Update the X and Y coordinates of a circle to move it closer toward the current location 
       //   of the mouse at (mouseX, mouseY),
       //********************************************************************************************
       circleX= circleX + 0.01*(mouseX-circleX);
       circleY= circleY + 0.01*(mouseY-circleY);
       
       
       //********************************************************************************************
       //Check whether (circleX,  circleY) is really close to (mouseX, mouseY).
       //If they are, then we print out an end-of-game message.
       //********************************************************************************************

       if (   ( circleX - mouseX >= 0 && circleX - mouseX < 10 || circleX - mouseX < 0 && circleX - mouseX > -10) &&
              ( circleY - mouseY >= 0 && circleY - mouseY < 10 || circleY - mouseY < 0 && circleY - mouseY > -10)
          )
       {
                        text("Game Over! Rectangle destroyed by the circle",circleX,  circleY+10) ;
       }

}