---
# System prepended metadata

title: 程設期末

---

# 程設期末
## 407730372陳紫婕

定義變數
```
var video;
var slideValue = 30; 
var mode = 1;
var stepSizeMode = 1;
var topMargin = 30;
var mic;
```

攝影機圓點模式
設定位置、大小參數
製造一個class後產生白色圓點
![](https://i.imgur.com/zMzj2zI.png)

```
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)
  }
```
}
小正方形
![](https://i.imgur.com/Knmpa9S.png)

創建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)
```


畫面上說明文字![](https://i.imgur.com/6blCkC1.png)

  ```
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)
```
  
  畫面顯示紅色學號姓名![](https://i.imgur.com/tDvRzGz.png)

```
  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
  }
}