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


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

// 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.

Add your circle to the canvas:

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

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

// add myCoolOval to canvas

Helpers for Randomness

// return a random integer between min and max, inclusive of both
randomInt(min, max);

// return a random color