Created by Brian Lam, Amy Nguyen, and Bryce Cronkite-Ratcliff
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!
When the page opens, have it display 20 random circles.
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!
Have the random circle center on where the user clicked.
Have the ball move to a new random location when the mouse touches it
Here are some handy functions you can use to help create your random circles.
var myCoolOval = new GOval();
// 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) // add myCoolOval to canvas canvas.add(myCoolOval);
// return a random integer between min and max, inclusive of both randomInt(min, max); // return a random color randomColor();