---
# System prepended metadata

title: 第二週 (2022/9/14) 上課實作作業
tags: [第一章, 互動藝術程式創作入門, 程式設計, 學生版_協作版, Creative Coding]

---

---
tags: 程式設計,第一章,學生版_協作版,互動藝術程式創作入門,Creative Coding
---

# 第二週 (2022/9/14) 上課實作作業 

---
## 變更背景顏色(使用色票表 #bde0fe的視窗)
---

```javascript=

function setup() {
  createCanvas(windowWidth,windowHeight) //產生一個畫布，畫布的寬為400高為500
  background(100)//背景顏色的設定，() 裡只有一個數字 代表灰階，0代表黑，255代表白色，範圍為0~255。()裡有三個函數代表RGB

}

function draw() { //一秒進入此function執行60次
  background(200); //背景顏色的設定
  background("#bde0fe")
}

```
![](https://i.imgur.com/iG3XxPd.png)


---
## 劃一個隨著滑鼠移動的方框(並改變框線與內部的顏色)
---
```javascript=

function setup() {
  createCanvas(windowWidth,windowHeight) //產生一個畫布，畫布的寬為400高為500
  background("#bde0fe")//背景顏色的設定，() 裡只有一個數字 代表灰階，0代表黑，255代表白色，範圍為0~255。()裡有三個函數代表RGB

}

function draw() { //一秒進入此function執行60次
  // background(200); //背景顏色的設定
  background("#bde0fe")//有加background時移動軌跡會消失
  rect (50,45,200,300) // 劃一個方框在(50,45)的位置上,大小為(200,300)
  fill ("#a3b18a")//針對物件充滿顏色"a3b18a"
  //noStroke()//沒有邊框
  stroke("#83c5be")//邊框顏色設置為"83c5be"
  rect (mouseX,mouseY,100,210) //劃方框隨著滑鼠移動，大小為(100,210)
  
 
}
```
![](https://i.imgur.com/LuBewA7.gif)


---
## 劃一個移動的圓與矩形
---

```javascript=
 
 function setup() {
  createCanvas(windowWidth,windowHeight) //產生一個畫布，畫布的寬為400高為500
  background("#bde0fe")//背景顏色的設定，() 裡只有一個數字 代表灰階，0代表黑，255代表白色，範圍為0~255。()裡有三個函數代表RGB

}

function draw() { //一秒進入此function執行60次
  // background(200); //背景顏色的設定
  background("#bde0fe")//有加background時移動軌跡會消失
  fill ("#a3b18a")//針對物件充滿顏色"a3b18a"
  //noStroke()//沒有邊框
  stroke(0)//邊框顏色設置為"0"
  rect (mouseX,mouseY,200) //劃方框隨著滑鼠移動，大小為(100,210)
  ellipse(mouseX,mouseY,200,400)//隨著滑鼠移動的圓，長寬為200,400
  
 
}

 
 ```
 ![](https://i.imgur.com/SBbcba0.png)
 
 
 
 ---
 ## 劃米老鼠
 ---
 
 ```javascript=
function setup() {
  createCanvas(windowWidth,windowHeight) //產生一個畫布，畫布的寬為400高為500
  background("#bde0fe")//背景顏色的設定，() 裡只有一個數字 代表灰階，0代表黑，255代表白色，範圍為0~255。()裡有三個函數代表RGB

}

function draw() { //一秒進入此function執行60次
  // background(200); //背景顏色的設定
  background("#bde0fe")//有加background時移動軌跡會消失
  fill ("#a3b18a")//針對物件充滿顏色"a3b18a"
  //noStroke()//沒有邊框
  stroke(0)//邊框顏色設置為"0"
  //rect (mouseX,mouseY,200) //劃方框隨著滑鼠移動，大小為(100,210)
  //ellipse(mouseX,mouseY,200,400)//隨著滑鼠移動的圓，長寬為200,400
  ellipse(mouseX,mouseY,300)//劃大圓

  fill ("#cad2c5")//改變小圓顏色
  ellipse(mouseX-150,mouseY-140,150)//劃左邊小圓
  ellipse(mouseX+150,mouseY-140,150)//劃右邊小圓

 
}

```
![](https://i.imgur.com/bqiNv3m.gif)

---

