---
tags: 程式設計,第一個作業,教師版,互動藝術程式創作入門,Creative Coding
---

# 第一個作業

[演算法影片說明](https://youtu.be/PF_IdMQiBgM)

{%youtube PF_IdMQiBgM %}

---

啟動你的程式碼

## 步驟一
![Uploading file..._jgd2k30kq]()



function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0)
}
var x =25 ; //宣告一個畫方框的 x軸變數(var宣告變數為一個全域變數)
var y =25; //宣告一個畫方框的 y軸變數
var r_b=50; 
var w=50  //宣告一個畫方框的 寬度 變數
var r_s=20; //宣告一個畫方框的 高度 變數


function draw() {
  stroke(225);
  noFill() //不充滿顏色
  rectMode(CENTER) //設定方框中心
  ellipse(x,y,r_b)
}

---

## 步驟二



 function setup() {
  createCanvas(windowWidth, windowHeight);
   background(0)
 }
var x =25 ; //宣告一個畫方框的 x軸變數(var宣告變數為一個全域變數)
var y =25; //宣告一個畫方框的 y軸變數
var r_b=50; 
var w=50  //宣告一個畫方框的 寬度 變數
var r_s=20; //宣告一個畫方框的 高度 變數


 function draw() {
  stroke(225);
  noFill() //不充滿顏色
  rectMode(CENTER) //設定方框中心
  ellipse(x,y,r_b)
 rect(x,y,w)

 }

---

## 步驟三



 function setup() {
  createCanvas(windowWidth, windowHeight);
   background(0)
 }
var x =25 ; //宣告一個畫方框的 x軸變數(var宣告變數為一個全域變數)
var y =25; //宣告一個畫方框的 y軸變數
var r_b=50; 
var w=50  //宣告一個畫方框的 寬度 變數
var r_s=20; //宣告一個畫方框的 高度 變數


 function draw() {
  stroke(225);
  noFill() //不充滿顏色
  rectMode(CENTER) //設定方框中心
  ellipse(x,y,r_b)
 rect(x,y,w)

 }

function draw(){
  stroke(255)//不充滿顏色
  noFill()//不充滿顏色
  rectMode(CENTER)//設定方框中心 
  ellipse(x,y,r_b)
  rect(x,y,w)
  ellipse(x+w/2,y+w/2,r_s)
}

---

## 步驟四



 function setup() {
  createCanvas(windowWidth, windowHeight);
   background(0)
 }
var x =25 ; //宣告一個畫方框的 x軸變數(var宣告變數為一個全域變數)
var y =25; //宣告一個畫方框的 y軸變數
var r_b=50; 
var w=50  //宣告一個畫方框的 寬度 變數
var r_s=20; //宣告一個畫方框的 高度 變數


 function draw() {
  stroke(225);
  noFill() //不充滿顏色
  rectMode(CENTER) //設定方框中心
  ellipse(x,y,r_b)
 rect(x,y,w)

 }

function draw(){
  stroke(255)//不充滿顏色
  noFill()//不充滿顏色
  rectMode(CENTER)//設定方框中心 
  ellipse(x,y,r_b)
  rect(x,y,w)
  ellipse(x+w/2,y+w/2,r_s)

  ellipse(75,25,r_b)
  rect(75,25,r_b)
  ellipse(75+w/2,25+w/2,r_s)

}

---

## 步驟五



 function setup() {
  createCanvas(windowWidth, windowHeight);
   background(0)
 }
var x =25 ; //宣告一個畫方框的 x軸變數(var宣告變數為一個全域變數)
var y =25; //宣告一個畫方框的 y軸變數
var r_b=50; 
var w=50  //宣告一個畫方框的 寬度 變數
var r_s=20; //宣告一個畫方框的 高度 變數


 function draw() {
  for(var r=25 ; x<width;x=x+2*r){
  stroke(225);
  noFill() //不充滿顏色
  rectMode(CENTER) //設定方框中心
  ellipse(x,y,r_b)
 rect(x,y,w)
 ellipse(x+w/2,y+w/2,r_s)
  }
 }

function draw(){
  stroke(255)//不充滿顏色
  noFill()//不充滿顏色
  rectMode(CENTER)//設定方框中心 
  ellipse(x,y,r_b)
  rect(x,y,w)
  ellipse(x+w/2,y+w/2,r_s)

  ellipse(75,25,r_b)
  rect(75,25,r_b)
  ellipse(75+w/2,25+w/2,r_s)

}

---

## 步驟六



 function setup() {
  createCanvas(windowWidth, windowHeight);
   background(0)
 }
var x =25 ; //宣告一個畫方框的 x軸變數(var宣告變數為一個全域變數)
var y =25; //宣告一個畫方框的 y軸變數
var r_b=50; 
var w=50  //宣告一個畫方框的 寬度 變數
var r_s=20; //宣告一個畫方框的 高度 變數


 function draw() {
  for(var r=25 ; x<width;x=x+2*r){
  stroke(225);
  noFill() //不充滿顏色
  rectMode(CENTER) //設定方框中心
  ellipse(x,y,r_b)
 rect(x,y,w)
 ellipse(x+w/2,y+w/2,r_s)
  }
 }

---

## 步驟七


---

## 步驟八


---


//https://youtu.be/PF_IdMQiBgM

---

# 自行設計畫面


var sound1
function preload(){
  sound1 = loadSound("27522873_MotionElements_travel-inspiring-upbeat_preview.mp3") //先把音樂檔載入到sound1程式碼中
}
function setup() {
  createCanvas(windowWidth, windowHeight);
  background("#faf3dd")
  analyzer = new p5.Amplitude();
  analyzer.setInput(sound1)
}

var w=150
var s_w =100
var fc ,fc1

function draw() {
  background("#FFF4C1");
  rectMode(CENTER) //設定方框中心點為方框的座標點
  noFill()

  
  if(sound1.isPlaying()) 
{//音樂有播放時
  fc = map(analyzer.getLevel(),0,1,0,100)
  fc1 = map(analyzer.getLevel(),0,1,0,200)
}
else
 { //音樂沒有播放
   fc =  map(mouseX,0,width,0,100)
   fc1 =  map(mouseY,0,width,0,200)
 }

  for(var y=50;y<=height+w/2;y=y+w){ 
  for(var x=50;x<=width+w/2;x=x+w){
  //畫圓，設定框線顏色與線條粗細
  stroke("#842B00")
 strokeWeight(10)
 ellipse(x,y,w+fc)
 //畫方框，設定框線顏色與線條粗細
 stroke("#AE0000")
 strokeWeight(2)
 rect(x,50,w+fc1) //此行也需要修改
 //-----------------------
 //畫小圓，設定框線顏色與線條粗細
 stroke("#ffa69e")
 strokeWeight(2)
 ellipse(x+50,y+100,s_w+fc) //此行也需要修改
 }
}
}


//按下滑鼠播放音樂
function mousePressed(){
  if(sound1.isPlaying()){
    sound1.stop();
  }else{
    sound1.play();
  }
}