---
# System prepended metadata

title: 期末報告410730872

---

# 期末報告410730872
```javascript=

410730872
by 王宣閔
  

 
var capture
var cacheGraphics
var bk,ay
var mode=1
var colors = "f1c0e8-cfbaf0-a3c4f3-90dbf4-8eecf5".split("-").map(a=>"#"+a)
class Ball_1{
  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
    // ball.p.x=ball.p.x+ball.v.x
    // ball.p.y+=ball.v.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
  }
}
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)
  } 
  
  draw(){  //  繪製函數
    push()
      translate(this.p.x, this.p.y)
      fill(this.color)
      ellipse(0, 0 , this.r);
      ellipse(-this.r/2, -this.r/2 , this.r/2);
      ellipse(this.r/2, -this.r/2 , this.r/2);
      fill("#ffff00")
      ellipse(this.r/4, -this.r/4 , this.r/8);
      ellipse(-this.r/4, -this.r/4 , this.r/8);
      fill(255)
      // arc(0,0,this.r/2,this.r/2,0,PI)      
      ellipse(0, 0 , this.r/2);
      fill(0)
      // arc(0,0,this.r/3,this.r/2,0,PI)
      ellipse(0, 0 , this.r/3);
      noFill()
      arc(0,this.r/15,this.r*2/3,this.r*2/3,0,PI)
    pop()
  }
  
  update(){  // 動作(移動)
    this.p.x=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 = 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);
  // createCanvas(800, 600);
  background(100);
  capture = createCapture(VIDEO)
  capture.size(640,480);//設定顯示畫面大小
  cacheGraphics = createGraphics(640,480) 
  cacheGraphics.translate(640,0) // 先往右邊移動一倍的距離
  cacheGraphics.scale(-1,1) // 翻轉畫布
  capture.hide();
  sliderElement= createSlider(30,50,30,3)//最小值，最大值，預設值，間距
  
  sliderElement.position(980,180)
  sliderElement.input(setGravity)
  mic = new p5.AudioIn() 
  mic.start()
}
function setGravity(){
  ay = sliderElement.value()
}
function draw() {
  // circle(mouseX, mouseY, 20);
  // image(capture,mouseX, mouseY)
  background(0);
  fill(255)
  textSize(20)
  textStyle(BOLD)
   
    
  右上可以打字的地方
   
  inputElement=createInput("哈囉你好嗎衷心感謝")
  inputElement.position(800,100)
  inputElement.size(200)
  inputElement.style("font-size",'15px')
  inputElement.style("border-color",'green')
  inputElement.style("border-width",'5px')
  
  
  這裡是讓畫面出現這些提示
  
  text("666666",1250,30)
  text("按下1，MODE1",800,250)
  text("按下2，MODE2",800,300)
  text("按下3，MODE3",800,350)
  text("按下4，MODE4",800,400)
  text("按下5，MODE5",800,450)
  text("410730872王宣閔",800,500)
  fill("#D9006C")
  balls=[]
cacheGraphics.image(capture, 0,0)
  
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("#D9006C")//都變成白色
​
按下1
  

    
    if(mode=="1"){
    ellipse(x+100,y+100,span*map(bk,0,255,0,1))
    }
      
 我設置了按1的按鈕會顯示紅色圈圈人像
      
 按下2
    if(mode=="2")
    {
        fill(pixel)
          push()
            colorMode(RGB);
            fill(pixel[0],69,150)
            
            translate(x,y);
            rectMode(CENTER)
            rotate(pixel[0]/100);
            rect(0,0,abs(sin(frameCount/sliderElement.value())*30));
            fill(0)
            ellipse(0,0,10)
      pop()
    }
      
按2會跑出會閃的紅色方形，方形製作方法參考老師所教，有大有小

按下3
    if(mode=="3")
    {
      let txt = "410730872王宣閔";
      let bkId=int(map(bk,0,255,9,0))
      fill(pixel)
      fill(pixel[0]+50,pixel[1]+50,pixel[2]+50)
      textSize(span)
      textStyle(BOLD)
      text(txt[bkId],x,y)
    }
按下3會跑出數字構成的人像
      
按下4
    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=="4")
    {
      for(let ball of balls){
      ball.draw()  
  
  }
    }
}
  else
  {     
    
    image(cacheGraphics,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 {
    mode=5
  }
​
}


```
