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

# 第一個作業

---

啟動你的程式碼

# 第一個作業

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

{%youtube PF_IdMQiBgM %}

---

啟動你的程式碼

## 步驟一


function setup() {
  createCanvas(windowWidth,windowHeight);
}
var x =25
var y =25
var r_b =50
function draw() {
  background(0);
  noFill()
  stroke(255)
  ellipse(x,y,r_b)
}

---

## 步驟二


function setup() {
  createCanvas(windowWidth,windowHeight);
}
function setup() {
  createCanvas(windowWidth,windowHeight);
}
var x =25
var y =25
var r_b =50
var w =50
function draw() {
  background(0);
  noFill()
  stroke(255)
  ellipse(x,y,r_b)
  rectMode(CENTER)
  rect(x,y,w) 
}


---

## 步驟三


function setup() {
  createCanvas(windowWidth,windowHeight);
}
var x =25
var y =25
var w =50
var r_b =50
var r_s =20
function draw() {
  background(0);
  noFill()
  stroke(255)
  ellipse(x,y,r_b)
  rectMode(CENTER)
  rect(x,y,w)
  ellipse(x+w/2,y+w/2,r_s)
}

---

## 步驟四


function setup() {
  createCanvas(windowWidth,windowHeight);
}
var x =25
var y =25
var w =50
var r_b =50
var r_s =20
function draw() {
  background(0);
  noFill()
  stroke(255)
  ellipse(x,y,r_b)
  rectMode(CENTER)
  rect(x,y,w)
  ellipse(x+w/2,y+w/2,r_s)
  ellipse(x+50,y,r_b)
  rect(x+50,y,w)
  ellipse(x+w/2+50,y+w/2,20)
}


---

## 步驟五


function setup() {
  createCanvas(windowWidth,windowHeight);
}
var x =25
var y =25
var w =50
var r_b =50
var r_s =20
function draw() {
  background(0);
  noFill()
  stroke(255)
  for (var x=25;x<=width+(w/2);x=x+w){
    ellipse(x,y,r_b)
    rectMode(CENTER)
    rect(x,y,w)
    ellipse(x+w/2,y+w/2,r_s)
  }
}


---

## 步驟六


function setup() {
  createCanvas(windowWidth,windowHeight);
}
var x =25
var y =25
var w =50
var r_b =50
var r_s =20
function draw() {
  background(0);
  noFill()
  stroke(255)
  for (var x=25;x<=width+(w/2);x=x+w){
    ellipse(x,y,r_b)
    rectMode(CENTER)
    rect(x,y,w)
    ellipse(x+w/2,y+w/2,r_s)
  }
  ellipse(x,y+50,r_b)
  rectMode(CENTER)
  rect(x,y+50,w)
  ellipse(x+w/2,y+w/2+50,r_s)
}


---

## 步驟七


function setup() {
  createCanvas(windowWidth,windowHeight);
}
var x =25
var y =25
var w =50
var r_b =50
var r_s =20
function draw() {
  background(0);
  noFill()
  stroke(255)
  for (var y=25;y<=100;y=y+w)
  for (var x=25;x<=width+(w/2);x=x+w){
    ellipse(x,y,r_b)
    rectMode(CENTER)
    rect(x,y,w)
    ellipse(x+w/2,y+w/2,r_s)
  }
}


---

## 步驟八


function setup() {
  createCanvas(windowWidth,windowHeight);
  background (0);
}
var x=25;
var y=25;
var r_b=50;
var w=50;
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
  if (x>width){
    x=0
    y=y+w
  }
}

function setup() {
  createCanvas(windowWidth,windowHeight);
}
var x =25
var y =25
var w =50
var r_b =50
var r_s =20
function draw() {
  background(0);
  noFill()
  stroke(255)
  for (var y=25;y<=height+(w/2);y=y+w){
    for (var x=25;x<=width+(w/2);x=x+w){
      ellipse(x,y,r_b)
      rectMode(CENTER)
      rect(x,y,w)
      ellipse(x+w/2,y+w/2,r_s)
    }
  } 
}


---


//https://youtu.be/PF_IdMQiBgM
function setup() {
  createCanvas(windowWidth,windowHeight);
}
var x =25
var y =25
var w =50
var r_b =50
var r_s =20
function draw() {
  background(0);
  noFill()
  stroke(255)
  for (var y=25;y<=height+(w/2);y=y+w){
    for (var x=25;x<=width+(w/2);x=x+w){
      stroke("#9d0208")
      ellipse(x,y,w+mouseX/30)
      rectMode(CENTER)
      stroke("#ffd60a")
      rect(x,y,w+mouseX/30)
      stroke("#003566")
      ellipse(x+w/2,y+w/2,w+mouseX/30)
    }
  } 
}


---

# 自行設計畫面
第一個作業.md
目前顯示的是「第一個作業.md」。

## 步驟一 畫一個圓

function setup() {
  createCanvas(windowWidth,windowHeight);
  background("#edf2f4")
}

function draw() {
  background("#edf2f4");
  noFill()
  stroke("#2b2d42")
  ellipse(50,50,100)
}

