---
tags: 程式設計教材庫,範例版,互動藝術程式創作入門,Creative Coding
---

# 第一個作業


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

{%youtube PF_IdMQiBgM %}

---

## 評分標準

:::info

## :mega: 評分標準

* 完成影片中步驟(20%)
* 自行創作步驟一到步驟四(5%)
* 自行創作步驟五到步驟八(使用迴圈指令)(10%)
* 最後完成與滑鼠的互動完整程式碼(10%)
* 加上文字(5%)
* 連成直線(10%)
* 加上文字旋轉(10%)
* 整體複雜度(10%)
* 與滑鼠的互動(10%)
* 顏色搭配(10%)

:::

---

# 啟動你的程式碼

## 步驟一:以左上角為原點(0,0)座標，撰寫一條畫圓指令(50大小，注意：畫圓指令是以圓心為座標點)


function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background("#fefae");
  noFill()
  stroke("#d4a373")
  strokeWeight(3)
  var rect_width=50
  var bc_w=50
  var sc_w=25



for(let i=0;i<20;i=i=1){
   ellipse(25+bc_w*i,25,bc_w)
   rect(rect_width*0,0,rect_width)
    ellipse(rect_width*(i+1),50,sc_w)



  }

---

## 步驟二:以左上角為原點(0,0)座標，撰寫一條畫方框指令(50大小，注意，方框指令是以左上角為座標點)


function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background("#fefae");
  noFill()
  stroke("#d4a373")
  strokeWeight(3)
  var rect_width=50
  var bc_w=50
  var sc_w=25



for(let i=0;i<20;i=i=1){
   ellipse(25+bc_w*i,25,bc_w)
   rect(rect_width*0,0,rect_width)
    ellipse(rect_width*(i+1),50,sc_w)



  }

---

## 步驟三：以方框右下角為圓心畫一個小圓(大小為25)


function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background("#fefae");
  noFill()
  stroke("#d4a373")
  strokeWeight(3)
  var rect_width=50
  var bc_w=50
  var sc_w=25



for(let i=0;i<20;i=i=1){
   ellipse(25+bc_w*i,25,bc_w)
   rect(rect_width*0,0,rect_width)
    ellipse(rect_width*(i+1),50,sc_w)



  }

---

## 步驟四:原點座標往右移動50大小，繼續畫相同方框與圓


function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background("#fefae");
  noFill()
  stroke("#d4a373")
  strokeWeight(3)
  var rect_width=50
  var bc_w=50
  var sc_w=25



for(let i=0;i<20;i=i=1){
   ellipse(25+bc_w*i,25,bc_w)
   rect(rect_width*0,0,rect_width)
    ellipse(rect_width*(i+1),50,sc_w)



  }

---

## 步驟五：畫上一整排的相同圓與方框組合


function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background("#fefae");
  noFill()
  stroke("#d4a373")
  strokeWeight(3)
  var rect_width=50
  var bc_w=50
  var sc_w=25



for(let i=0;i<20;i=i=1){
   ellipse(25+bc_w*i,25,bc_w)
   rect(rect_width*0,0,rect_width)
    ellipse(rect_width*(i+1),50,sc_w)



  }

---

## 步驟六：往下一排產生圓方框組合


function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background("#fefae");
  noFill()
  stroke("#d4a373")
  strokeWeight(3)
  var rect_width=50
  var bc_w=50
  var sc_w=25



for(let i=0;i<20;i=i=1){
   ellipse(25+bc_w*i,25,bc_w)
   rect(rect_width*0,0,rect_width)
    ellipse(rect_width*(i+1),50,sc_w)



  }

---

## 步驟七：產生兩排完整圓方框組合


function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background("#fefae");
  noFill()
  stroke("#d4a373")
  strokeWeight(3)
  var rect_width=50
  var bc_w=50
  var sc_w=25

rectMode(CENTER)

for(let j=0;j<25;j=j+1)
  
for(let x=0;x<width;x=x+rect_width){
   ellipse(x,25+50*j,bc_w)
   rect(x,25+50*j,rect_width)
    ellipse(25+x+rect_width,50+50*j,sc_w)



  }
}

---

## 步驟八：畫出充滿整個螢幕畫面


function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background("#fefae");
  noFill()
  stroke("#d4a373")
  strokeWeight(3)
  var rect_width=50
  var bc_w=50
  var sc_w=25

rectMode(CENTER)

for(let j=0;j<25;j=j+1)
  
for(let x=0;x<width;x=x+rect_width){
   ellipse(x,25+50*j,bc_w)
   rect(x,25+50*j,rect_width)
    ellipse(25+x+rect_width,50+50*j,sc_w)



  }
}

