Day 26 - 使用者影音互动 - 即时串流声音与影片

目标

• 学习如何抓取跟分析声音制作互动
• 了解如何抓取与绘制使用者的即时影片
• 学习如何把即时影像转成即时抽象画
• 能够追踪影像中的颜色

课程重点

使用麦克风

• p5.AudioIn

  • 建立一个新的麦克风

    let mic = new p5.AudioIn()
    mic.start()
    
    

  • 使用 lerp 让接收的资讯更平滑

    let micLevel = mic.getLevel()
    r = lerp(micLevel, micLevel*5000, 0.05)
    ellipse(width/2, height/2 ,r)
    
    

• p5.FFT 分析声音频谱

  • 使用方式

    let mic = new p5.AudioIn()
    mic.start()
    fft = new p5.FFT()
    fft.setInput(mic)
    
    let spectrum = fft.analyze()// 回传一个长度为 1024 的阵列
    

  • 制作渐淡的音频轨迹

    background(0,20)
    noFill()
    beginShape()
    for(let i = 0; i<spectrum.length/1.5;i++){
        vertex(i, height/2-specturm[i]*2)
    }
    endShape()
    copy(0,0,width, height,0,-1,width,height)
    
    

  • getCentroid() 取得中心频率

    • 结合颜色

    let center = fft.getCentroid()
    colorMode(HSB)
    fill(map(center,500,8000,0,400),100,100)
    
    

绘制阴影

drawingContext.shadowColor = color(0,100)
drawingContext.shadowOffsetY = -5
drawingContext.shadowBlur = 20

使用影像

• P5.createCapture()

  • 使用方式

    capture = createCapture(VIDEO)
    image(capturem mouseX, mouseY)
    
    

  • 先储存 capture 抓到的影像，再去处理储存起来的影像

    let cacheGraphic
    cacheGraphic = createGraphic(640,480)
    cacheGraphic.image(capture, 0,0)
    for(var i=0 ; i<cacheGraphic.width; i+=10){
        var pixel = cacheGraphic[i]
        fill(pixel)
        rect(i,o,10)
    }
    
    

• 修正摄影机左右相反的问题

  cacheGprhic.translate(640,0)// 先往右边移动一倍的距离
  cacheGraphic.scale(-1,1)// 翻转画布
  

• 取得亮度：(pixel[0] + pixel[1] + pixel[2])/3 //RGB 的平均值

  let cacheGraphic
  cacheGraphic = createGraphic(640,480)
  cacheGraphic.image(capture, 0,0)
  for(var i=0 ; i<cacheGraphic.width; i+=10){
      var pixel = cacheGraphic[i]
      bk = (pixel[0] + pixel[1] + pixel[2])/3//RGB 的平均值
      fill(bk)//变成灰阶的版本
      rect(i,o,10)
  }
      ```
  
  

• 文字云的创作

  • 取的当前像素的亮度 bk = (pixel[0] + pixel[1] + pixel[2])/3

  • 取得当前亮度对应到的文字（假设共有 10 个字可选择）：

    let txt = "一二三四五田雷电龛龘"
    let bkId = int(map(bk, 0, 255, 10, 0))
    text(txt[bkId])
    
    

影片操作进阶－追踪颜色

• 引用 Tracking.js 的方式，以下则一即可：

  • 在新的 tab 中使用 **[trackingjs 的程序码](https://cdnjs.cloudflare.com/ajax/libs/tracking.js/1.1.3/tracking-min.js)** ，删掉注解的部分以避免执行错误。

  • 参考这个 sketch，在一个新个 tab 里面新增下列程序码即可：

    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "https://cdnjs.cloudflare.com/ajax/libs/tracking.js/1.1.3/tracking-min.js";
    document.head.appendChild(s);
    
    

• 绑定 capture 的影片

  capture = createCapture(VIDEO)
  capture.poistion(0,0)
  capture.id("myVideo")
  colors = new tracking.colorTracker(['yellow','magenta','cyan'])//追踪特定颜色
  tracking.track("#myVideo",colors)// 绑定影片
  

• tracking 的 colorTracker 可以抓取特定的颜色，并回传一个有这些色块位置与大小的阵列。

  [
      {
          color: "yellow"
          height: 473
          width: 543
          x: 96
          y: 0
      },
      {
          color: "yellow"
          height: 472
          width: 541
          x: 98
          y: 0
      }...
  ]
  
  

• 绑定资料更新的事件

  colors.on('track',updateData)// 绑定事件，画面更新的时候执行 updateDatafunction updateData(event){
      data = event.data
  }
  
  

• 把资料绘制到萤幕上

  fill('yellow')
  if (data){
  	for(var i=0;i<data.length;i++){
  		fill(data[i].color)
  		rect(
              data[i].x,data[i].y,
              data[i].width,data[i].height
              )
  	}
  }