---
# System prepended metadata

title: 期中作業

---


---
tags: 程式設計,第一個作業,教師版,互動藝術程式創作入門,Creative Coding
---


# 第一個作業

[演算法影片說明](https://youtu.be/PF_IdMQiBgM)

{%youtube PF_IdMQiBgM %}

---

啟動你的程式碼

## 步驟一
![Uploading file..._jgd2k30kq]()

![](https://hackmd.io/_uploads/B1Ut10f29.png)

![網頁擷取_11-11-2023_41820_127.0.0.1](https://hackmd.io/_uploads/SkMIbM2X6.jpg)

```javascript=
function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0)
}
var x =25 ; //宣告一個畫方框的 x軸變數(var宣告變數為一個全域變數)
var y =25; //宣告一個畫方框的 y軸變數
var r_b=50; 
var w=50  //宣告一個畫方框的 寬度 變數
var r_s=20; //宣告一個畫方框的 高度 變數


function draw() {
  stroke(225);
  noFill() //不充滿顏色
  rectMode(CENTER) //設定方框中心
  ellipse(x,y,r_b)
}

```

---

## 步驟二

![](https://hackmd.io/_uploads/Sy_p1Rzh5.png)

![網頁擷取_11-11-2023_42626_127.0.0.1](https://hackmd.io/_uploads/rymNGfnXa.jpg)

```javascript=
 function setup() {
  createCanvas(windowWidth, windowHeight);
   background(0)
 }
var x =25 ; //宣告一個畫方框的 x軸變數(var宣告變數為一個全域變數)
var y =25; //宣告一個畫方框的 y軸變數
var r_b=50; 
var w=50  //宣告一個畫方框的 寬度 變數
var r_s=20; //宣告一個畫方框的 高度 變數


 function draw() {
  stroke(225);
  noFill() //不充滿顏色
  rectMode(CENTER) //設定方框中心
  ellipse(x,y,r_b)
 rect(x,y,w)

 }


```

---

## 步驟三

![](https://hackmd.io/_uploads/Hy41eRMh9.png)

![網頁擷取_11-11-2023_43210_127.0.0.1](https://hackmd.io/_uploads/rykw7z3mp.jpg)

```javascript=
 function setup() {
  createCanvas(windowWidth, windowHeight);
   background(0)
 }
var x =25 ; //宣告一個畫方框的 x軸變數(var宣告變數為一個全域變數)
var y =25; //宣告一個畫方框的 y軸變數
var r_b=50; 
var w=50  //宣告一個畫方框的 寬度 變數
var r_s=20; //宣告一個畫方框的 高度 變數


 function draw() {
  stroke(225);
  noFill() //不充滿顏色
  rectMode(CENTER) //設定方框中心
  ellipse(x,y,r_b)
 rect(x,y,w)

 }

function draw(){
  stroke(255)//不充滿顏色
  noFill()//不充滿顏色
  rectMode(CENTER)//設定方框中心 
  ellipse(x,y,r_b)
  rect(x,y,w)
  ellipse(x+w/2,y+w/2,r_s)
}
```

---

## 步驟四

![](https://hackmd.io/_uploads/ByDZe0Mnq.png)

![image](https://hackmd.io/_uploads/Hk66Qf2Qa.png)

```javascript=
 function setup() {
  createCanvas(windowWidth, windowHeight);
   background(0)
 }
var x =25 ; //宣告一個畫方框的 x軸變數(var宣告變數為一個全域變數)
var y =25; //宣告一個畫方框的 y軸變數
var r_b=50; 
var w=50  //宣告一個畫方框的 寬度 變數
var r_s=20; //宣告一個畫方框的 高度 變數


 function draw() {
  stroke(225);
  noFill() //不充滿顏色
  rectMode(CENTER) //設定方框中心
  ellipse(x,y,r_b)
 rect(x,y,w)

 }

function draw(){
  stroke(255)//不充滿顏色
  noFill()//不充滿顏色
  rectMode(CENTER)//設定方框中心 
  ellipse(x,y,r_b)
  rect(x,y,w)
  ellipse(x+w/2,y+w/2,r_s)

  ellipse(75,25,r_b)
  rect(75,25,r_b)
  ellipse(75+w/2,25+w/2,r_s)

}
```

---

## 步驟五

![](https://hackmd.io/_uploads/r1j6lRf29.png)

![image](https://hackmd.io/_uploads/HJyYEMhQp.png)

```javascript=
 function setup() {
  createCanvas(windowWidth, windowHeight);
   background(0)
 }
var x =25 ; //宣告一個畫方框的 x軸變數(var宣告變數為一個全域變數)
var y =25; //宣告一個畫方框的 y軸變數
var r_b=50; 
var w=50  //宣告一個畫方框的 寬度 變數
var r_s=20; //宣告一個畫方框的 高度 變數


 function draw() {
  for(var r=25 ; x<width;x=x+2*r){
  stroke(225);
  noFill() //不充滿顏色
  rectMode(CENTER) //設定方框中心
  ellipse(x,y,r_b)
 rect(x,y,w)
 ellipse(x+w/2,y+w/2,r_s)
  }
 }

function draw(){
  stroke(255)//不充滿顏色
  noFill()//不充滿顏色
  rectMode(CENTER)//設定方框中心 
  ellipse(x,y,r_b)
  rect(x,y,w)
  ellipse(x+w/2,y+w/2,r_s)

  ellipse(75,25,r_b)
  rect(75,25,r_b)
  ellipse(75+w/2,25+w/2,r_s)

}
```

---

## 步驟六

![](https://hackmd.io/_uploads/SykDl0M35.png)

![image](https://hackmd.io/_uploads/B1IAVfn7p.png)

```javascript=
 function setup() {
  createCanvas(windowWidth, windowHeight);
   background(0)
 }
var x =25 ; //宣告一個畫方框的 x軸變數(var宣告變數為一個全域變數)
var y =25; //宣告一個畫方框的 y軸變數
var r_b=50; 
var w=50  //宣告一個畫方框的 寬度 變數
var r_s=20; //宣告一個畫方框的 高度 變數


 function draw() {
  for(var r=25 ; x<width;x=x+2*r){
  stroke(225);
  noFill() //不充滿顏色
  rectMode(CENTER) //設定方框中心
  ellipse(x,y,r_b)
 rect(x,y,w)
 ellipse(x+w/2,y+w/2,r_s)
  }
 }


```

---

## 步驟七

![](https://hackmd.io/_uploads/S1ZKl0f39.png)

```javascript=

```

---

## 步驟八

![](https://hackmd.io/_uploads/Sy6ce0f39.png)


```javascript=

```

---


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



```javascript=
//https://youtu.be/PF_IdMQiBgM




```


---

# 自行設計畫面



![2023-11-11](https://hackmd.io/_uploads/S1eL4Xn7p.png)






```javascript=
var sound1
function preload(){
  sound1 = loadSound("27522873_MotionElements_travel-inspiring-upbeat_preview.mp3") //先把音樂檔載入到sound1程式碼中
}
function setup() {
  createCanvas(windowWidth, windowHeight);
  background("#faf3dd")
  analyzer = new p5.Amplitude();
  analyzer.setInput(sound1)
}

var w=150
var s_w =100
var fc ,fc1

function draw() {
  background("#FFF4C1");
  rectMode(CENTER) //設定方框中心點為方框的座標點
  noFill()

  
  if(sound1.isPlaying()) 
{//音樂有播放時
  fc = map(analyzer.getLevel(),0,1,0,100)
  fc1 = map(analyzer.getLevel(),0,1,0,200)
}
else
 { //音樂沒有播放
   fc =  map(mouseX,0,width,0,100)
   fc1 =  map(mouseY,0,width,0,200)
 }

  for(var y=50;y<=height+w/2;y=y+w){ 
  for(var x=50;x<=width+w/2;x=x+w){
  //畫圓，設定框線顏色與線條粗細
  stroke("#842B00")
 strokeWeight(10)
 ellipse(x,y,w+fc)
 //畫方框，設定框線顏色與線條粗細
 stroke("#AE0000")
 strokeWeight(2)
 rect(x,50,w+fc1) //此行也需要修改
 //-----------------------
 //畫小圓，設定框線顏色與線條粗細
 stroke("#ffa69e")
 strokeWeight(2)
 ellipse(x+50,y+100,s_w+fc) //此行也需要修改
 }
}
}


//按下滑鼠播放音樂
function mousePressed(){
  if(sound1.isPlaying()){
    sound1.stop();
  }else{
    sound1.play();
  }
}