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

### 載入圖片方式

function preload(){
	mountainImg = loadImage("image211217.jpg");
}


---
設定以中心點為座標點

function draw() {
	imageMode(???????????)
	image(????????????);
}

---

撰寫程式碼顯示一堆的魚

//定義var變數
var fishImg;

//載入【圖片】區塊
function preload(){
	fishImg = loadImage("1_gr1k.png");
}

//開始【設定】區塊
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
}

//開始【繪製】區塊
function draw() {
	background(100);
	
	//重複圖樣
	for(i=0;i<height;i=i+200)
	{
		for(j=0;j<width;j=j+200)
		{
			
	imageMode(CENTER);
	image(fishImg, j, i,300,330);
			
		}
	}
}

---

//定義var變數
var fishImg;

//載入【圖片】區塊
function preload(){
	fishImg = loadImage("1_gr1k.png");
}

//開始【設定】區塊
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
}

//開始【繪製】區塊
function draw() {
	background(100);
	
	//重複圖樣
	for(i=0;i<height;i=i+200)
	{
		for(j=0;j<width;j=j+200)
		{
			
	imageMode(CENTER);
	image(fishImg, j, i,300,330);
			
		}
	}
}

---

## 產生一個會動的圖片


---


//定義var變數
var fishImg;

//載入【圖片】區塊
function preload(){
 fishImg = loadImage("1_gr1k.png");
}

//開始【設定】區塊
function setup() {
 createCanvas(windowWidth, windowHeight);
 background(100);
 frameRate(20)
}

//開始【繪製】區塊
function draw() {
 background(100);
  imageMode(CENTER);
 //重複圖樣
 for(y=0 ; y<height ; y=y+150)
 {
  for(x=0 ; x<width ; x=x+150)
  {
   
    //translate(x+random(-2,2),y+random(-2,2))
     //scale(0.8)
    image(fishImg, x,y+sin(frameCount/10+x+y)*100,300,330);

  }
 }
}

---

與座標有相關的移動

---


//定義var變數
var fishImg;

//載入【圖片】區塊
function preload(){
	fishImg = loadImage("1_gr1k.png");
}

//開始【設定】區塊
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	frameRate(20)
}

//開始【繪製】區塊
function draw() {
	background(100);
  imageMode(CENTER);
	//重複圖樣
	for(y=0 ; y<height ; y=y+150)
	{
		for(x=0 ; x<width ; x=x+150)
		{
			push()
			
				translate(x,y+sin(frameCount/100+x+y)*100)
			  rotate(sin(frameCount/100+x+y))
				image(fishImg, 0, 0, 300, 330);
			
		  pop()
		}
	}
}

---
## 加上一個水母圖片


//定義var變數
var fishImg;
var mouseImg;

//載入【圖片】區塊
function preload(){
	fishImg = loadImage("1_gr1k.png");
  mouseImg = loadImage("1.png");
}

//開始【設定】區塊
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	frameRate(20)
}

//開始【繪製】區塊
function draw() {
	background(100);
	fill(67,117,224,100)
	ellipse(width/2,height/2,sin(frameCount/100)*500)
  imageMode(CENTER);

	//重複圖樣
	for(y=0 ; y<height ; y=y+300)
	{
		for(x=0 ; x<width ; x=x+200)
		{
			push()
			
				translate(x,y+sin(frameCount/100+x+y)*100)
			  rotate(sin(frameCount/100+x+y))
				image(fishImg, 0, 0, 200, 230);
			
		  pop()
			image(mouseImg, mouseX, mouseY, 300, 300);
		}
	}
}

---
## 圖片的變化
### 顯示圖片

---

## 取得單位點的顏色

---
## 滑鼠移到哪顯示出顏色


---

## 沒框線，設定圓直徑為亂數


---


---

var mountainImg,landImg
function preload(){
	//mountainImg = loadImage("image211217.jpg")
	landImg= loadImage("landscape.jpg")
}
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	//image(mountainImg,0,0,width,height)
	//image(landImg,0,0,width,height)
	image(landImg,0,0)
}

function draw() {
	
	//let c = mountainImg.get(mouseX,mouseY)
	let imgX=random(landImg.width)
	let imgY=random(landImg.height)
	let c = landImg.get(imgX,imgY)
	//print(c)
	fill(c)
	noStroke()
	//ellipse(mouseX, mouseY, random(20),random(100));
	ellipse(imgX, imgY, random(20),random(100));
}

---


---

var mountainImg;
var noiseImg;
function preload(){
	mountainImg = loadImage("landscape.jpg");
	noiseImg = loadImage("noise_2.png");
}

function setup() {
	createCanvas(mountainImg.width,mountainImg.height);
	image(mountainImg,0,0)
}

