week02_11131301賴珮語

 

課堂作業1 試著利用程式將圖片畫出來

 

學校電腦的Win-E開檔案總管,下載, processing-4.3-windows-x64

打開processing.exe

點開後(不要更新)會出現一個小視窗

File-Preference設定 把字型放大 

開始寫我們的程式 

試著把這張可愛的圖片畫出來 

先來試著畫背景

成功出現了背景的一些格子

課堂作業2 畫出更多格子

利用for迴圈 讓程式畫出更多的格子填滿400x400的視窗

課堂作業3 設定

加入兩個函式的形狀

void setup(){

}

void draw(){

}

再將上一個課堂作業的程式貼到setup 中 完成圖片的背景設定

最後在draw()設定好滑鼠 就可以開始畫圖

課堂作業4 描圖片

可以看到上一個課堂作業中憑空自己畫會畫得很醜

這次我們試著在背景加上圖片讓我們畫圖會更順利

成功在背景放上一個半透明圖片來幫助我們描圖了

課堂作業5 

現在可以利用滑鼠描圖也有背景來幫助我們描圖了

將課堂3跟4的程式碼結合

整合後發現程式出錯了 沒有辦法描圖

因為描圖的歷史軌跡一直被圖片蓋掉

現在我們來修改一下

利用以前教過的資料結構ArrayList來記錄我們的歷史軌跡

在最後再利用for迴圈將資料結構取出來

左邊為錯誤的 右邊為修改過後的

黃色的是新增的程式碼

現在可以成功描圖了 

但發現for迴圈裡除了把所有的歷史軌跡記下來之外還會把所有的歷史軌跡連起來

等於只能用一條線來畫圖 不然所有的點都會連在一起

現在繼續修改程式 讓每一次滑鼠的點擊和放開都變成獨立的事件

課堂練習6

增加更多的資料結構 讓每一次的滑鼠點擊及放開都放在不同的資料結構裡

 紅色是一樣的程式碼 黃色是新增的

現在可以順利地畫出我們的圖片了

課堂練習7

每一次執行都要重畫很麻煩  試著讓畫出的東西可以存檔

並且加入刪除的功能以防我們畫錯

試著印出線的座標

成功印出座標了 但我們要的是存檔後再印出所有座標

所以加入keyPressed()  讓座標在按下s或S後才印出