# 第 13 章 【影音互動與即時資料應用】使用者影音互動 - 即時串流聲音與影片

pixabay 下載免費影片

上傳檔案，檔案不要太大，免費版有上限

let vid
function setup() {
  vid = createVideo("檔名.mp4", videoLoad)
  
  vid.position(0, 0)
  vid.size(600, 400)
  vid.hide()
}

function videoLoad() {
  vid.loop()
  vid.volume = 0
  vid.play()
}

function draw() {
  blendMode(SOFT_LIGHT)
  translate(mouseX, mouseY)
  scale(0.5)
  translate(random(-10, 10), random(-10, 10))
  image(vid, 0, 0)
  // ellipse(mouseX, mouseY, 20, 20)
}

利用不同 blendMode 達成特殊效果，例如 blendMode(SOFT_LIGHT)。

let vid
function setup() {
  vid = createVideo("檔名.mp4", videoLoad)
  
  vid.position(0, 0)
  vid.size(600, 400)
  vid.hide()
}

function videoLoad() {
  vid.loop()
  vid.volume = 0
  vid.play()
}

function draw() {
  background(0)
  blendMode(SOFT_LIGHT)
  
  translate(0, frameCount*30 % height)
  scale(0.3)
  
  image(vid, 0, 0)
}  

## 使用者影音互動 - 即時串流聲音與影片

[Experiments with Google](https://experiments.withgoogle.com/)

[Keyboard](https://creatability.withgoogle.com/keyboard/)

[Body Synth](https://creatability.withgoogle.com/body-synth/)

[Semi-Conductor](https://experiments.withgoogle.com/semi-conductor)

[Seeing Music](https://experiments.withgoogle.com/seeing-music)


## 聲音接收與操作

## 如何載入麥克風聲音

[p5.AudioIn](https://p5js.org/reference/#/p5.AudioIn)

let mic;

 function setup(){
  let cnv = createCanvas(100, 100);
  cnv.mousePressed(userStartAudio);
  textAlign(CENTER);
  mic = new p5.AudioIn();
  mic.start();
}

function draw(){
  background(0);
  fill(255);
  text('tap to start', width/2, 20);

  micLevel = mic.getLevel();
  let y = height - micLevel * height;
  ellipse(width/2, y, 10, 10);
}

將 mic 的 Level 數值連動圓的半徑大小

var micLevel = mic.getLevel()

用lerp的方式避免突然改變的值

lerpedMicLevel = 0
lerpedMicLevel = lerp(lerpMicLevel, micLevel, 0.1)

==動畫要有一定的連續程度，如果改變太突然會不好看==

rotate(frameCount/20)
for(let i=0;i<40;i++){
  rotate(lerpMicLevel * PI/10)
  arc(0,0,i*(15+lerpMicLevel*500),i*(15+lerpMicLevel*500),0, PI)
    
}

搭配材質/blendMode 創造不同感覺 或更完整的作品

Frequency Spectrum
FFT

let mic, fft
//fft作為分析的物件 幫助分析頻譜
fft = new p5.FFT()
fft.setInput(mic)


let spectrum = fft.analyze()
let center = fft.getCentroid()
noFill()
background(0,20)
strokeWeight(3)
colorMode(HSB)
stroke(map(center,1000,5000,0,360),80,9-)
beginShape()
for(let i=0; i<spectrum.length/1.5; i+= 5){
    //rect(i,0,5,spectrum[i]*3)
    stroke(255)
    vertex(i,height/2 - spectrum[i]*2)
    vertex(i,frameCount - spectrum[i])
}
endShape()
//copy(0,0,width,height,0,-1)

額外補充 加陰影

drawingContext.shadowColor= color(0,30)
drawingContext.shadowOffsetY = 5
drawubgContext.shadowBlur = 20

### 擷取影像
擷取即時影像來做像素畫、抽象畫

function setup() {
  capture = createCapture(VIDEO)
  capture.size(640, 480)
  
  capture.hight()
}

function draw() {
  cacheGraphics.image(capture, 0, 0)
  noStroke()
  scale(1)
  background(0)
  let span = 12
  for()
}

### 製作馬賽克效果



根據"顏色"旋轉

### 文字雲
黑的部分就用複雜的字來代替，亮的用簡單字

`fill(pixel)`
文字染上像素的顏色

做一個字串的列表，搭配 map
let txt = '一二三天賜五田電龍龛龘'
let bkId = int(map(bk, 0, 255, 10, 0))
text(txt[bkId], i, o)

加上材質

## 13-5 影像操作進階－顏色追蹤