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

# 第一個作業

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

{%youtube PF_IdMQiBgM %}

---

啟動你的程式碼

## 步驟一


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

function draw() {
  stroke(255)
  noFill()
  ellipse(x,y,r_b)  //畫一個圓
  
}

function draw() {
  createCanvas(windowWidth,windowHeight);
  background("#70d6ff");
  rectMode(CENTER)  //設定方框中心點為方框座標點
  noFill()
  
  stroke("#f72585")
  strokeWeight(2)
  ellipse(50,50,100)  //圓心為100/2，畫方框，設定框線與線條粗細
  
  }

---

## 步驟二


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

function draw() {
  stroke(255)
  noFill()
  rectMode(CENTER)  //設定方框中心
  ellipse(x,y,r_b)  //畫一個圓
  rect(x,y,w)  //畫一個方框

}

function draw() {
  createCanvas(windowWidth,windowHeight);
  background("#70d6ff");
  rectMode(CENTER)  //設定方框中心點為方框座標點
  noFill()
  
  stroke("#f72585")
  strokeWeight(2)
  ellipse(50,50,100)  //圓心為100/2，畫方框，設定框線與線條粗細
  stroke("#e9ff70")
  strokeWeight(2)
  rect(50,50,100)  //方框以左上為座標點
  
}

---

## 步驟三


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

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)
  x = x+ w + 5  //把下一個要畫的方框，加上方框的寬度與方框間的距離
  

}

function draw() {
  createCanvas(windowWidth,windowHeight);
  background("#70d6ff");
  rectMode(CENTER)  //設定方框中心點為方框座標點
  noFill()
  stroke("#e9ff70")
  strokeWeight(2)
  rect(50,50,100)  //方框以左上為座標點
  stroke("#f72585")
  strokeWeight(2)
  ellipse(50,50,100)  //圓心為100/2，畫方框，設定框線與線條粗細
  stroke(255,0,0)
  strokeWeight(2)
  ellipse(100,100,50)
  
}

---

## 步驟四


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

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)
  x = x+ w + 5  //把下一個要畫的方框，加上方框的寬度與方框間的距離
}

var w = 100 
function draw() {
  createCanvas(windowWidth,windowHeight);
  background("#70d6ff");
  rectMode(CENTER)  //設定方框中心點為方框座標點
  noFill()
   //for(var y=50;y<=height+50;y=y+h){
    for(var x=50;x<=width+50;x=x+w){
      stroke("#f72585")
      strokeWeight(2)
      ellipse(x,50,w)  //圓心為100/2，畫方框，設定框線與線條粗細
      stroke("#e9ff70")
      strokeWeight(2)
      rect(x,50,w)  //方框以左上為座標點
      stroke(255,0,0)
      strokeWeight(2)  
      ellipse(x+50,100,50)
  
}
}

---

## 步驟五


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

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)
  x = x+ w + 5  //把下一個要畫的方框，加上方框的寬度與方框間的距離
  if(x>width){  //當x軸的值(x)已經超過視窗寬度(width)
  x = 0  //讓x軸回到最左邊(0)
  y = y + w + 5 //y軸的值要加上方框的高(h)與框間距離(w)

  }

}

var w = 100 
function draw() {
  createCanvas(windowWidth,windowHeight);
  background("#70d6ff");
  rectMode(CENTER)  //設定方框中心點為方框座標點
  noFill()
   //for(var y=50;y<=height+50;y=y+h){
    for(var x=50;x<=width+50;x=x+w){
      stroke("#f72585")
      strokeWeight(2)
      ellipse(x,50,w)  //圓心為100/2，畫方框，設定框線與線條粗細
      stroke("#e9ff70")
      strokeWeight(2)
      rect(x,50,w)  //方框以左上為座標點
      stroke(255,0,0)
      strokeWeight(2)  
      ellipse(x+50,100,50)
  
}
}

---

## 步驟六


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

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)
  x = x+ w + 5  //把下一個要畫的方框，加上方框的寬度與方框間的距離
  if(x>width){  //當x軸的值(x)已經超過視窗寬度(width)
  x = 0  //讓x軸回到最左邊(0)
  y = y + w + 5 //y軸的值要加上方框的高(h)與框間距離(w)

  }

}

---

## 步驟七


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

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)
  x = x+ w + 5  //把下一個要畫的方框，加上方框的寬度與方框間的距離
  if(x>width){  //當x軸的值(x)已經超過視窗寬度(width)
  x = 0  //讓x軸回到最左邊(0)
  y = y + w + 5 //y軸的值要加上方框的高(h)與框間距離(w)

  }

}

---

## 步驟八


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

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)
  x = x+ w + 5  //把下一個要畫的方框，加上方框的寬度與方框間的距離
  if(x>width){  //當x軸的值(x)已經超過視窗寬度(width)
  x = 25  //讓x軸回到最左邊(0)
  y = y + w + 5 //y軸的值要加上方框的高(h)與框間距離(w)

  }

}

var w = 100 
var h = 100
function draw() {
  createCanvas(windowWidth,windowHeight);
  background("#70d6ff");
  rectMode(CENTER)  //設定方框中心點為方框座標點
  noFill()
  for(var y=50;y<=height+50;y=y+h){
    for(var x=50;x<=width+50;x=x+w){
    stroke("#f72585")
    strokeWeight(2)
    ellipse(x,y,w)  //圓心為100/2，畫方框，設定框線與線條粗細
    stroke("#e9ff70")
    strokeWeight(2)
    rect(x,y,w)  //方框以左上為座標點
    stroke(255,0,0)
    strokeWeight(2)  
    ellipse(x+50,y+50,w/2)
  }
    }
}

---



//https://youtu.be/PF_IdMQiBgM

var sound1
function preload(){
  sound1 = loadSound("mixkit-cat-walk-371.mp3") //先把音樂檔載入到sound1程式碼中
}

function setup() {
  createCanvas(windowWidth,windowHeight);
  background("#70d6ff")
  analyzer = new p5.Amplitude();
  analyzer.setInput(sound1)
}
var w = 100 
var h = 100
var fc,fc1
function draw() {
  background("#70d6ff");
  rectMode(CENTER)  //設定方框中心點為方框座標點
  noFill()
  textSize(50)
  text("412730706羅小璇",width-500,height-50)
  if(sound1.isPlaying())
  {  //音樂有撥放
  fc = map(analyzer.getLevel(),0,1,0,100)
  fc1 = map(analyzer.getLevel(),0,1,0,100)
}
else{  //音樂沒撥放
fc = map(mouseX,0,width,0,100)
fc1 = map(mouseY,0,width,0,100)
}
  for(var y=50;y<=height+50;y=y+h){
  for(var x=50;x<=width+50;x=x+w){
  stroke("#f72585")
  strokeWeight(2)
  ellipse(x,y,w+fc)  //圓心為100/2，畫方框，設定框線與線條粗細
  stroke("#e9ff70")
  strokeWeight(2)
  rect(x,y,w+fc)  //方框以左上為座標點
  stroke(255,0,0)
  strokeWeight(2)  
  ellipse(x+50,y,w+fc)
}
  }
}

function mousePressed(){
  if(sound1.isPlaying()){
    sound1.stop();
  }else{
    sound1.play();
  }

}