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

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

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

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

}

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


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

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)
  
 
}


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

 
 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
  
 
}

 


---
## 劃米老鼠
---

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)//劃右邊小圓

 
}


---