---
tags: 程式設計,期末作業,學生版,Creative Coding
---

# 410738032詹雅媛
# 程式設計（二）期末作業

作業連結
[https://openprocessing.org/sketch/1598237](https://openprocessing.org/sketch/1598237)
影片連結
[https://drive.google.com/file/d/1tAkjjBOZSH6wqBioSbw9ZUtjZb-5Tr4y/view?usp=sharing](https://drive.google.com/file/d/1tAkjjBOZSH6wqBioSbw9ZUtjZb-5Tr4y/view?usp=sharing)

---
**程式碼說明**

宣告各項數值及代稱

var colors = "264653-2a9d8f-e9c46a-f4a261-e76f51".split("-").map(a=>"#"+a)
var colors2= "d8f3dc-b7e4c7-95d5b2-74c69d-52b788-40916c-2d6a4f-1b4332-081c15".split("-").map(a=>"#"+a)
var capture
var sliderElement1
var cacheGraphics
var colorPicker
var bk,ay
var mode=1
var i=0

用class製作物件

class Ball{  //定義物件 大量快速建立同類型的物件
	constructor(args){ //   參數預設值(工廠)
		this.r= args.r || 30 //random(200)  //  ||符號主要設定優先使用args.r，如果沒有傳args.r參數，採用下一個值
		this.p= args.p 
		this.v=args.v
		this.a = args.a || {x:0,y:0.01}
		this.color = args.color || colors
		this.colors = args.colors || colors2
	}	
draw() {
	push()
	translate(this.p.x,this.p.y); //讓圓心在視窗的中心點	 
	fill(this.color)
	ellipse(0, 0, 50);		//目前此圓，仍以圓心為座標點
	ellipseMode(CORNER)// 設定以左上角為座標點上的座標
	fill(this.colors)
	pop()
}
}
var ball
var balls=[]  //宣告一個陣列

視窗顯示及滑桿

function setup() {
	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();
	sliderElement1 = createSlider(10,80,10,0.01)  //creatSlider(最小值,最大值,預設值,刻度間距)
	sliderElement1.position(850,400)	
	mic = new p5.AudioIn() 
	mic.start()
}
function setGravity(){
	ay = sliderElement.value()
}

文字顯示及按鍵指令顯示的畫面特效

function draw() {
	background(0);
	textSize(20)
	textStyle(BOLD)
	fill("#ffb703")
	text("410738032詹雅媛",850,120)
	fill("#fb8b24")
	text("按1顯示圓點",850,180)
	text("按2顯示旋轉方塊",850,220)
	text("按3顯示文字",850,260)
	text("按4顯示元件，聲音大小聲會變化",850,300)
	text("按5顯示原畫面",850,340)
	text("圖像大小",850,380)

	balls=[]
cacheGraphics.image(capture, 0,0)

let sliderValue1 = sliderElement1.value()//取得sliderElement的值
	
noStroke();
if(mode<5){
var span = sliderValue1
	for(var x=0;x<cacheGraphics.width;x=x+span){
		for(var y=0;y<cacheGraphics.height;y=y+span){
			var pixel=cacheGraphics.get(x,y)
		bk = (pixel[0] + pixel[1] + pixel[2]+ pixel[3])/4 //RGB 的平均值

用mode區分不同特效

if(mode=="1"){
		fill("#ffbe0b")//都變成白色
		ellipse(x+100,y+100,span*map(bk,0,255,0,1))
		}
		if(mode=="2")
		{
			fill(pixel);
			push()
			colorMode(HSB)
			fill(pixel[0],pixel[1],pixel[2])//色相，明亮，飽和度
				translate(x,y)
				rotate(pixel[0]/80)//會依照有顏色的像素方塊做旋轉
				rectMode(CENTER) //以方塊中間做旋轉
				rect(0,0,span*0.3+pixel[2]/6.7); //藍色系列方塊會越大
			pop()
		}
		if(mode=="3")
		{
			let txt = "程式設計與實習二";
			let bkId=int(map(bk,0,255,9,0))
			
		  fill(pixel[0]+50,pixel[1]+50,pixel[2]+100)//可以更亮
			textSize(span)
			textStyle(BOLD)
			text(txt[bkId],x,y)
		}
		if(mode=="4")
		{
			var micLevel=mic.getLevel();
			if(micLevel>0.009){
			ball = new Ball({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=="4")
		{
			for(let ball of balls){
			ball.draw()	 //繪製		
	}
		}
}
	else
	{	
		image(capture,0, 0)
	}
	if(mode=="5"){	
		image(capture,0, 0)
	}
}

按鍵指令切換

function keyPressed(){
	if(key=="1"){
		mode=1
	}
	else if(key=="2"){
		mode=2
	}
	else if(key=="3"){
		mode=3
	}
	else if(key=="4"){
		mode=4
	}
	else if(key=="5") {
		mode=5
	}
}

---
畫面最初的顯示是圓點

按1顯示圓點


按2顯示旋轉方塊


按3顯示文字


按4顯示元件，聲音大小聲會變化


按5顯示原畫面

---

完整程式碼

var colors = "264653-2a9d8f-e9c46a-f4a261-e76f51".split("-").map(a=>"#"+a)
var colors2= "d8f3dc-b7e4c7-95d5b2-74c69d-52b788-40916c-2d6a4f-1b4332-081c15".split("-").map(a=>"#"+a)
var capture
var sliderElement1
var cacheGraphics
var colorPicker
var bk,ay
var mode=1
var i=0

class Ball{
	constructor(args){ //   參數預設值(工廠)
		this.r= args.r || 30 //random(200)  //  ||符號主要設定優先使用args.r，如果沒有傳args.r參數，採用下一個值
		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)
		this.colors = args.colors || random(colors2)
	}	
	
draw() {
	push()
	translate(this.p.x,this.p.y); //讓圓心在視窗的中心點	 
	fill(this.color)
	ellipse(0, 0, 50);		//目前此圓，仍以圓心為座標點
	ellipseMode(CORNER)// 設定以左上角為座標點上的座標
	fill(this.colors)
	for(i=1;i<17;i++){
		rotate(PI/8) //180度產生八片，360度產生16片
		ellipse(3,-2, 10, 3);  // 設定以左上角為座標點，做一個花瓣
	}
	pop()
}
}

var ball
var balls=[]  //宣告一個陣列
function setup() {
	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();
	
	sliderElement1 = createSlider(10,80,10,0.01)  //creatSlider(最小值,最大值,預設值,刻度間距)
	sliderElement1.position(850,400)	
	
	mic = new p5.AudioIn() 
	mic.start()
}
function setGravity(){
	ay = sliderElement.value()
}
function draw() {
	background(0);
	textSize(20)
	textStyle(BOLD)
	fill("#ffb703")
	text("410738032詹雅媛",850,120)
	fill("#fb8b24")
	text("按1顯示圓點",850,180)
	text("按2顯示旋轉方塊",850,220)
	text("按3顯示文字",850,260)
	text("按4顯示元件，聲音大小聲會變化",850,300)
	text("按5顯示原畫面",850,340)
	text("圖像大小",850,380)

	balls=[]
cacheGraphics.image(capture, 0,0)

let sliderValue1 = sliderElement1.value()//取得sliderElement的值
	
noStroke();
if(mode<5){
var span = sliderValue1
	for(var x=0;x<cacheGraphics.width;x=x+span){
		for(var y=0;y<cacheGraphics.height;y=y+span){
			var pixel=cacheGraphics.get(x,y)
		bk = (pixel[0] + pixel[1] + pixel[2]+ pixel[3])/4 //RGB 的平均值

		if(mode=="1"){
		fill("#ffbe0b")//都變成白色
		ellipse(x+100,y+100,span*map(bk,0,255,0,1))
		}
		if(mode=="2")
		{
			fill(pixel);
			push()
			colorMode(HSB)
			fill(pixel[0],pixel[1],pixel[2])//色相，明亮，飽和度
				translate(x,y)
				rotate(pixel[0]/80)//會依照有顏色的像素方塊做旋轉
				rectMode(CENTER) //以方塊中間做旋轉
				rect(0,0,span*0.3+pixel[2]/6.7); //藍色系列方塊會越大
			pop()
		}
		if(mode=="3")
		{
			let txt = "程式設計與實習二";
			let bkId=int(map(bk,0,255,9,0))
			
		  fill(pixel[0]+50,pixel[1]+50,pixel[2]+100)//可以更亮
			textSize(span)
			textStyle(BOLD)
			text(txt[bkId],x,y)
		}
		if(mode=="4")
		{
			var micLevel=mic.getLevel();
			if(micLevel>0.009){
			ball = new Ball({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=="4")
		{
			for(let ball of balls){
			ball.draw()	 //繪製	
	}
		}
}
	else
	{	
		image(capture,0, 0)
	}
	if(mode=="5"){	
		image(capture,0, 0)
	}
}

function keyPressed(){
	if(key=="1"){
		mode=1
	}
	else if(key=="2"){
		mode=2
	}
	else if(key=="3"){
		mode=3
	}
	else if(key=="4"){
		mode=4
	}
	else if(key=="5") {
		mode=5
	}
}