互動技術 Week09 ouob

Week09☀☀

week09-1

1.用PImage讀入圖片，圖片的鍵盤放在貼底部(視窗寬-圖片寬)。

2.畫rect對應在滑鼠座標上，開rectMode到中心，fill用半透明紅色，當滑鼠點擊時印出滑鼠當前座標值。(rect第三個參數是改變邊緣，值越大消邊越多。)

3.將a~z座標值存入陣列裡，fill填綠色半透明，for迴圈遍歷陣列取出pos的第0、第1個值，放在rect的座標上，並畫長28寬30的正方形。

week09-2

1.開boolean宣告的陣列(大小一樣26)，在畫rect的地方加判斷當按下哪個鍵時哪個對應位置就上畫rect，同時檢測keyPressed時就設true，keyReleased時就設false。

2.宣告變數存字串，用變數.charAt做字元取出，在for迴圈裡遍歷如果當前字串內容的第一個值-'a'後等於i，就呼叫rect函式在該對應位置畫框框。

3.字串取的字元填紅色(字串取的字元改成取ID)，以外的填色在按鍵按下時typed空字串會加上key值，同時ID做累加(因為位置要一直往後)。

week09-3

1.判斷如果按鍵的鍵等於typing取ID位置的值，boolean陣列裡的對應位置=true、空字串typed++往後、檢索值ID++往後，而當按下的鍵不等於typing取ID位置的值，就把background設成紅色(但因draw函式裡有設定顏色，所以紅色只會閃一下)。

2.不要讓ID檢索值超出typing變數裡字串的長度，加入保護機制(確認ID檢索值小於字串長度)在 1.按下按鍵判斷值時、2.顯示typing文字時、3.判斷當現在取的index位置等於i時。

3.將條件判斷的順序更改，ID要小於字串長度和按下的鍵要等於typing的ID位置的值要先包在外面，裡面的if else判斷就能去處理當1.按下的是字母2.按下的是空白鍵。