---

## 步驟九：完整程式碼：畫出最後與滑鼠游標互動


//https://youtu.be/PF_IdMQiBgM

---

# 自行設計畫面

## 步驟一:畫出你的基本圖


//https://youtu.be/PF_IdMQiBgM
let angle = 0; 
let spacing = 100; 

function setup() {
  createCanvas(windowWidth, windowHeight);
  textAlign(CENTER, CENTER); 
  textSize(100); 
  angleMode(DEGREES); 
}

function draw() {
  background("#f2e9e4"); 

  
  let circleSize = map(mouseY, 0, height, 20, 60); 

  
  for (let x = 0; x <= width; x += spacing) {  
    for (let y = 0; y <= height; y += spacing) { 
      
      fill(150, 200, 250, 100); 
      noStroke();
      ellipse(x, y, circleSize); 

      
      stroke(100, 150, 200);
      strokeWeight(2);
      line(x - spacing / 2, y, x + spacing / 2, y); 
      line(x, y - spacing / 2, x, y + spacing / 2); 
    }
  }

 
  push();
  translate(width / 2, height / 2); 
  rotate(angle); 
  angle += 1; 

  fill(random(255), random(255), random(255)); 
  text("CHUNWEI", 0, 0); 
  pop();
}

## 步驟二:基本圖充滿一整行


//https://youtu.be/PF_IdMQiBgM
let angle = 0; 
let spacing = 100; 

function setup() {
  createCanvas(windowWidth, windowHeight);
  textAlign(CENTER, CENTER); 
  textSize(100); 
  angleMode(DEGREES); 
}

function draw() {
  background("#f2e9e4"); 

  
  let circleSize = map(mouseY, 0, height, 20, 60); 

  
  for (let x = 0; x <= width; x += spacing) {  
    for (let y = 0; y <= height; y += spacing) { 
      
      fill(150, 200, 250, 100); 
      noStroke();
      ellipse(x, y, circleSize); 

      
      stroke(100, 150, 200);
      strokeWeight(2);
      line(x - spacing / 2, y, x + spacing / 2, y); 
      line(x, y - spacing / 2, x, y + spacing / 2); 
    }
  }

 
  push();
  translate(width / 2, height / 2); 
  rotate(angle); 
  angle += 1; 

  fill(random(255), random(255), random(255)); 
  text("CHUNWEI", 0, 0); 
  pop();
}

## 步驟三:基本圖充滿整個畫面

//https://youtu.be/PF_IdMQiBgM
let angle = 0; 
let spacing = 100; 

function setup() {
  createCanvas(windowWidth, windowHeight);
  textAlign(CENTER, CENTER); 
  textSize(100); 
  angleMode(DEGREES); 
}

function draw() {
  background("#f2e9e4"); 

  
  let circleSize = map(mouseY, 0, height, 20, 60); 

  
  for (let x = 0; x <= width; x += spacing) {  
    for (let y = 0; y <= height; y += spacing) { 
      
      fill(150, 200, 250, 100); 
      noStroke();
      ellipse(x, y, circleSize); 

      
      stroke(100, 150, 200);
      strokeWeight(2);
      line(x - spacing / 2, y, x + spacing / 2, y); 
      line(x, y - spacing / 2, x, y + spacing / 2); 
    }
  }

 
  push();
  translate(width / 2, height / 2); 
  rotate(angle); 
  angle += 1; 

  fill(random(255), random(255), random(255)); 
  text("CHUNWEI", 0, 0); 
  pop();
}

## 步驟四:隨著滑鼠互動改變
圖的樣式

let angle = 0; 
let spacing = 100; 

function setup() {
  createCanvas(windowWidth, windowHeight);
  textAlign(CENTER, CENTER); 
  textSize(100); 
  angleMode(DEGREES); 
}

function draw() {
  background("#f2e9e4"); 

  
  let circleSize = map(mouseY, 0, height, 20, 60); 

  
  for (let x = 0; x <= width; x += spacing) {  
    for (let y = 0; y <= height; y += spacing) { 
      
      fill(150, 200, 250, 100); 
      noStroke();
      ellipse(x, y, circleSize); 

      
      stroke(100, 150, 200);
      strokeWeight(2);
      line(x - spacing / 2, y, x + spacing / 2, y); 
      line(x, y - spacing / 2, x, y + spacing / 2); 
    }
  }

 
  push();
  translate(width / 2, height / 2); 
  rotate(angle); 
  angle += 1; 

  fill(random(255), random(255), random(255)); 
  text("CHUNWEI", 0, 0); 
  pop();
}

//https://youtu.be/PF_IdMQiBgM