---

## 步驟二 再畫一個圓，讓他在第一個圓內


function setup() {
  createCanvas(windowWidth,windowHeight);
  background("#edf2f4")
}

function draw() {
  background("#edf2f4");
  noFill()
  stroke("#2b2d42")
  ellipse(50,50,100)
  ellipse(50,50,50)
}

---

## 步驟三 畫一個正方形，包括在第二個圓外


function setup() {
  createCanvas(windowWidth,windowHeight);
  background("#edf2f4")
}

function draw() {
  background("#edf2f4");
  rectMode(CENTER) //讓方框的座標以方框中心為主
  noFill()
  stroke("#2b2d42")
  ellipse(50,50,100)
  ellipse(50,50,50)
  rect(50,50,50)
}

---

## 步驟四 在右下角畫一個方框


function setup() {
  createCanvas(windowWidth,windowHeight);
  background("#edf2f4")
}

function draw() {
  background("#edf2f4");
  rectMode(CENTER) //讓方框的座標以方框中心為主
  noFill()
  stroke("#2b2d42")
  ellipse(50,50,100)
  ellipse(50,50,50)
  rect(50,50,50)
  rect(90,90,30)
}

---

## 步驟五 讓圖形充滿整排


function setup() {
  createCanvas(windowWidth,windowHeight);
  background("#edf2f4")
}
var w=100;
function draw() {
  background("#edf2f4");
  rectMode(CENTER) //讓方框的座標以方框中心為主
  noFill()
  stroke("#2b2d42")
  for(var x=50;x<=width+(w/2);x=x+w){
  ellipse(x,50,100)
  ellipse(x,50,50)
  rect(x,50,50)
  rect(x+40,90,30)
  }
}

---

## 步驟六 讓圖形充滿整個頁面


function setup() {
  createCanvas(windowWidth,windowHeight);
  background("#edf2f4")
}
var w=100;
function draw() {
  background("#edf2f4");
  rectMode(CENTER) //讓方框的座標以方框中心為主
  noFill()
  stroke("#2b2d42")
 for(var y=50;y<=height+50;y=y+w){
  for(var x=50;x<=width+(w/2);x=x+w){
  ellipse(x,y,100)
  ellipse(x,y,50)
  rect(x,y,50)
  rect(x+40,y+40,30)
  }
  }
}

---
## 步驟七 讓圖形跟著滑鼠變大縮小

function setup() {
  createCanvas(windowWidth,windowHeight);
  background("#edf2f4")
}
var w=100;
function draw() {
  background("#edf2f4");
  rectMode(CENTER) //讓方框的座標以方框中心為主
  noFill()
  stroke("#2b2d42")
 for(var y=50;y<=height+50;y=y+w){
  for(var x=50;x<=width+(w/2);x=x+w){
  ellipse(x,y,w+mouseY/10)
  ellipse(x,y,50)
  rect(x,y,w+mouseX/10)
  rect(x+40,y+40,30)
  }
  }
}

---
## 步驟八 讓音樂隨著滑鼠按下撥放

var sound1 
function preload(){
  sound1 = loadSound ("47538_feveran_strong_rock.mp3")  
}
function setup() {
  createCanvas(windowWidth,windowHeight);
  background("#edf2f4")
  analyzer = new p5.Amplitude();
  analyzer.setInput(sound1)
}
var w=100;
function draw() {
  background("#edf2f4");
  rectMode(CENTER) //讓方框的座標以方框中心為主
  noFill()
  stroke("#2b2d42")
 for(var y=50;y<=height+50;y=y+w){
  for(var x=50;x<=width+(w/2);x=x+w){
  ellipse(x,y,w+mouseY/10)
  ellipse(x,y,50)
  rect(x,y,w+mouseX/10)
  rect(x+40,y+40,30)
  }
  }
}

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

## 步驟九 音樂播放時，圖案隨震幅改變，音樂停止時，圖案隨滑鼠改變

var sound1 
function preload(){
  sound1 = loadSound ("Reminiscence.mp3")  
}
function setup() {
  createCanvas(windowWidth,windowHeight);
  background("#edf2f4")
  analyzer = new p5.Amplitude();
  analyzer.setInput(sound1)
}
var w=100;
var fc
function draw() {
  background("#fefae0");
  rectMode(CENTER) //讓方框的座標以方框中心為主
  noFill()
  if(sound1.isPlaying())
  {
   fc = map(analyzer.getLevel(),0,1,0,100)
  }
  else
  {
   fc = map(mouseX,0,width,0,100)
  }
  stroke("#b5838d")
  for(var y=50;y<=height+50;y=y+w){
  for(var x=50;x<=width+(w/2);x=x+w){
  stroke("#e5989b")
  ellipse(x,y,w+fc)
  stroke("#b5838d")
  ellipse(x,y,50+fc)
  stroke("#ffddd2")
  rect(x,y,w)
  stroke("#ffcdb2")
  rect(x+40,y+40,30+fc)
  }
  }
}
function mousePressed(){
  if(sound1.isPlaying()){
    sound1.stop();
  }else{
    sound1.play();
  }
}