CS701 Module1 Assignment Solution

General Rules for Homework Assignments

You are strongly encouraged to add comments throughout the program.
You must work on your assignments individually. You are not allowed to copy the answers from the others.
Please submit by due date to avoid late penalty.
When the term lastName is referenced in an assignment, please replace it with your last name.
Create a new folder/project named CS701_HW1_lastName. Write the following programs in this folder.

Part 1 – Canvas (30 Points)
Using the HTML5 Canvas API, develop the application to draw the following pattern with the files bullsEye.html and bullsEye.js.  Use the canvas of size 400 x 400. Use a loop to draw the pattern, alternating between red and blue filled circles. Use the initial band width value of 25. Repeat the loop as long as the current radius is greater than 0.  Use a slider to control the band width. The slider has a minimum value of 5, maximum value of 50 with step 5, and current value as 25. As the value of the slider changes, draw the pattern with the current bandwidth. The output will appear as shown below for different slider values. (See the sliderExample.html in Module1 Canvas samples)

Part 2 – Canvas (40 Points)
Using the HTML5 Canvas API, develop the application as shown in the following link:

https://mymedia.bu.edu/media/CS701_HW1_Clip1/1_9t0rqry1

When the user clicks with the mouse on the canvas, a filled circle of size of 30 is drawn at the clicked point. A random color is used for each mouse click. (See the randomColor.html in Module1 Canvas samples for generating random color). Write the code in the files circles1.html and circles1.js. Use a canvas of size 400 x 400.

Modify the application so that any overlapping circles are hidden when a new circle is being drawn at the clicked point as shown in the following link. Write the code in the files circles2.html and circles2.js.

https://mymedia.bu.edu/media/CS701_HW1_Clip12/1_se8jltx4

Part 3 – SVG (30 Points)
Using the HTML5 SVG API, draw the following in the file stopSign.html.

Define a svg area of size 500 x 300. In the defs section, group a red polygon and the text for the STOP sign shape and assign an id for this group. The coordinates of the polygon may be approximate.

Using the defined group, draw the following.

The first stop sign shape drawn is the correct one installed by your municipality.

The second shape is the one where a kid decided to rotate the shape 90 degrees clockwise from the normal.

The third shape is the one where a kid decided to rotate the shape 180 degrees clockwise from the normal.

The fourth one is an animation where the kid decided to give the shape a spin.

A demo of the application is shown in the following link:

https://mymedia.bu.edu/media/CS701_HW1_Clip3/1_yn6tafr8