CSC4130 Assignment 2 Solved

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



1





    • 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).


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



2





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 implementa-tion.


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



    • 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).


3















(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)

4





    • 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 (op-tional) 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 suc-cessfully.

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.




5