Readme

Links

The link of the page:https://coldcode0214.github.io/a1-ghd3/index.html

Description

There are five parts in the index page:

I. Circle

II. Rectangle

III. Line

IV. Path

V. Others (Windmill)

Each part has some interaction or designed into some special patterns, Here are some basic operations for some parts:

(You can also refer to the instructions on the page)

1. Part I: Click on the circles

2. Part II: Move the mouse on the outermost rectangle

3. Part III: None
4. Part IV: Press on the butterfly for a while

5. Part V: click on the button

Code Reference

Most of the ideas came from the professor's demo in the class, the other references are listed below:

• The API of the D3: https://github.com/d3/d3/wiki/API--%E4%B8%AD%E6%96%87%E6%89%8B%E5%86%8C
• RGB color: https://www.sioe.cn/yingyong/yanse-rgb-16/
• The event of the mouse: https://blog.csdn.net/qq_42363090/article/details/99848791
• The basic knowledge about D3: https://zhuanlan.zhihu.com/p/128495688

Technical Achievements

• Click on the circles and they will change the color and then move from top left to bottom right. During its movement, its speed and size will change.
• Move the mouse to the outmost raectangle, it will change the color into deep green. And when you move the mouse away, it will return to the original light green.
• Press on the 'blue butterfly' (the polygon in deep blue), it will flap the wings and fly to the pink flower. During the movement, its color will change into red and its size will become smaller and smaller. When you stop pressing on it, it will fly back to its original position and the color and the size will return back to the original kind.
• Click on the button on the right of the blue WindMill, it will rotate. The more you click on the button, the fast the windmill will rotate.

Design Achievements

• There are instructions about how to interact with the figures in each part.
• Each part has a theme color in order to make the page coordination.
• In the second part, the rectangles are filled with gradient color to improve the visual effects.
• In the third part, the lines are designed to imitate the rainbow.

• During the movement of the 'blue butterfly', the size of the figure will become smaller and smaller. And the color of it will change into red.
• In the last part, the fan blades of the windmill are also painted by gradient color