# 期末報告
### 學號:410730898
### 吳昀瑄:

### 畫圖

#### 1.用class做出圖形

先做個Balltwo

class Balltow{
	constructor(args){ //預設值(工廠)
		this.r=args.r || 20
		// this.p={x:random(width),y:random(height)}
		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)
	}
	draw(){
		
		push()
			translate(this.p.x, this.p.y)
			fill(this.color)
			noStroke()
			ellipse( 0,0, this.r);
		if(this.mode=="bad"){
			fill(255)
			arc(0,0,this.r/2,this.r/2,0,PI)
		fill(0)
			arc(0,0,this.r/3,this.r/3,0,PI)
		}
		else
		{
			fill(255)
			ellipse(0,0,this.r/2,this.r/2)
		fill(0)
			ellipse(0,0,this.r/3,this.r/3)
		}
			stroke(this.color)
			strokeWeight(4)
			
		noFill()
		for(var j=0;j<8;j++){
			beginShape()
				rotate(PI/4)
				for(var i=0;i<30;i+=5){
					vertex(this.r/2+i*2,sin(i/5+frameCount/10+this.rid)*10) 
				}
			endShape()
		}
		pop()
		}
	update(){
		this.p.x=this.p.x+this.v.x
		this.p.y+=this.v.y
		this.v.x+=this.a.x
		this.v.y+=this.a.y
		if(this.mode=="happy"){
			this.p.y+=sin(frameCount/(10+this.rid/100))*5
		}
		if(this.mode=="crazy"){			
			this.v.x+=random(-5,5)
			this.v.y+=random(-5,5)
		}
		this.v.x*=0.99
		this.v.y*=0.99
		if(this.p.y>height){
			this.v.y=-abs(this.v.y)
		}
	}
	escape(){
		this.v.x=random(-10,10)
	}
	setHappy(){
		this.mode="happy"
	}
	isBallInRange(){
		let d=dist(mouseX,mouseY,this.p.x,this.p.y)
		if(d<this.r){
			return true
		}else{
			return false
		}
	}
	setMode(mode){
		this.mode=mode
	}
}

#### 2.接著用class做出Ballone


class Ballone{
	constructor(args){  //預設值
		this.r =args.r || random(20)
		this.p = args.p || {x:width/2,y:height/2}//位置
		this.v = {x:random(-1,1),y:random(-1,1)}
		this.a = args.a || {x:0 , y:0} 
		this.color = random(colors)
	}
	draw()  //繪製
	{
		push()
			translate(this.p.x,this.p.y)		
			fill(this.color)
			rect(0,0, this.r);
			rect(-this.r/2,-this.r/2,this.r/2)
			rect(this.r/1,-this.r/2,this.r/2)
		  fill(255)
		  ellipse(30,25, this.r/2)
			fill(0)
		  ellipse(28,25, this.r/3);
		  fill(255)
			strokeWeight(10)
			line(this.r/2,3,this.r/4,0)
			
		pop()
	}
	update(){   //運作的動作
		this.p.x += this.v.x	
		this.p.y += this.v.y
		this.v.x = this.v.x + this.a.x
		this.v.y = this.v.y + this.a.y
		this.v.x*=0.999
		this.v.y=this.v.y * 0.999
		if(this.p.y>height){
			this.v.y = -abs(this.v.y)
		}
	}
}

var ball
var balls = []
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	capture = createCapture(VIDEO)
	capture.size(640,640);//設定顯示畫面大小
	cacheGraphics = createGraphics(1280,400)	
	cacheGraphics.translate(900,0) // 先往右邊移動一倍的距離
	cacheGraphics.scale(-1,1) // 翻轉畫布
	capture.hide();
}

    

### 開始設置

#### 3.定義

var capture
var cacheGraphics
var bk,ay
var mode=1
var colors = "ffd6ff-e7c6ff-c8b6ff-b8c0ff-bbd0ff".split("-").map(a=>"#"+a)


#### 4.設置畫面

var ball
var balls = []
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	capture = createCapture(VIDEO)
	capture.size(640,640);//設定顯示畫面大小
	cacheGraphics = createGraphics(1280,400)	
	cacheGraphics.translate(900,0) // 先往右邊移動一倍的距離
	cacheGraphics.scale(-1,1) // 翻轉畫布
	capture.hide();

#### 5.做一個滑竿(可以放大放小)

sliderElement= createSlider(2,100,30,1)//最小值，最大值，預設值，間距//調大小
	
	sliderElement.position(100,120)
	sliderElement.input(setGravity)

#### 6.聲音

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

#### 7.製作說明


function draw() {
	background(0);
	fill(255)
	textSize(15)
	textStyle(BOLD)
	text("圖像大小",100,100)
	text("按1.黑白點點",100,170)
	fill(255,100,200)
	text("按2.彩色方塊",100,190)
	fill(200,200,50)
	text("按3.吳昀瑄文字",100,210)
	fill(3,200,100)
	text("按4.可愛生物",100,230)
	fill(99,200,200)
	text("按5.吳昀瑄畫面",100,250)
	balls=[]
cacheGraphics.image(capture, 0,0)

#### 8.製作按鍵

noStroke();
	// scale(2)
if(mode<5){
var span=20+max(mouseX,0)/20 //上次會當機的問題，mouseX會負值，造成當機
for(var x=0 ; x<cacheGraphics.width; x+=span){
	for(var y=0;y<cacheGraphics.height; y+=span){
    var pixel = cacheGraphics.get(x,y);

		bk = (pixel[0] + pixel[1] + pixel[2])/3 //RGB 的平均值

		fill(255)
		
if(mode=="1"){
		ellipse(x+100,y+100,span*map(bk,0,255,0,1))
		}
		if(mode=="2")
		{
			fill(pixel)
					push()
						colorMode(HSB);
						fill(pixel[0],100,90)
						translate(x,y);
						rectMode(CENTER)
						rotate(pixel[0]/100);
						rect(0,0,span*0.3+pixel[0]/10);
						fill(0)
						ellipse(0,0,5)
					pop()
		}
		if(mode=="3")
		{
			let txt = "410730898吳昀瑄";
			let bkId=int(map(bk,0,200,12,0))
			fill(pixel)
			fill(pixel[0]+50,pixel[1]+50,pixel[2]+50)//可以更亮
			textSize(span)
			textStyle(BOLD)
			text(txt[bkId],x,y)
		}
		if(mode=="4")
		{
			var micLevel=mic.getLevel();
			if(micLevel>0.009){
			ball = new Ballone({p:{x:x,y:y},r:ay,color: color(pixel[0],pixel[1],pixel[2]) }) //產生一個新的物件
			}
			else
			{
			ball = new Balltow({p:{x:x,y:y},r:ay,color: color(pixel[0],pixel[1],pixel[2]) }) //產生一個新的物件
			}
				balls.push(ball)
		}
	}
	}
	
	if(mode=="4")
		{
			for(let ball of balls){
			ball.draw()	 //繪製		
	}
		}
}
	else
	{	
		image(cacheGraphics,0, 0)
	}
}
  
  function keyPressed(){
 if(key=="1"){
  mode=1
 }
 if(key=="2"){
  mode=2
 }
 if(key=="3"){
  mode=3
 }
	 else if(key=="4"){
		mode=4
	}
	else {
		mode=5
 }
	}

### 成品

#### 9.最後成品展示

按1


按2


按3


按4


感應聲音後


# 謝謝老師~