# 2022-6-14-期末呈現作品
## 410730013 許軒豪

[](https://https://openprocessing.org/sketch/1592367)

### 導入攝影機
---

createCanvas(windowWidth,windowHeight);
background(0);
capture = createCapture(VIDEO)
capture.size(640,480);//設定顯示畫面大小
cacheGraphics =createGraphics(640,480);
cacheGraphics.translate(640,0) // 先往右邊移動一倍的距離
cacheGraphics.scale(-1,1) // 翻轉畫布
capture.hide()

### 抓取 Camera 供 Mode 做使用
---

cacheGraphics.image(capture, 0,0)
for(var x=0;x<cacheGraphics.width;x=x+span){
for(var y=0;y<cacheGraphics.height;y+=span){
var pixel=cacheGraphics.get(x,y); 

### 設定按鍵 1 的畫面(顏色變化元件)
---

if(mode=="1"){
bk=(pixel[0]+ pixel[1]+pixel[2])/3		
fill(colorPicker.value());		
ellipse(x,y,span*map(bk,0,255,0,1));
}

### 設定按鍵 2 的畫面(圈圈變化元件)

---

if(mode=="2"){
fill(pixel)
push()
	 colorMode(HSB);
	 fill(pixel[0],40,100)
         translate(x,y);
	 rectMode(CENTER)
	 rotate(pixel[0]/100);
	 rect(0,0,abs(sin(frameCount/sliderElement.value())*30));
	 fill(0)
	 ellipse(0,0,5)
pop()
}

### 設定按鍵 3 的畫面(文字元件)

---

if(mode=="3"){
fill(pixel[0],40,100)
textSize(span)
bk=(pixel[0]+ pixel[1]+pixel[2])/3
bkId = int(map(bk, 0, 255, 28, 0))
text(density[bkId],x,y)
}

### 設定按鍵 4 的畫面(聲音變化)

---
▲　抱歉聲音這邊我真的不行，我只好用之前的

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

var micLevel = mic.getLevel()
	fill(255)
	text(micLevel,50,50)
	r = lerp(r, micLevel*500,0.02)
	if(micLevel>0.1){
	fill(255,0,0)
	}

		push()
			translate(width/2,height/2)
			noFill()
			strokeWeight(5)
			for (var i =0;i<20;i++){

				var clr = colors[i%colors.length]
				stroke(clr)
				rotate(r*PI/1000)//數字影響效果
				arc(0,0,i*r,i*r,0,PI)
	}
	pop()
	
	push()
		blendMode(MULTIPLY)
		image(noiseTexture,0,0,width,height)
	pop()
}

### 設定按鍵 5 的畫面

---

if(mode=="5"){
image(capture,0, 0)
}	

### 加入UI

---
各種 Mode 會用到的工具：

       //mode的滑桿
	sliderElement= createSlider(5,300,25,0.01)
	sliderElement.position(800,50)
	
	//輸入
	inputElement=createInput("")
	inputElement.position(800,100)
	inputElement.size(200)
	inputElement.style("font-size",'15px')
	inputElement.style("border-color",'white')
	inputElement.style("border-width",'6px')

        //mode選顏色
	colorPicker = createColorPicker("#00DB00");
        colorPicker.position(800,150);      
	colorPicker.style("border-color",'yellow')
	colorPicker.style("border-width",'5px')
	colorPicker.style("color",'green')
	colorPicker.style("font-size",'20px')

更換頁面的按鈕：

function changebutton() {
	mode=mode+1
	if(mode>5){
		mode=1
	}
}
function setGravity(){
	ay = sliderElement.value()
}

頁面上的文字說明：

        fill(255,255,0)
	textSize(20)
	textStyle(BOLD)	
	text("變更模式",1020,175)	
	
	fill(255)
	textSize(17)
	
	text("410730013 許軒豪",1250,30)
	text("請點選數字鍵切換模式：",800,210)
	text("（1）選顏色+音效1",800,250)
	text("（2）滑桿控制閃爍頻率+音效2",800,300)
	text("（3）我站在雲林的歌詞+音效3",800,350)
	text("（4）黑底呼叫元件+音效4",800,400)
	text("（5）正常攝影機",800,450)

### 加入切換音效及按鈕映射
---
音效導入：

function preload() {
sound1 = loadSound("1.mp3");
sound2 = loadSound("2.mp3");
sound3 = loadSound("3.mp3");
sound4 = loadSound("4.mp3");		
}

按鈕映射及播放音效：

function keyPressed(){
	if(key=="1"){
		mode=1
		sound1.play()
	}
	else if(key=="2"){
		mode=2
		sound2.play()
	}
	else if(key=="3"){
		mode=3
		sound3.play()
	}
	else if(key=="4"){
		mode=4
		sound4.play()
	}
	else if(key=="5"){
		mode=5
	}
}

### 完成
---

var capture
var cacheGraphics;
var bk,ay
var mode=1;
var bkId;
const density =	'我站在雲林裡打魚頭在暈我擁有超能力用冷水打飯菜我想牽你的手而你卻玩笑帶過';
var dora
var doras = []
var colors = "6c9a8b-e8998d-eed2cc-fbf7f4-a1683a-93b5c6-ddedaa-f0cf65-d7816a-bd4f6c".split("-").map(a=>"#"+a)

class Ball_1{
	constructor(args){ 
		this.r=args.r || 20
		this.p=args.p || {x:width/2,y:height/2}
		this.v=this.v || {x:random(-2,2),y:random(-2,2)}
		this.a = args.a || {x:0,y:0}
		this.color = args.color || random(colors)
		this.mode = random(["happy","bad"])
		this.rid = random(10000)
	}
}

class Ball{
	constructor(args){ 
		this.r= args.r || 30 
		this.p= args.p || {x:random(width),y:random(height)}  
		this.v=args.v || {x:random(-1,1),y:random(-1,1)}
		this.a = args.a || {x:0,y:0.01}
		this.color = args.color || random(colors)
	}	
}
	
function preload() {
		sound1 = loadSound("1.mp3");
		sound2 = loadSound("2.mp3");
		sound3 = loadSound("3.mp3");
		sound4 = loadSound("4.mp3");
		
	}


var ball
var balls=[]  //宣告一個陣列
function setup() {
	mic = new p5.AudioIn()
	mic.start()

	
	//滑桿
	sliderElement= createSlider(5,300,25,0.01)//最小值，最大值，預設值，間距 
	sliderElement.position(800,50)   //mode2閃爍頻率
	
	//輸入
	inputElement=createInput("")
	inputElement.position(800,100)
	inputElement.size(200)
	inputElement.style("font-size",'15px')
	inputElement.style("border-color",'white')
	inputElement.style("border-width",'6px')
	
	//選顏色
	colorPicker = createColorPicker("#00DB00");
  colorPicker.position(800,150);      
	colorPicker.style("border-color",'yellow')
	colorPicker.style("border-width",'5px')
	colorPicker.style("color",'green')
	colorPicker.style("font-size",'20px')    //mode1

	//相機
	createCanvas(windowWidth,windowHeight);
	background(0);
	capture = createCapture(VIDEO)
	capture.size(640,480);//設定顯示畫面大小
	cacheGraphics =createGraphics(640,480);
	cacheGraphics.translate(640,0) // 先往右邊移動一倍的距離
	cacheGraphics.scale(-1,1) // 翻轉畫布
	capture.hide()
}

function changebutton() {
	mode=mode+1
	if(mode>5){
		mode=1
	}
}
function setGravity(){
	ay = sliderElement.value()
}
	function draw() {	
		
		background(0);
		cacheGraphics.image(capture,0,0);
	  noStroke();
		
		var txts = inputElement.value();
	if(txts=="message_1"){
		txts="WARNING!"
	}
		if(txts=="message_2"){
		txts="WARNING!"
	}
		if(txts=="dora"){
		for(let dora of doras){ //陣列取資料的寫法
	dora.draw()
	}
	}
		
	fill(255,255,0)
	textSize(20)
	textStyle(BOLD)	
	text("變更模式",1020,175)	
	
	fill(255)
	textSize(17)
	
	text("410730013 許軒豪",1250,30)
	text("請點選數字鍵切換模式：",800,210)
	text("（1）選顏色+音效1",800,250)
	text("（2）滑桿控制閃爍頻率+音效2",800,300)
	text("（3）我站在雲林的歌詞+音效3",800,350)
	text("（4）黑底呼叫元件+音效4",800,400)
	text("（5）正常攝影機",800,450)
balls=[]
cacheGraphics.image(capture, 0,0)
	
	fill(255)
	text(txts,1100,125)

var span=20+max(mouseX,0)/20
		
	for(var x=0;x<cacheGraphics.width;x=x+span){
	for(var y=0;y<cacheGraphics.height;y+=span){
		
				var pixel=cacheGraphics.get(x,y); 
		
				if(mode=="1"){
					bk=(pixel[0]+ pixel[1]+pixel[2])/3		
					fill(colorPicker.value());		
					ellipse(x,y,span*map(bk,0,255,0,1));
				}
				if(mode=="2"){
					fill(pixel)
					push()
						colorMode(HSB);
						fill(pixel[0],40,100)
						
						translate(x,y);
						rectMode(CENTER)
						rotate(pixel[0]/100);
						rect(0,0,abs(sin(frameCount/sliderElement.value())*30));
						fill(0)
						ellipse(0,0,5)
					pop()
				}
				if(mode=="3"){
					fill(pixel[0],40,100)
					textSize(span)
					bk=(pixel[0]+ pixel[1]+pixel[2])/3
					bkId = int(map(bk, 0, 255, 28, 0))
					text(density[bkId],x,y)
				}
			if(mode=="4")
				{
			var micLevel=mic.getLevel();
			
			if(micLevel>0.009){
			ball = new Ball_1({p:{x:x,y:y},r:ay,color: color(pixel[0],pixel[1],pixel[2]) }) //產生一個新的物件
			}
			else
			{
			ball = new Ball({p:{x:x,y:y},r:ay,color: color(pixel[0],pixel[1],pixel[2]) }) //產生一個新的物件
				}
				balls.push(ball)
		}
	}
				}
			if(mode=="5"){
				image(capture,0, 0)
				}	
}


function keyPressed(){
	if(key=="1"){
		mode=1
		sound1.play()
	}
	else if(key=="2"){
		mode=2
		sound2.play()
	}
	else if(key=="3"){
		mode=3
		sound3.play()
	}
	else if(key=="4"){
		mode=4
		sound4.play()
	}
	else if(key=="5"){
		mode=5
	}
}