Processing筆記_week02

概要:

第二周的課程，我們要學習如何利用程式碼去實現類似小畫家繪圖的功能，以及利用程式碼畫圖。

第1個程式，我們想呈現類似於小畫家無背景圖片的灰色棋盤方格的效果。我們先用size()宣告視窗大小，在使用background()宣告背景顏色，fill()代表之後圖形的顏色，我們利用rect()去繪製正方形，rect的前面兩個參數代表圖形坐上角的座標，後面兩個數值則代表長、寬。

注意目前的顏色都只有一個數值，代表灰階顏色區間為0~255 0為黑色、255為白色。

第2個程式，我們發現，要一格一個宣告格子實在太麻煩了，我們決定使用for迴圈來幫忙重複繪製灰色格子，利用(i+j)%2==0的判斷式，我們就能輕易的顯示出棋盤方格的效果。

第3個程式，我們要開始畫圖啦!前面的宣告都一樣，只是繪製背景的部分我們會放到void setup()，因為只需要繪製一次。接下我們在void draw()裡面先宣告stroke()代表筆刷顏色，利用RGB數值表示，再來使用if判斷滑鼠是否按下，如果按下就會繪製一條線。

值得注意的是，mouseX指的是當前滑鼠的X軸位置，pmouseX則是前一幀的位置，line的功能是將這兩個位置連在一起。

第4個程式，我們先把圖片讀入img這個變數裡面，然後在void draw()裡面將背景改成圖片內容，之後再圖片之上再加入一層白色透明的顏色，因為其透明度會受到mouseX的影響有變動，所以當使用者用滑鼠往右邊滑的時候整個畫面會越來越黑直到全黑(~255)。

第5-a個程式，與前一個程式很像，只是這次透明度固定在200，而且利用line()我們可以開始畫圖啦!可是在這邊會發現一個問題，筆刷沒辦法留下印記，就像雷射筆一樣，原因是因為void draw()每一秒會更新很多次，所以前面的筆跡就會被覆蓋掉了...

第5-b個程式，我們一樣是利用滑鼠左鍵去進行繪圖，只是這次，我們使用陣列儲存繪製時滑鼠x跟y的位置，最後再用for迴圈呈現到畫面上。這樣一來之前繪製過的座標都會被儲存在陣列中，在每次刷新時會把之前所有座標再繪製一次，就能呈現畫圖的效果了~

第6個程式，剛剛第5-b個程式有一個問題，那就是array的座標會全部連在一起，當使用者放開滑鼠左鍵，再次按下時，前一條線的最後一個位置會跟新的一條線的初始位置連在一起(電腦會把它當作同一條線)。該怎麼解決這個問題呢?我們將陣列再增加一個維度，這樣每一條線就不會頭尾相接了(每一條線都是獨立且分開的)!

第7個程式，其實與第6個程式沒有太大的差別，其實只是在下面多印出來一些東西而已，仔細看下方的出輸出，似乎是把x與y的值印出來，好像是個函式?

第8個程式，同時也是回家作業，我們剛剛做的事情都是把使用者繪製的線條轉換成座標，現在我們要反過來看，是否可以利用座標繪製出原本的圖案呢?答案是可以的，利用第7個程式輸出的座標，我們可以利用vectex()函數繪製出線條，要記得在頭尾加beginShape()跟endShape()喔!(因為我一開始挑的圖片太難繪製了，所以挑了一張相對簡單的照片來還原筆跡!)