Description
1 Description
(a) Interface of Assignment 2 (b) Draw mode (c) Move mode
(d) Color menu (e) Change color to draw (f) Change opacity
Figure 1: A description of the designed interface.
This assignment aims to help students get familiar with one JavaScript
library (i.e., fabric) and how to use this library to draw different shapes and
build interactions.
In this assignment, you are asked to design an interface (as shown in
Figure 1 (a)) that allows users to do the following tasks.
• Define a drop-down list containing three options: circle, rectangle, and
triangle.
• After clicking the “draw” button, users can use the mouse to draw three
different shapes (i.e., circle, rectangle, and triangle), as shown in Figure
1 (b). Note that the orientation of rectangles and triangles can
be different from those I show in the interface.
• After clicking the “move” button, users can use the mouse to select the
drawn shapes and move them from one position to another, as shown
in Figure 1 (c).
• After clicking the “reset” button, all shapes drawn in the interface are
removed.
• Define a color menu, as shown in Figure 1 (d).
• Users can use the color menu to colorize the following drawn shapes in
the interface, as shown in Figure 1 (e). Note that the appearance
and layout of the color menu depend on the operating system.
• Users can choose different opacity values to change the opacity of all
shapes, as shown in Figure 1 (f).
2 Requirement
• In the .html file, define a color menu and show the corresponding hex
value.
• In the .html file, define a drop-down list with three options for drawing
three different shapes.
• In the .js file, implement the click function which aims to clear all
shapes when users click the “reset” button.
• Implement startdrawormove function which defines three different shapes
under the “draw” mode and makes all shapes selectable under the
“move” mode.
• Implement the sketch function that determines the size of drawn shapes
in the “draw” mode. Also in the “move” mode, users can move the
selected shapes.
• Implement the sketch function that changes the opacity value of all
drawn shapes when users change the opacity value.
• Stylize the web page in .css file.
You are allowed to complete this assignment without using the
template provided by the instructor. However, you need to use
fabric library to finish.
There are two issues you should care about during implementation.
• When users switch to another shape to draw, any new shape should
not be drawn in the interface. A case shown in Figure 2 is not
allowed.
• In the “draw” mode, the shapes are not allowed to move. And in
the “move” mode, users cannot draw new shapes. A case shown in
Figure 3 is not allowed.
(a) (b)
Figure 2: (a) shows that users draw three triangles in the interface and (b)
shows that when users switch to draw circle, a new triangle as the blue arrow
indicates is drawn without any mouse actions.
3 Evaluation
In total, there are 100 points in this assignment. A detailed evaluation is
provided here.
1) In the .html file, define a color menu and show the corresponding value
(8pts).
• Define a menu that allows users to select all colors and show the color
value (8pts).
(a) (b)
Figure 3: (a) shows that users draw four circles, then select green and red
circles to move and (b) shows at the moving process, a new circle is drawn
(i.e., the largest light blue circle).
• Define a menu that allows users to select all colors but does not show
the color value (6pts).
• Define a menu that only allows users to select limited colors and show
the color value (4pts).
• Define a menu that only allows users to select limited colors and does
not show the color value (2pts).
• No implementation is provided (0pts).
2)In the .html file, define a drop-down list with three options for drawing
three different shapes (6pts).
• Each option is for 2 pts.
3) In the .js file, implement the click function which aims to clear all
shapes when users click the “reset” button (10pts).
• An implementation without error (10pts).
• An implementation with errors (e.g., only remove some shapes, not all
shapes) (5pts).
• No implementation without error (0pts).
4) Implement startdrawormove function which defines three different shapes
under the “draw” mode and makes all shapes selectable under the “move”
mode. (34pts)
• Under the “draw” mode, defining each shape is for 9 pts and adding
the shape into canvas is for 3pts. Under the “move” mode, making all
the shapes selectable is for 4pts.
5) Implement the sketch function that can determine the size of drawn
shapes in the “draw” mode. Also, in the “move” mode, users can move the
selected shapes (20pts)
• Refer to sketch function in .js file.
6) Implement the sketch function that changes the opacity value of all
drawn shapes when users change the opacity value (12pts).
• Opacity is modified for all shapes (12pts).
• Opacity is modified only for a part of shapes (6pts).
• Opacity is modified but the opacity of all shapes is not changed (3pts).
• No implementation.
7) Stylize the web page in .css file (5pts).
• Stylize both text and interactive elements (5pts).
• Only stylize interactive elements (3pts).
• Only stylize text (2pts).
• No stylization (0pts).
8) Submission (5pts). Please compress your code and a readme file (optional) into a zip file and submit the zip file to OneDrive. The readme file
can include descriptions that can help the instructor run the interface successfully.
Note that plenty of 10 pts will be given to those students who
submit the assignment between Oct 21 at 12:00 AM and Oct 21
at 11:59 PM. Plenty of 20 pts will be given to those students who
submit the assignment between Oct 22 at 12:00 AM and Oct 22
at 11:59 PM. Submissions after Oct 23 at 12:00 AM will not be
graded.