---
tags: 程式設計,第十三章,學生版,互動藝術程式創作入門,Creative Coding
---
# 章節 13 - 學生版_使用者影音互動 - 即時串流聲音
## 單元介紹
目標
* 學習如何抓取跟分析聲音製作互動
* 瞭解如何抓取與繪製使用者的即時影片
* 學習如何把即時影像轉成即時抽象畫
* 能夠追蹤影像中的顏色
## 課程重點
### 使用麥克風
#### p5.AudioIn
* 建立一個新的麥克風
```javascript=
let mic = new p5.AudioIn()
mic.start()
```
---
### 圓隨著聲音大小聲放大縮小
---
```javascript=
var micLevel = mic.getLevel()
fill(255)
text(micLevel,50,50)
r = lerp(r, micLevel*500,0.02)
if(micLevel>0.1){
fill(255,0,0)
}
```
---
### 上圖太快速，讓接收顯示的資訊更為平滑
### 使用 lerp 讓接收的資訊更平滑
```javascript=
let micLevel = mic.getLevel()
r = lerp(r, micLevel*5000, 0.05)
ellipse(width/2, height/2 ,r)
```
---
完整程式碼
```javascript=
var mic
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
mic = new p5.AudioIn()
mic.start()
}
function draw() {
//circle(mouseX, mouseY, 20);
background(0);
var micLevel = mic.getLevel()
ellipse(width/2,height/2,micLevel*500)
}
```
---
### 超過某個範圍會變紅色的圓
---
#### 完整程式碼
```javascript=
var mic
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
mic = new p5.AudioIn()
mic.start()
}
function draw() {
//circle(mouseX, mouseY, 20);
background(0);
var micLevel = mic.getLevel()
ellipse(width/2,height/2,micLevel*500)
}
```
---
### 聲音大小聲可以放大縮小
---
#### 完整程式碼
```javascript=
var mic
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
mic = new p5.AudioIn()
mic.start()
}
var r = 10
function draw() {
background(0);
var micLevel = mic.getLevel()
fill(255)
text(micLevel,50,50)
r = lerp(r, micLevel*500,0.02)
if(micLevel>0.1){
fill(255,0,0)
}
push()
translate(width/2,height/2)
noFill()
stroke(255)
for (var i =0;i<20;i++){
//ellipse(0,0,i*r/10)
rotate(r*PI/1000)
arc(0,0,i*r,i*r,0,PI)
}
pop()
}
```
---
加上lerp()函數
---
#### 完整程式碼
```javascript=
var mic
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
mic = new p5.AudioIn()
mic.start()
}
var r = 10
function draw() {
background(0);
var micLevel = mic.getLevel()
fill(255)
text(micLevel,50,50)
r = lerp(r, micLevel*500,0.02)
if(micLevel>0.1){
fill(255,0,0)
}
push()
translate(width/2,height/2)
noFill()
stroke(255)
for (var i =0;i<20;i++){
//ellipse(0,0,i*r/10)
rotate(r*PI/1000)
arc(0,0,i*r,i*r,0,PI)
}
pop()
}
```
---
把ellipse指令改為arc圓弧
---
---
#### 完整程式碼
```javascript=
```
---
### 旋轉半弧的角度
---
#### 完整程式碼
```javascript=
```
---
### 不用除以某數
---
```javascript=
for(var i=0;i<20;i++){
rotate(lerpedMicLevel*PI); //不要除以某數
arc(0, 0,i*(5+lerpedMicLevel*500),
i*(5+lerpedMicLevel*500),
0,PI);
}
```
---
加上顏色
---
#### 完整程式碼
```javascript=
```
---
### 聲音大聲時反應更大
---
#### 完整程式碼
```javascript=
```
---
### 加上noise檔案
---
#### 完整程式碼
```javascript=
```
---
### 頻譜分析與繪製
---
#### 完整程式碼
```javascript=
var mic,noiseTexture
var colors = "ecba82-81c14b-2e933c-297045-204e4a".split("-").map(a=>"#"+a)
function preload() {
noiseTexture=loadImage("noise.jpg");
}
function setup() {
createCanvas(windowWidth, windowHeight);
background(100);
mic = new p5.AudioIn()
mic.start()
}
var r = 10
function draw() {
background(0);
var micLevel = mic.getLevel()
fill(255)
text(micLevel,50,50)
r = lerp(r, micLevel*500,0.02)
if(micLevel>0.1){
fill(255,0,0)
}
push()
translate(width/2,height/2)
noFill()
strokeWeight(5)
for (var i =0;i<20;i++){
var clr = colors[i%colors.length]
stroke(clr)
rotate(r*PI/1000)//數字影響效果
arc(0,0,i*r,i*r,0,PI)
}
pop()
push()
blendMode(MULTIPLY)
image(noiseTexture,0,0,width,height)
pop()
}
```
---
```javascript=
```
---
### 加上以下指令
```javascript=
noFill()
strokeWeight(3);
```
---
並把vertex(i, spectrum[i]*3);改成
vertex(i, height - spectrum[i]*3)
---
### 畫布軌跡留下來
加上
```javascript=
background(0,20);
```
---
```javascript=
copy(0,0,width, height,0,-1,width,height)//保留現在的圖，在下一次就會變成前一個畫面，會產生暫留感覺
```
---
```javascript=
beginShape()
for(let i = 0; i<spectrum.length*1.5;i+=5){
vertex(i, height/2 -spectrum[i]*3)
}
endShape()
```
---
#### 全部程式碼
```javascript=
```
---
### getCentroid() 取得中心頻率
* 結合顏色
---
```javascript=
let center = fft.getCentroid()
colorMode(HSB)
stroke(map(center,500,8000,0,400),100,100)
```
---
### 把背景與copy()指令拿掉
```javascript=
// background(0,20);
// copy(0,0,width,height,0,-1,width,height)
```
---
### 加上frameCount與時間相關
---
#### 完整程式碼
```javascript=
```
---
#### 把背景改為黑色，線條變細
並在迴圈前後都加上vertex
```javascript=
beginShape()
vertex(0, frameCount)
for(let i = 0; i<spectrum.length/1.5;i+=5){
vertex(i, frameCount -spectrum[i])
}
vertex(width, frameCount)
endShape()
```
---
### 繪製陰影
```javascript=
drawingContext.shadowColor = color(0,100)
drawingContext.shadowOffsetY = -5
drawingContext.shadowBlur = 20 //陰影的模糊
```
---
#### 完整程式碼
```javascript=
```
---
### 使用充滿顏色不是只有框線
---
#### 完整程式碼
```javascript=
```
---
讓其轉動
完整程式碼
```javascript=
```
章節 13 - 學生版_使用者影音互動 - 即時串流聲音.md
目前顯示的是「章節 13 - 學生版_使用者影音互動 - 即時串流聲音.md」。
Sign in with Wallet
Connect another wallet