# 第12章【影音互動與即時資料應用】媒體 - 影像、聲音與影片的整合與拆解

12.1

使用影像 聲音 和影片整合進作品中

拼貼：pinterest 搜尋 "collage art"

【影音互動與即時資料應用】媒體 - 影像、聲音與影片的整合與拆解

- 影像素材包括變形 扭曲 分解跟使用
- 用影像素材來加上材質
- 讓各種動作綁上聲音
- 解構變成一個一個的像素，重製成抽象畫，做像素等級的扭曲或特效

!! 預先載入素材

- 把動作跟聲音連起來
- 解構圖片做成粒子跟像素
- 影片可以視為一個一個圖片的連續

Beact：一個音樂產生器 from Vibert
https://vibertthio.com/portfolio/projects/beact/

Blend Mode, Transform, Nosie

glitch 雜訊效果

Pixel sorting 把像素拿來做排序

Francois Vogel
https://www.instagram.com/francois.vogel/

glitch lab app
https://play.google.com/store/apps/details?id=com.ilixa.glitch&hl=en_US&gl=US&pli=1
取像素再換成圖形

12.2

如何載入圖片image()

let bmp

function preload(){ // 重要
    let bmp = loadImage(imgsrc)
}

把圖片畫出來

imageMode(CENTER) // 決定繪圖的起點

function draw(){
    image(bmp, x, y, width, height)
}

利用 for loop, push() 跟 pop()
畫出魚的位置變化

12.3

結合物件導向
改成說水母可以把魚嚇走@@

Class Fish() 代表魚
constructor
基本屬性 位置 速度

把剛剛的圖片加入粒子
this.img = fishImg
或利用 args 帶入

imageMode(CENTER)

建議放到 push() 跟 pop() 裡面

!! 注意 Function Scope 的問題

先 translate 再 scale
最好用 push 和 pop 先保護一下

速度的方向：

random2D() 隨機向量

let ang = this.vector.heading()
// 回傳 vector 指向的角度(-PI and PI 之間)

!! 全局變數 global variable

lerp 平滑化

size = lerp(nowSize, targetSize)

12.4

https://unsplash.com
很漂亮免版權的圖片

var moonImg
function preload(){
    moonImg = loadImage(圖片路徑)
}
function draw(){
    image(moonImg, 0, 0)
}

利用 for loop 取像素

let span = 50
for(i=0;i<moonImg.width;i+=span){  
    for(o=0;o<moonImg.height;o+=span){
        let c = moonImg.get(i, o) // 取出該位置的像素顏色
        fill(c)
        ellipse(i, o, span)
    }
}

針對像素作扭曲

push()
    translate(i, o)
    rotate(i/100)
    scale(random(2))
    rect(0, 0 ,random(30), random(30))
pop()

材質？Noise Texture

blendMode(MULTIPLY) // 忽略白色，留下深色
image(noiseImg, 0, 0, width, height)

!! 加一些畫布的操作，讓畫作更抽象

12.5 聲音的載入與操作

聲音的載入

先下載音檔音效

右邊側欄 files 上傳音檔


讓半徑跟 frameCount 作連動

將畫面分區，點擊觸發不同音階音檔