function draw() {
	
	for(var x=0;x<mountainImg.width;x=x+30){
		for(var y=0;y<mountainImg.height;y=y+30){
			var c= mountainImg.get(x,y);
			fill(c);
			noStroke();
			ellipse(x,y,30);
		}
		
	}
	}

var mountainImg,landImg
function preload(){
	mountainImg= loadImage("landscape.jpg")
}
function setup() {
	// createCanvas(windowWidth, windowHeight);
	createCanvas(mountainImg.width,mountainImg.height);
	background(100);
	image(mountainImg,0,0)
}

function draw() {
	background(100); //沒有加此條指令的效果
	var span = map(mouseX,0,width,5,100);
	noStroke()
	for(var i=0;i<mountainImg.width;i+=span){
		for(var j=0;j<mountainImg.height;j+=span){
				let c = mountainImg.get(i,j)
				fill(c)
				ellipse(i, j,span);
		}
	}	
}

---

## ASCII與圖片的轉換

function draw() {

	let c = landImg.get(mouseX,mouseY)
	fill(c)
	noStroke()
	ellipse(mouseX, mouseY, random(100));
}

---



---



---

---

---
### 把文字內容放在圖片中，並做動態顯示


---


---

---

## 單元介紹

---

### 目標
* 能夠使用圖片結合物件互動
* 能夠載入與以動作觸發聲音
* 瞭解如何解構圖片為粒子跟像素
* 瞭解如何將影片放入作品中

---

## 課程重點
### 圖片的操作
操作圖片的流程
* 將圖片上傳至 OpenProcessing 的 Files 裡面，記得要先儲存創作才能上傳素材喔

### 圖片的操作

* image：將圖片內容繪製出來 image(fishImg,0,0,sizeW*1.5,sizeW)
* imageMode(CENTER) 圖片繪製位置，像是 rectMode() 一樣，設定是由正中間作為繪製的座標或是左上角。

### 物件導向操作圖片

---

### 操作圖片像素
* 取得圖片在特定位置的顏色

let moonImg = loadImg('moon.jpg')
let clr = moonImg.get(mouseX, mouseY)
fill(clr)

* 取得像素的注意事項
* 間格固定像素取值就好，如果每個像素都取值的話造成運算過多，電腦跑不動的問題 😖

* 疊加材質
* noise texture
* blendMode(MULTIPY)

push()
    blendMode(MULTIPY)
    image(moiseImg,0,0,width,height)
pop()

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

function preload(){
    sound1 = loadSound("castanets__025_mezzo-forte_struck-singly.mp3")
    sound2 = loadSound("Thai-gong__long_forte_damped.mp3")
    sound3 = loadSound("washboard__025_forte_scraped.mp3")
    noiseTexture=loadImage("noise.jpg")
}

* sound.play()：播放聲音檔
* 結合 easing function
* 參考 easing.net

//gongTs 是觸發聲音時的 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)

---

## 範例練習

### [讀取圖片繪製魚群與水母](https://openprocessing.org/sketch/906781)


### [結合物件導向與圖片操作](https://openprocessing.org/sketch/906787)


### [圖片的像素操作與重新繪製](https://openprocessing.org/sketch/906798)

### [聲音的使用與使用者互動播放](https://openprocessing.org/sketch/906080)


## 內容回顧

---

### 小技巧與心法

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

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()
- 使用圖片
- loadImage
- createImage
- blendMode

https://www.openprocessing.org/sketch/906781

 https://www.openprocessing.org/sketch/906787
- 圖片的操作
- 使用畫布操作調整影像繪製
- copy()
- https://twitter.com/kevinvennitti/status/1252885801068900352
- filter()
- get()
- set()
- loadPixel() / updatePixel()
- 免費圖庫：https://unsplash.com/

https://www.openprocessing.org/sketch/906798

- 使用音訊

https://www.openprocessing.org/sketch/906080
- loadAudio
- p5.SoundFile
- 樂器 sample https://philharmonia.co.uk/resources/sound-samples/
- freesound
- https://freesound.org
- 使用影片(基礎)
- createVideo
-https://p5js.org/reference/#/p5/createVideo

let vid;
function setup() {
  //noCanvas();

  vid = createVideo(
    ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm'],
    vidLoad
  );
  vid.hide()
  vid.size(100, 100);
}

function draw(){
    scale(0.2)
  image(vid,random(width),random(height))
}

// This function is called when the video loads
function vidLoad() {
  vid.loop();
  vid.volume(0);
}

- 課後練習
- 練習製作拼貼遊戲世界
- 解構圖片做成抽象畫
- 結合音效、圖片跟影片做自製樂器

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