Description
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
Submission: Export your CS701_HW1_lastName folder as a zip file, with
the appropriate index.html for the above files, and upload the zip file to
the Assignment section.