---
# System prepended metadata

title: Software Studio 2023 Spring

---

# Software Studio 2023 Spring

## Assignment 01 Web Canvas


### Scoring

| **Basic components**                             | **Score** | **Check** |
| :----------------------------------------------- | :-------: | :-------: |
| Basic control tools                              | 30%       | Y         |
| Text input                                       | 10%       | Y         |
| Cursor icon                                      | 10%       | Y         |
| Refresh button                                   | 5%       | Y         |

| **Advanced tools**                               | **Score** | **Check** |
| :----------------------------------------------- | :-------: | :-------: |
| Different brush shapes                           | 15%       | Y         |
| Un/Re-do button                                  | 10%       | Y         |
| Image tool                                       | 5%        | Y         |
| Download                                         | 5%        | Y         |

| **Other useful widgets**                         | **Score** | **Check** |
| :----------------------------------------------- | :-------: | :-------: |
| 畫圖形的時候可以選擇填滿                                 | 0.5%      | Y         |
| 畫直線                                 | 0.5%     | Y         |
| 背景動畫| 2%     | Y         |
| 串接dall api| 2%     | Y         |


---

### How to use 
各種繪畫工具在上面，點選之後就可以使用。
![](https://i.imgur.com/To7akqi.png)

在選定工具後可以將滑鼠移到畫面左上角的齒輪上面，會有設定介面，可以設定所選重的工具。(筆刷粗細，字體大小字型，是否塗滿形狀，顏色)
![](https://i.imgur.com/1yDzYGC.png)
![](https://i.imgur.com/blW2pVO.png)



右邊的工具列從上到下分別是undo, redo, refresh, download, upload。
![](https://i.imgur.com/woZ9XQE.png)




### Bonus Function description
1. 背景的泡泡效果，滑鼠一過會有泡泡產生，泡泡顏色隨著目前所選擇的畫筆顏色做變化。

2. 接著點擊畫面右上角的機器人會出現可以輸入題詞的地方，且在canvas上會出現半透明的圖片。
![](https://i.imgur.com/yF9iBGp.png)
輸入提詞後會將其傳送到dall並會接收到一張圖片，並將其放在畫布上方。可以讓使用者描著ai所產生的圖片畫一幅美麗的作品，成為~~電腦繪圖大師~~。

    loading畫面
![](https://i.imgur.com/kr2Cls3.png)
![](https://i.imgur.com/gbmRkaI.png)
![](https://i.imgur.com/X5p9T1m.png)
![](https://i.imgur.com/p8EQXG1.png)





### Web page link

[我的網站](https://painter-2aeca.web.app/)

### Others (Optional)

如果使用Google Chrome的話體驗會比較好。
Dall api的部分，因為dall只給我免費1000張圖片，希望夠用。
祝助教能成為電繪大師(很明顯我不是)。助教辛苦了><。


<style>
table th{
    width: 100%;
}
</style>
