---
# System prepended metadata

title: 第一個作業
tags: [範例版, Creative Coding, 程式設計教材庫, 互動藝術程式創作入門]

---

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


# 第一個作業


![20241014_1](https://hackmd.io/_uploads/HJvX7IF1ye.gif)

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

{%youtube PF_IdMQiBgM %}

---

## 評分標準 

:::info


## :mega: 評分標準


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

:::



---

# 啟動你的程式碼

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

![](https://hackmd.io/_uploads/B1Ut10f29.png)

```javascript=
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大小，注意，方框指令是以左上角為座標點)

![](https://hackmd.io/_uploads/Sy_p1Rzh5.png)

```javascript=
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)

![](https://hackmd.io/_uploads/Hy41eRMh9.png)

```javascript=
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大小，繼續畫相同方框與圓

![](https://hackmd.io/_uploads/ByDZe0Mnq.png)

```javascript=
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)



  }
```

---

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

![](https://hackmd.io/_uploads/r1j6lRf29.png)

```javascript=
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)



  }
```

---

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

![](https://hackmd.io/_uploads/SykDl0M35.png)

```javascript=
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)



  }
```

---

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

![](https://hackmd.io/_uploads/S1ZKl0f39.png)

```javascript=
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://hackmd.io/_uploads/Sy6ce0f39.png)


```javascript=
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://i.imgur.com/NQ9ftJZ.gif)


```javascript=
//https://youtu.be/PF_IdMQiBgM




```


---

# 自行設計畫面

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

![動畫](https://hackmd.io/_uploads/S1nvY3r-Jl.gif)


```javascript=
//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://hackmd.io/_uploads/S1ODFnSb1g.gif)


```javascript=
//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://hackmd.io/_uploads/SyEwt2SZ1x.gif)



```javascript=
//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://hackmd.io/_uploads/HJ68tnSWJl.gif)
圖的樣式

```javascript=
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();
}


```javascript=
//https://youtu.be/PF_IdMQiBgM




```