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()：讀取聲音檔案

function preload(){
    ???????
        

---

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

---


利用滑鼠按下後產生聲音

function preload(){
   sound1=loadSound("gong.mp3")
}
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)
}

---


---

function preload(){
   sound1=loadSound("gong.mp3")
}
function setup(){
	createCanvas(windowWidth, windowHeight);
	background(100);
}

function draw() {
	background(0,20);
	var delta=frameCount -gongTs
	var ratio=map(delta,0,50,0,1,true)
	ellipse(width/2,height/2,ratio*100+100);
}
function mousePressed(){
	sound1.play();
	gongTs=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)

---


---

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 preload(){
   sound1=loadSound("gong.mp3")
}
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() {
	background(0,20);
	var delta=frameCount -gongTs
	var ratio=map(delta,0,50,0,1,true)
	fill(easeOutElastic(ratio)*255,255,0)
	ellipse(width/2,height/2,easeOutElastic(ratio)*100+100);
}
function mousePressed(){
	sound1.play();
	gongTs=frameCount
	background(255);
	fill(255,0,0)
	ellipse(width/2,height/2,100)
}

---

---

function preload(){
   sound1=loadSound("gong.mp3")
}
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(0);
}

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

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


---

function preload(){
   sound1=loadSound("gong.mp3")
	 sound2=loadSound("wash.mp3")
}
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(0);
}

function draw() {
	background(0,20);
	var delta=frameCount -gongTs
	var ratio=map(delta,0,50,0,1,true)
	fill(easeOutElastic(ratio)*255,255,0);
	push();
	  translate(width/2,height/2);
	 // ellipse(0,0,easeOutElastic(ratio)*100+100);
	rectMode(CENTER)
	rect(0,0,easeOutElastic(ratio)*100+100)
	  for(var i=-3;i<3;i++){
		//ellipse((1-easeOutElastic(ratio))*100*i,0,100);
			rotate(ratio)
			rect((1-easeOutElastic(ratio))*100*i,0,100)
	}
	pop();
}
function mousePressed(){
	sound2.play();
	gongTs=frameCount
	background(255);
	fill(255,0,0)
	ellipse(width/2,height/2,100)
}

---
### 產生三角形效果

triangle(80,80,
					 -80,80,
					 0,-80)

---

---
### 切分三等份並加入noise背景

---
#### 宣告變數與載入圖片檔案

function preload(){
   sound1=loadSound("gong.mp3")
	 sound2=loadSound("wash.mp3")
}
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(0);
}

function draw() {
	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);
	var delta=frameCount -gongTs
	var ratio=map(delta,0,50,0,1,true)
	fill(easeOutElastic(ratio)*255,255,0);
	push();
	  translate(width/2,height/2);
	 // ellipse(0,0,easeOutElastic(ratio)*100+100);
	rectMode(CENTER)
	rect(0,0,easeOutElastic(ratio)*100+100)
	  for(var i=-3;i<3;i++){
		//ellipse((1-easeOutElastic(ratio))*100*i,0,100);
			rotate(ratio)
			rect((1-easeOutElastic(ratio))*100*i,0,100)
	}
	pop();
}
function mousePressed(){
	sound2.play();
	gongTs=frameCount
	background(255);
	fill(255,0,0)
	ellipse(width/2,height/2,100)
}

---

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

分三段

    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效果

push()
		blendMode(MULTIPLY)
		image(noiseTexture,0,0,width,height)
pop()

---

分三塊聲音呈現

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
	}
}

---


---

---

* 操作影片
* createVideo
* 設定位置與大小
* video.position()
* video.size()
* viedo.play()
* 可以包在一個函式內處理

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

* 隱藏影片 video.hide()（但還是會繼續播放）
* 使用繪製的方式處理影片可以結合畫布操作

scale(0.5)
translate(random(-10,10), random(-10,10))
image(vid,0,0)

---

### 小技巧與心法

* 為抓到的像素顏色增添隨機性

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://www.pinterest.com/search/pins/?q=collage%20art&rs=typed&term_meta[]=collage%7Ctyped&term_meta[]=art%7Ctyped

https://www.youtube.com/watch?v=zHS0Oq15ceA
vibertthio.com/beact-client

https://indieground.net/blog/30-images-wonderfully-ruined-by-glitch-artists/


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

https://www.instagram.com/p/CADtGmrI0Ce/

https://www.instagram.com/p/B-zFkkjHFSg/

- 預載入
- function preload()

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