I like random circles, so let’s make some!

The program starts with an web page. Every time a user clicks on that web page, a new random circle will appear.

Your task is to complete the function addRandomCircle in randomCircles.js and run in main.js. Open both of these files in "Notepad++"; they can be found inside the folder "js" inside "randomCircles" inside "jsday1" on your Desktop. This function will draw a circle of random radius and random color at a random position on the canvas. Be careful to constrain the position and size of the circle so it is always completely in the window!

### Day 1 Milestone

When the page opens, have it display 20 random circles.

### Day 2 Milestone

Have a random circle appear when the user (you) clicks on the page.

Note: to draw circles on the screen, you will need the functions in the GOval reference at the bottom of this document. Check them out!

### Extension 1

Have the random circle center on where the user clicked.

### Extension 2: Extreme Catch Me If You Can

Have the ball move to a new random location when the mouse touches it

# Debugging

If something doesn’t seem to be working right, remember that the Javascript Console can sometimes have useful error messages explaining how to fix your code. Make a habit of opening it!

# GOval Reference

Here are some handy functions you can use to help create your random circles.

### Make a new circle

var myCoolOval = new GOval();

### Set properties of that circle:

// Set the fill color of the oval to color
myCoolOval.setColor(color);

// Set the width and height of the oval in pixels
myCoolOval.setSize(width, height);

// Set the upper left hand corner position of this oval's bounding box
// to x, y, where x and y are pixel coordinates.
myCoolOval.setLocation(x,y);

// get canvas width
canvas.offsetWidth; // returns 1000 (for example)

// get canvas height
canvas.offsetHeight; // returns 800 (for example)

canvas.add(myCoolOval);
// return a random integer between min and max, inclusive of both
randomColor();