---
# System prepended metadata

title: ch12. 媒體_聲音處理_學生版 - 影像、聲音與影片的整合與拆解(聲音處理)
tags: [學生版, 程式設計, 第十二章, 互動藝術程式創作入門, Creative Coding]

---

---
tags: 程式設計,第十二章,學生版,互動藝術程式創作入門,Creative Coding
---
# ch12. 媒體_聲音處理_學生版 - 影像、聲音與影片的整合與拆解(聲音處理)

### noise材質參考
https://www.istockphoto.com/search/2/image?phrase=noise+texture



### 操作聲音

https://www.openprocessing.org/sketch/906080
- loadAudio
- p5.SoundFile
- [樂器 sample](https://philharmonia.co.uk/resources/sound-samples/) 
- [freesound](https://freesound.org)


* 來源：freesound.org / philharmonia
* 操作
    * soundFormats()：設定聲音檔案類型
    * loadSound()：讀取聲音檔案

```javascript=
function preload(){
    ???????
}   
```


---

* sound.play()：播放聲音檔


---

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


利用滑鼠按下後產生聲音

```javascript=
var sound1,sound2,sound3
var noiseImg
function preload(){
	sound1=loadSound("gong.mp3")
	sound2=loadSound("wash.mp3")
	sound3=loadSound("castanets__025_mezzo-forte_struck-singly.mp3")
	noiseImg=loadImage("noise.jpg")
}
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
}

function draw() {
	//circle(mouseX, mouseY, 20);
	background(0,20)
}
function mousePressed(){
	sound1.play()
	background(255)
	fill(255,0,0)
	ellipse(width/2,height/2,100)
}
```


---

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


---

```javascript=
var sound1,sound2,sound3
var noiseImg
var ts_sound1,ts_sound2,ts_sound3
function preload(){
	sound1=loadSound("gong.mp3")
	sound2=loadSound("wash.mp3")
	sound3=loadSound("castanets__025_mezzo-forte_struck-singly.mp3")
	noiseImg=loadImage("noise.jpg")
}
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
}

function draw() {
	//circle(mouseX, mouseY, 20);
	background(0,20)
	var delta=frameCount-ts_sound1
	var ratio=map(delta,0,50,0,1,true)
	ellipse(width/2,height/2,ratio*100+100)
}
function mousePressed(){
	sound1.play()
	ts_sound1=frameCount
	background(255)
	fill(255,0,0)
	ellipse(width/2,height/2,100)
}
```
   

---
### 使用easing function
 這樣的呈現太過於線性
* [結合 easing function](https://easings.net/zh-tw)
    * 參考 [easings.net](https://easings.net/zh-tw)


---


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

---
```javascript=

function easeOutElastic(x){
const c4 = (2 * Math.PI) / 3;

return x === 0
  ? 0
  : x === 1
  ? 1
  : pow(2, -10 * x) * sin((x * 10 - 0.75) * c4) + 1;
}



```


---
加入顏色，也讓其有顏色的震動

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


```javascript=
var sound1,sound2,sound3
var noiseImg
var ts_sound1,ts_sound2,ts_sound3
function preload(){
	sound1=loadSound("gong.mp3")
	sound2=loadSound("wash.mp3")
	sound3=loadSound("castanets__025_mezzo-forte_struck-singly.mp3")
	noiseImg=loadImage("noise.jpg")
}
function easeOutElastic(x){
const c4 = (2 * Math.PI) / 3;
return x === 0
  ? 0
  : x === 1
  ? 1
  : pow(2, -10 * x) * sin((x * 10 - 0.75) * c4) + 1;
}
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
}

function draw() {
	//circle(mouseX, mouseY, 20);
	background(0,20)
	var delta=frameCount-ts_sound1
	var ratio=map(delta,0,50,0,1,true)
	fill(easeOutElastic(ratio)*210+50,154,154)
}
function mousePressed(){
	sound1.play()
	ts_sound1=frameCount
	background(255)
	fill(255,0,0)
	ellipse(width/2,height/2,100)
}
```


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


---

```javascript=
var sound1,sound2,sound3
var noiseImg
var ts_sound1,ts_sound2,ts_sound3
function preload(){
	sound1=loadSound("gong.mp3")
	sound2=loadSound("wash.mp3")
	sound3=loadSound("castanets__025_mezzo-forte_struck-singly.mp3")
	noiseImg=loadImage("noise.jpg")
}
function easeOutElastic(x){
const c4 = (2 * Math.PI) / 3;
return x === 0
  ? 0
  : x === 1
  ? 1
  : pow(2, -10 * x) * sin((x * 10 - 0.75) * c4) + 1;
}
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
}

function draw() {
	//circle(mouseX, mouseY, 20);
	background(0,20)
	var delta=frameCount-ts_sound1
	var ratio=map(delta,0,50,0,1,true)
	fill(easeOutElastic,(ratio)*210,150,150)
	push()
	  translate(width/2,height/2)
	  ellipse(0,0,easeOutElastic(ratio)*100+100)
	  for(var i=-2;i<2;i++){
			ellipse((1-easeOutElastic(ratio))*100*i,0,50)
		}
	pop()
}
function mousePressed(){
	sound1.play()
	ts_sound1=frameCount
	background(255)
	fill(255,0,0)
	ellipse(width/2,height/2,100)
}
```


---
### 產生方形效果

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

---

```javascript=




```
---
### 產生三角形效果
![](https://i.imgur.com/78EIsMP.gif)
```javascript=
triangle(80,80,
					 -80,80,
					 0,-80)
```

---
```javascript=



```
---
### 切分三等份並加入noise背景
![](https://i.imgur.com/JMCSkrJ.jpg)


---
#### 宣告變數與載入圖片檔案
```javascript=
var sound1,sound2,sound3
var noiseImg
var ts_sound1,ts_sound2,ts_sound3
var ratio1,ratio2,ratio3
function preload(){
	sound1=loadSound("gong.mp3")
	sound2=loadSound("wash.mp3")
	sound3=loadSound("castanets__025_mezzo-forte_struck-singly.mp3")
	noiseImg=loadImage("noise.jpg")
}
function easeOutElastic(x){
const c4 = (2 * Math.PI) / 3;
return x === 0
  ? 0
  : x === 1
  ? 1
  : pow(2, -10 * x) * sin((x * 10 - 0.75) * c4) + 1;
}
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
}

function draw() {
	noStroke()
	fill(249, 57, 57)
	rect(0,0,width/3,height)
	fill(255, 196, 35)
	rect(width/3,0,width/3,height)
	fill(49, 53, 99)
	rect(width/3*2,0,width/3,height)
	background(0,20)
	
	push()
	  ratio2=map(frameCount-ts_sound2,0,50,0,1,true)
	  fill(easeOutElastic(ratio2)*100,100,50)
	  stroke(2)
	  translate(0+width/6,height/2)
	  ellipse(0,0,easeOutElastic(ratio2)*100+100)
	  for(var i=-2;i<2;i++){
			ellipse((1-easeOutElastic(ratio2))*100*i,0,50)
		}
	pop()
	
	push()
	  ratio1=map(frameCount-ts_sound1,0,50,0,1,true)
	  fill(easeOutElastic(ratio1)*50,80,100)
	  stroke(2)
	  translate(width/2,height/2)
	  ellipse(0,0,easeOutElastic(ratio1)*100+100)
	  for(var i=-2;i<2;i++){
			ellipse((1-easeOutElastic(ratio1))*100*i,0,50)
		}
	pop()
	
	push()
	  ratio3=map(frameCount-ts_sound3,0,50,0,1,true)
	  fill(easeOutElastic(ratio3)*80,100,200)
	  stroke(2)
	  translate(width/6+width/3*2,height/2)
	  ellipse(0,0,easeOutElastic(ratio3)*100+100)
	  for(var i=-2;i<2;i++){
			ellipse((1-easeOutElastic(ratio3))*100*i,0,50)
		}
	pop()
	push()
		blendMode(MULTIPLY)
		image(noiseImg,0,0,width,height)
  pop()
}
function mousePressed(){
	let select = int(mouseX/(width/3))
	if (select==0){
		sound2.play()
		ts_sound2=frameCount
	}
	if (select==1){
		sound1.play()
		ts_sound1=frameCount
	}
	if (select==2){
		sound3.play()
		ts_sound3=frameCount
	}
}


```


---

#### 並在draw()加入以下程式碼

分三段
```javascript=
    fill(249, 57, 57)
	rect(0,0,width/3,height)
	fill(255, 196, 35)
	rect(width/3,0,width/3,height)
	fill(49, 53, 99)
	rect(width/3*2,0,width/3,height)
```


---

#### 產生noise效果
```javascript=
push()
		blendMode(MULTIPLY)
		image(noiseTexture,0,0,width,height)
pop()
```


---

分三塊聲音呈現

```javascript=
function mousePressed(){
	let select = int(mouseX/(width/3))
	if (select==0){
		sound2.play()
		lastTriggerTime1=frameCount
	}
	if (select==1){
		sound1.play()
		lastTriggerTime2=frameCount
	}
	if (select==2){
		sound3.play()
		
		lastTriggerTime3=frameCount
	}
}
```



---

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

---
```javascript=



```

---



* 操作影片
* createVideo
* 設定位置與大小
    * video.position()
    * video.size()
* viedo.play()
    * 可以包在一個函式內處理
```javascript=
function videoLoad(){
    vid.loop()
    vid.volume=0
    vid.play()
}

```
* 隱藏影片 video.hide()（但還是會繼續播放）
* 使用繪製的方式處理影片可以結合畫布操作
```javascript=
scale(0.5)
translate(random(-10,10), random(-10,10))
image(vid,0,0)
```




---

### 小技巧與心法


* 為抓到的像素顏色增添隨機性
```javascript=
let c )
fill(
    c[0] + random(-30, mouseX/20),
    c[1],
    c[2] + random(-30, mouseY/20)
)
```

* p5 的語法們
    * preload()：需要在 setup() 之前預先執行的函式。
    * loadImage()：讀取圖片檔案，記得先將圖片上傳到 OpenProcessing 的 Files 上。
    * image()：繪製由loadImage()讀取的圖片或是由 createGraphics() 創建的畫布。
    * imageMode()：設定圖片的繪製位置，可以選擇 CENTER, CORNER 或是 CORNERS。
    * blendMode():設定繪製的混合模式。
    * loadSound()：讀取聲音檔案。
    * createVideo()：創造一個影像元件，參數除了影像檔案之外，也可以放入影像檔案讀取完之後的 callback 函式。
## 課後問題/練習
* 練習製作拼貼遊戲世界
* 解構圖片做成抽象畫
* 結合音效、圖片跟影片做自製樂器



---


---

- 核心概念
    - 如何使用圖片結合物件互動
    - 如何載入與以動作觸發聲音
    - 解構圖片為粒子跟像素
    - 如何影片放入作品中

- 觀摩案例


![](https://i.imgur.com/gpjGcLm.jpg)
https://www.pinterest.com/search/pins/?q=collage%20art&rs=typed&term_meta[]=collage%7Ctyped&term_meta[]=art%7Ctyped

![](https://i.imgur.com/NoAL7xt.png)
https://www.youtube.com/watch?v=zHS0Oq15ceA
vibertthio.com/beact-client

![](https://i.imgur.com/2682o3p.jpg)
https://indieground.net/blog/30-images-wonderfully-ruined-by-glitch-artists/

![](https://i.imgur.com/KLnkF95.jpg)

http://satyarth.me/articles/pixel-sorting/

![](https://i.imgur.com/opo6kOY.png)
https://www.instagram.com/p/CADtGmrI0Ce/

![](https://i.imgur.com/IjvJ27Z.jpg)
https://www.instagram.com/p/B-zFkkjHFSg/


- 預載入
    - function preload()
ch12. 媒體_聲音處理_學生版 - 影像、聲音與影片的整合與拆解(聲音處理).md
目前顯示的是「ch12. 媒體_聲音處理_學生版 - 影像、聲音與影片的整合與拆解(聲音處理).md」。