---
# System prepended metadata

title: 期中報告1
tags: [期中]

---


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


# 第一個作業

---

啟動你的程式碼

# 第一個作業

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

{%youtube PF_IdMQiBgM %}

---

啟動你的程式碼

## 步驟一

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

```javascript=
function setup() {
  createCanvas(windowWidth,windowHeight);
}
var x =25
var y =25
var r_b =50
function draw() {
  background(0);
  noFill()
  stroke(255)
  ellipse(x,y,r_b)
}
```
![image](https://hackmd.io/_uploads/rykpARhQp.png)
---

## 步驟二

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

```javascript=
function setup() {
  createCanvas(windowWidth,windowHeight);
}
function setup() {
  createCanvas(windowWidth,windowHeight);
}
var x =25
var y =25
var r_b =50
var w =50
function draw() {
  background(0);
  noFill()
  stroke(255)
  ellipse(x,y,r_b)
  rectMode(CENTER)
  rect(x,y,w) 
}
```
![image](https://hackmd.io/_uploads/S1dq0RnQ6.png)


---

## 步驟三

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

```javascript=
function setup() {
  createCanvas(windowWidth,windowHeight);
}
var x =25
var y =25
var w =50
var r_b =50
var r_s =20
function draw() {
  background(0);
  noFill()
  stroke(255)
  ellipse(x,y,r_b)
  rectMode(CENTER)
  rect(x,y,w)
  ellipse(x+w/2,y+w/2,r_s)
}
```
![image](https://hackmd.io/_uploads/ryu_kkaX6.png)
---

## 步驟四

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

```javascript=
function setup() {
  createCanvas(windowWidth,windowHeight);
}
var x =25
var y =25
var w =50
var r_b =50
var r_s =20
function draw() {
  background(0);
  noFill()
  stroke(255)
  ellipse(x,y,r_b)
  rectMode(CENTER)
  rect(x,y,w)
  ellipse(x+w/2,y+w/2,r_s)
  ellipse(x+50,y,r_b)
  rect(x+50,y,w)
  ellipse(x+w/2+50,y+w/2,20)
}
```
![image](https://hackmd.io/_uploads/ByrExJ6Q6.png)

---

## 步驟五

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

```javascript=
function setup() {
  createCanvas(windowWidth,windowHeight);
}
var x =25
var y =25
var w =50
var r_b =50
var r_s =20
function draw() {
  background(0);
  noFill()
  stroke(255)
  for (var x=25;x<=width+(w/2);x=x+w){
    ellipse(x,y,r_b)
    rectMode(CENTER)
    rect(x,y,w)
    ellipse(x+w/2,y+w/2,r_s)
  }
}
```
![image](https://hackmd.io/_uploads/SkWhMyTQT.png)

---

## 步驟六

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

```javascript=
function setup() {
  createCanvas(windowWidth,windowHeight);
}
var x =25
var y =25
var w =50
var r_b =50
var r_s =20
function draw() {
  background(0);
  noFill()
  stroke(255)
  for (var x=25;x<=width+(w/2);x=x+w){
    ellipse(x,y,r_b)
    rectMode(CENTER)
    rect(x,y,w)
    ellipse(x+w/2,y+w/2,r_s)
  }
  ellipse(x,y+50,r_b)
  rectMode(CENTER)
  rect(x,y+50,w)
  ellipse(x+w/2,y+w/2+50,r_s)
}
```
![image](https://hackmd.io/_uploads/S1bIUlTmp.png)

---

## 步驟七

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

```javascript=
function setup() {
  createCanvas(windowWidth,windowHeight);
}
var x =25
var y =25
var w =50
var r_b =50
var r_s =20
function draw() {
  background(0);
  noFill()
  stroke(255)
  for (var y=25;y<=100;y=y+w)
  for (var x=25;x<=width+(w/2);x=x+w){
    ellipse(x,y,r_b)
    rectMode(CENTER)
    rect(x,y,w)
    ellipse(x+w/2,y+w/2,r_s)
  }
}
```
![image](https://hackmd.io/_uploads/By2bDkTQT.png)

---

## 步驟八

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


```javascript=
function setup() {
  createCanvas(windowWidth,windowHeight);
  background (0);
}
var x=25;
var y=25;
var r_b=50;
var w=50;
var r_s=20;

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)
  x=x+w
  if (x>width){
    x=0
    y=y+w
  }
}
```
```javascript=
function setup() {
  createCanvas(windowWidth,windowHeight);
}
var x =25
var y =25
var w =50
var r_b =50
var r_s =20
function draw() {
  background(0);
  noFill()
  stroke(255)
  for (var y=25;y<=height+(w/2);y=y+w){
    for (var x=25;x<=width+(w/2);x=x+w){
      ellipse(x,y,r_b)
      rectMode(CENTER)
      rect(x,y,w)
      ellipse(x+w/2,y+w/2,r_s)
    }
  } 
}
```
![image](https://hackmd.io/_uploads/HkkZ4JTma.png)

---


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



```javascript=
//https://youtu.be/PF_IdMQiBgM
function setup() {
  createCanvas(windowWidth,windowHeight);
}
var x =25
var y =25
var w =50
var r_b =50
var r_s =20
function draw() {
  background(0);
  noFill()
  stroke(255)
  for (var y=25;y<=height+(w/2);y=y+w){
    for (var x=25;x<=width+(w/2);x=x+w){
      stroke("#9d0208")
      ellipse(x,y,w+mouseX/30)
      rectMode(CENTER)
      stroke("#ffd60a")
      rect(x,y,w+mouseX/30)
      stroke("#003566")
      ellipse(x+w/2,y+w/2,w+mouseX/30)
    }
  } 
}
```
![動畫3](https://hackmd.io/_uploads/ryT8Uy67a.gif)

---

# 自行設計畫面
第一個作業.md
目前顯示的是「第一個作業.md」。

## 步驟一 畫一個圓
![image.png](https://hackmd.io/_uploads/rJcei6Bmp.png)

```javascript=
function setup() {
  createCanvas(windowWidth,windowHeight);
  background("#edf2f4")
}

function draw() {
  background("#edf2f4");
  noFill()
  stroke("#2b2d42")
  ellipse(50,50,100)
}
```


---

## 步驟二 再畫一個圓，讓他在第一個圓內

![image.png](https://hackmd.io/_uploads/SkHLjTS76.png)
```javascript=
function setup() {
  createCanvas(windowWidth,windowHeight);
  background("#edf2f4")
}

function draw() {
  background("#edf2f4");
  noFill()
  stroke("#2b2d42")
  ellipse(50,50,100)
  ellipse(50,50,50)
}
```

---

## 步驟三 畫一個正方形，包括在第二個圓外

![image.png](https://hackmd.io/_uploads/HyPjspr7p.png)
```javascript=
function setup() {
  createCanvas(windowWidth,windowHeight);
  background("#edf2f4")
}

function draw() {
  background("#edf2f4");
  rectMode(CENTER) //讓方框的座標以方框中心為主
  noFill()
  stroke("#2b2d42")
  ellipse(50,50,100)
  ellipse(50,50,50)
  rect(50,50,50)
}
```

---

## 步驟四 在右下角畫一個方框

![image.png](https://hackmd.io/_uploads/Bk6ghpSXT.png)
```javascript=
function setup() {
  createCanvas(windowWidth,windowHeight);
  background("#edf2f4")
}

function draw() {
  background("#edf2f4");
  rectMode(CENTER) //讓方框的座標以方框中心為主
  noFill()
  stroke("#2b2d42")
  ellipse(50,50,100)
  ellipse(50,50,50)
  rect(50,50,50)
  rect(90,90,30)
}
```
---

## 步驟五 讓圖形充滿整排

![image.png](https://hackmd.io/_uploads/rJ6ifRSQa.png)
```javascript=
function setup() {
  createCanvas(windowWidth,windowHeight);
  background("#edf2f4")
}
var w=100;
function draw() {
  background("#edf2f4");
  rectMode(CENTER) //讓方框的座標以方框中心為主
  noFill()
  stroke("#2b2d42")
  for(var x=50;x<=width+(w/2);x=x+w){
  ellipse(x,50,100)
  ellipse(x,50,50)
  rect(x,50,50)
  rect(x+40,90,30)
  }
}

```

---

## 步驟六 讓圖形充滿整個頁面

![image.png](https://hackmd.io/_uploads/HJsiL0BXp.png)
```javascript=
function setup() {
  createCanvas(windowWidth,windowHeight);
  background("#edf2f4")
}
var w=100;
function draw() {
  background("#edf2f4");
  rectMode(CENTER) //讓方框的座標以方框中心為主
  noFill()
  stroke("#2b2d42")
 for(var y=50;y<=height+50;y=y+w){
  for(var x=50;x<=width+(w/2);x=x+w){
  ellipse(x,y,100)
  ellipse(x,y,50)
  rect(x,y,50)
  rect(x+40,y+40,30)
  }
  }
}
```
---
## 步驟七 讓圖形跟著滑鼠變大縮小
![動畫2](https://hackmd.io/_uploads/SkY0vC27T.gif)

```javascript=
function setup() {
  createCanvas(windowWidth,windowHeight);
  background("#edf2f4")
}
var w=100;
function draw() {
  background("#edf2f4");
  rectMode(CENTER) //讓方框的座標以方框中心為主
  noFill()
  stroke("#2b2d42")
 for(var y=50;y<=height+50;y=y+w){
  for(var x=50;x<=width+(w/2);x=x+w){
  ellipse(x,y,w+mouseY/10)
  ellipse(x,y,50)
  rect(x,y,w+mouseX/10)
  rect(x+40,y+40,30)
  }
  }
}
```
---
## 步驟八 讓音樂隨著滑鼠按下撥放
![動畫1](https://hackmd.io/_uploads/B1t_PAn7p.gif)
```javascript=
var sound1 
function preload(){
  sound1 = loadSound ("47538_feveran_strong_rock.mp3")  
}
function setup() {
  createCanvas(windowWidth,windowHeight);
  background("#edf2f4")
  analyzer = new p5.Amplitude();
  analyzer.setInput(sound1)
}
var w=100;
function draw() {
  background("#edf2f4");
  rectMode(CENTER) //讓方框的座標以方框中心為主
  noFill()
  stroke("#2b2d42")
 for(var y=50;y<=height+50;y=y+w){
  for(var x=50;x<=width+(w/2);x=x+w){
  ellipse(x,y,w+mouseY/10)
  ellipse(x,y,50)
  rect(x,y,w+mouseX/10)
  rect(x+40,y+40,30)
  }
  }
}

function mousePressed(){
  if(sound1.isPlaying()){
    sound1.stop();
  }else{
    sound1.play();
  }
}
```
## 步驟九 音樂播放時，圖案隨震幅改變，音樂停止時，圖案隨滑鼠改變
![動畫ˋ](https://hackmd.io/_uploads/HyNkz-pXp.gif)
```javascript=
var sound1 
function preload(){
  sound1 = loadSound ("Reminiscence.mp3")  
}
function setup() {
  createCanvas(windowWidth,windowHeight);
  background("#edf2f4")
  analyzer = new p5.Amplitude();
  analyzer.setInput(sound1)
}
var w=100;
var fc
function draw() {
  background("#fefae0");
  rectMode(CENTER) //讓方框的座標以方框中心為主
  noFill()
  if(sound1.isPlaying())
  {
   fc = map(analyzer.getLevel(),0,1,0,100)
  }
  else
  {
   fc = map(mouseX,0,width,0,100)
  }
  stroke("#b5838d")
  for(var y=50;y<=height+50;y=y+w){
  for(var x=50;x<=width+(w/2);x=x+w){
  stroke("#e5989b")
  ellipse(x,y,w+fc)
  stroke("#b5838d")
  ellipse(x,y,50+fc)
  stroke("#ffddd2")
  rect(x,y,w)
  stroke("#ffcdb2")
  rect(x+40,y+40,30+fc)
  }
  }
}
function mousePressed(){
  if(sound1.isPlaying()){
    sound1.stop();
  }else{
    sound1.play();
  }
}
```
