# 程設期末
## 407730372陳紫婕

定義變數

var video;
var slideValue = 30; 
var mode = 1;
var stepSizeMode = 1;
var topMargin = 30;
var mic;

攝影機圓點模式
設定位置、大小參數
製造一個class後產生白色圓點

class Ball {
  constructor(arg) {
    this.r = arg.r  
    this.x = arg.x
    this.y = arg.y
  }
  draw() {
    noStroke()
    fill(255)
    ellipse(this.x, this.y, this.r)
  }

}
攝影機文字模式
設定位置、大小參數
創造一個構造
轉換成值
顯示出407730372文字

class TextWord {
  constructor(arg) {
    this.x = arg.x
    this.y = arg.y
    this.bk = arg.bk
    this.size = arg.size
    this.txt = "407730372407730372"
  }
  draw() {
    this.bkId = int(map(this.bk, 0, 255, 0, 9))
    fill(this.bk, 100, 0)
    textSize(this.size)
    textStyle(BOLD)
    text(this.txt[this.bkId], this.x, this.y)
  }

}
小正方形

創建class 元件正方形，讓它旋轉
綠色正方形中間有白色圓形
利用push和pop
最後回傳值

class Rectangle {
  constructor(arg) {
    this.x = arg.x
    this.y = arg.y
    this.rotate = arg.rotate
    this.width = arg.width
  }
  draw() {
    push()
    fill('green')
    translate(this.x, this.y)
    rectMode(CENTER)
    rotate(this.rotate)
    rect(0, 0, this.width*2)
    fill('white')
    ellipse(0, 0, this.width)
    pop()
  }

}
設定畫面大小、背景顏色、攝影機大小

function setup() {
  createCanvas(640, 640+topMargin);
  background(100)
  video = createCapture(VIDEO)
  video.size(640, 480);
  video.hide();

設定拉桿範圍最小0最大100、位置
把拉桿的值取出

sliderElement = createSlider(0,100,30)
  sliderElement.position(10,0)
  sliderElement.input(setGravity)

設定麥克風

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

將拉桿值取出

function setGravity() {
  slideValue = sliderElement.value()
}

畫面上方顯示切換模式和麥克風收音大小

function draw() {
  background(0)
  // image(video, 0, 20, 640, height)
  
  fill('white')
  textSize(12)
  textStyle(NORMAL)
  text('Mode: ' + mode, 180, 15)
  text(",stepSizeMode: " + stepSizeMode, 230, 15)

  let micLevel = mic.getLevel()
  text(',Audio: ' + micLevel, 330, 15)

畫面上說明文字

fill('white')
  textSize(20)
  textStyle(BOLD)
  text("按下1： 顯示黑點", 40, 550)
  text("按下2： 顯示文字", 40, 570)
  text("按下3： 顯示旋轉方塊", 40, 590)
  text("按下4： 使用上方拉 bar 調整圖像大小", 40, 610)
  text("按下5： 使用麥克風音量調整圖像大小", 40, 630)

畫面顯示紅色學號姓名

  fill('red')
  textSize(20)
  textStyle(BOLD) 
	text("407730372陳紫婕",50,660)

設定攝影機模式
如果stepSizeMode 是1，元件大小為拉桿的值
如果stepSizeMode 是2，元件大小為麥克風值

video.loadPixels()
  
  if (stepSizeMode == 1) {
    stepSizeValue = slideValue
  }
  
  if (stepSizeMode == 2) {
    stepSizeValue = micLevel*10000
  }

利用round取整數，並限制元件值的範圍在6到32間
設定影片長寬
取出四個值設定初始不變值，設置每個像素改變
設定模式 1是圓點2是文字3是旋轉正方形

const stepSize = round(constrain(stepSizeValue / 8, 6, 32));
  
  for (let y = 0; y < video.height; y += stepSize) {
    for (let x = 0; x < video.width; x += stepSize) {
      const i = y * width + x;
      const bk = (video.pixels[0] + video.pixels[1] + video.pixels[2])/3
      const darkness = (255 - video.pixels[i * 4]) / 255;
      const radius = stepSize * darkness;
``
      
      if (mode == 1) {
        ball = new Ball({r: radius, x: x, y: y+topMargin})
        ball.draw()
      } 
      
      if (mode == 2) {
        textWord = new TextWord({
          x: x, y: y+topMargin, bk: bk, size: radius
        })
        textWord.draw()
      }
      
      if (mode == 3) {
        rectangle = new Rectangle({
          x: x, y: y+topMargin, rotate: 10, width: radius
        })
        rectangle.draw()
      }
    }
  }

}

按鍵盤切換模式

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