# 【TEST】單元四 「迴圈與互動－建構創作規則」

###### tags: `互動藝術程式創作入門`

各種面向的重複：時間、方向、位置、形狀、線條、像素、紋理、顏色等

## 以 for 迴圈達成重複

for(初始條件;結束條件;每次變化)

`for(i=0; i<10; i++)`

for(起使狀態; 結束條件; 每次結束後的變化)
  {
    概念相同，需要重複執行的事情
  }

- 雙層迴圈／多層迴圈，作為細節的裝飾
- 善用 random()
- 善用 map() 調整適當數值範圍
- 盡可能將顏色控制在「相近」或「互斥」

## 重複 ＋ 互動

- 以 frameCount% 設定自動的變化
- pmouseX, pmouseY 會根據單一軸移動幅度產生相應幅度的互動，例如：噴濺效果
- 當物件動態快，可用開平方`sqrt()`

### p5 語法

#### 抓取互動
- mousePressed()：當滑鼠點擊的時候要執行的動作
- mouseMoved()：當滑鼠移動的時候要執行的動作
- keyPressed()
- keyTyped()
- mousePressed()
- mouseReleased()
- pmouseX/pmouseY：變數，前一禎圖片時的滑鼠位置。

#### 畫布操作
- rotate()：旋轉當前的畫布。
- scale()：縮放當前的畫布。
- translate()

#### 數學計算
- dist()：取得距離，給兩點的 x 與 y 位置，回傳相對的距離長度。
- floor / ceil
- min / max
- abs
- sqrt

#### 圖形繪製
方形繪製圓角：[rect](https://p5js.org/reference/#/p5/rect) 的第 5~8 個之後的參數（們）。

## 改變場景／功能

- 使用變數，例如 mode = 1, mode = 2
- 搭配條件式變換模式
- 進階：搭配畫布旋轉 rotate()

var mode = 1

function mousePressed(){
    mode ++
    print(mode)
    if (mode>3){ //避免一直停在 mode = 3
        mode = 1 
    }
}

if (mode=1){
    //想要的功能
} else if(mode = 2) {
    //想要的功能
} else if(mode = 3){
    //想要的功能
} else {
    //沒有定義變數的情況下，可以執行的事情
}

## 作業

1. 圖騰、花磚、樹葉、花園、波浪甚至是人群，有什麼是具備重複概念的場景呢？使用用程式把他們呈現出來吧！

- 多種螢光迴圈圈圈
- 花磚
- 圖騰
- 波浪
- 山脈
- 人群
- 切片蘋果螺旋形狀

想到的作品
- 往下甩顏料後，顏料噴色搭配古典樂節奏
- 利用滑鼠、鍵盤各種不同操作（作為樂器），創作畫作
-

Q: 如何改變材質？有哪些材質可模擬
Q: frameCount 與 frameRate 差別