---
# System prepended metadata

title: 410738032詹雅媛
tags: [第一個作業, 程式設計, 互動藝術程式創作入門, 教師版, Creative Coding]

---

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

# 410738032詹雅媛
# 程式設計（二）期中作業

作業1
![](https://i.imgur.com/Vq8YSD9.gif)
https://openprocessing.org/sketch/1529444

```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
}

function draw() {
	background(0)
	noFill()
for(var x=0;x<width;x=x+100){
for(var y=0;y<height;y=y+100){
var p=map(mouseX,0,width,0,100)
  
  rectMode(CENTER)
	stroke("#f72585")
	rect(x,y,100+p)
	
	rectMode(CENTER)
	stroke("#ffffff")
	ellipse(x+50,y+50,50+p)
	
	rectMode(CENTER)
	stroke("#4cc9f0")
	rect(x+20,y+20,100+p)
    }
  }
}
```
步驟一
先畫一個圖
![](https://i.imgur.com/m3QMv9i.png)

```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(255);
}

function draw() {
	background(0)
	noFill()//不填滿顏色
  
  rectMode(CENTER)//滑鼠在圖的中心
	stroke("#f72585")//線條
	ellipse(100,100,100)//大圓
	
	rectMode(CENTER)
	stroke("#ffffff")
	ellipse(150,150,50)//圓
	
	rectMode(CENTER)
	stroke("#4cc9f0")
	rect(120,120,100)//小方塊
}

```

步驟二
畫一排圖案

![](https://i.imgur.com/jJcm2Ce.png)

```javascript=
function draw() {
	background(0)
	noFill()
for(var x=0;x<width;x=x+100){ //把圖案填滿Ｘ軸
  
    rectMode(CENTER)
	stroke("#f72585")
	ellipse(x,100,100)
	
	rectMode(CENTER)
	stroke("#ffffff")
	ellipse(x+50,150,50)
	
	rectMode(CENTER)
	stroke("#4cc9f0")
	rect(x+20,120,100)
  }
}
```

步驟三
讓圖案填滿畫面
![](https://i.imgur.com/GeFTokk.png)


```javascript=
function draw() {
	background(0)
	noFill()
  for(var x=0;x<width;x=x+100){
  for(var y=0;y<height;y=y+100){ //
    rectMode(CENTER)
	stroke("#f72585")
	ellipse(x,100,100)
	
	rectMode(CENTER)
	stroke("#ffffff")
	ellipse(x+50,150,50)
	
	rectMode(CENTER)
	stroke("#4cc9f0")
	rect(x+20,120,100)
  }
}
```
步驟四
加入隨著滑鼠的map變數

![](https://i.imgur.com/Vq8YSD9.gif)


```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(255);
}

function draw() {
	background(0)
	noFill()
for(var x=0;x<width;x=x+100){
for(var y=0;y<height;y=y+100){
var p=map(mouseX,0,width,0,100) //隨著滑鼠移動
  
  rectMode(CENTER)
	stroke("#f72585")
	ellipse(x,y,100+p)//加入p讓圖案跟著滑鼠移動
	
	rectMode(CENTER)
	stroke("#ffffff")
	ellipse(x+50,y+50,50+p)//加入p讓圖案跟著滑鼠移動
	
	rectMode(CENTER)
	stroke("#4cc9f0")
	rect(x+20,y+20,100+p)//加入p讓圖案跟著滑鼠移動
   }
  }
}
```

---

作業2
依照以上方式自己設計出另外一個圖形

![](https://i.imgur.com/m9fshqh.gif)
https://openprocessing.org/sketch/1531772

```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(255);
}

function draw() {
	background("#22223b")
	noFill()
	strokeWeight(2)
for(var x=0;x<width;x=x+100){
for(var y=0;y<height;y=y+100){
var p=map(mouseX,0,width,0,100)
  
  rectMode(CENTER)
	stroke("#dde5b6")
	quad(x+48-p,y+41-p,x+94+p,y+30-p,x+82+p,y+74+p,x+38-p,y+86+p)
	
	rectMode(CENTER)
	stroke("#ff4d6d")
	ellipse(x+50,y+50,50+p)
	
	rectMode(CENTER)
	stroke("#ffb703")
	triangle(x+50+p,y+p,x+p,y+50+p,x+p,y+p)
	
	rectMode(CENTER)
	stroke("#fee440")
	triangle(x-p,y-p,x-p,y+50-p,x+50-p,y-p)
	
   }
  }
}
```

步驟一
畫一個圖案

![](https://i.imgur.com/aZZxl8c.png)

```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(255);
}

function draw() {
	background("#22223b")
	noFill()
  
  rectMode(CENTER)
	stroke("#dde5b6")
	quad(148,141,194,130,182,174,138,186)
	
	rectMode(CENTER)
	stroke("#ff4d6d")
	ellipse(150,150,50)
	
	rectMode(CENTER)
	stroke("#ffb703")
	triangle(150,100,100,150,100,100)
	
	rectMode(CENTER)
	stroke("#fee440")
	triangle(100,100,100,150,150,100)

}
```


步驟二
畫一排圖案
![](https://i.imgur.com/qJvZBH6.png)



```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(255);
}

function draw() {
	background("#22223b")
	noFill()
for(var x=0;x<width;x=x+100){
  
  rectMode(CENTER)
	stroke("#dde5b6")
	quad(x+48,141,x+94,130,x+82,174,x+38,186)
	
	rectMode(CENTER)
	stroke("#ff4d6d")
	ellipse(x+50,150,50)
	
	rectMode(CENTER)
	stroke("#ffb703")
	triangle(x+50,100,x,150,x,100)
	
	rectMode(CENTER)
	stroke("#fee440")
	triangle(x,100,x,150,x+50,100)
	
   }
}
```


步驟三
圖案填滿畫面
![](https://i.imgur.com/WCMKpeZ.png)


```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(255);
}

function draw() {
	background("#22223b")
	noFill()
for(var x=0;x<width;x=x+100){
for(var y=0;y<height;y=y+100){
  
  rectMode(CENTER)
	stroke("#dde5b6")
	quad(x+48,y+41,x+94,y+30,x+82,y+74,x+38,y+86)
	
	rectMode(CENTER)
	stroke("#ff4d6d")
	ellipse(x+50,y+50,50)
	
	rectMode(CENTER)
	stroke("#ffb703")
	triangle(x+50,y,x,y+50,x,y)
	
	rectMode(CENTER)
	stroke("#fee440")
	triangle(x,y,x,y+50,x+50,y)
	
   }
  }
}
```


步驟四
加入隨著滑鼠的map變數

![](https://i.imgur.com/m9fshqh.gif)

```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(255);
}

function draw() {
	background("#22223b")
	noFill()
	strokeWeight(2)
for(var x=0;x<width;x=x+100){
for(var y=0;y<height;y=y+100){
var p=map(mouseX,0,width,0,100)
  
  rectMode(CENTER)
	stroke("#dde5b6")
	quad(x+48-p,y+41-p,x+94+p,y+30-p,x+82+p,y+74+p,x+38-p,y+86+p)
	
	rectMode(CENTER)
	stroke("#ff4d6d")
	ellipse(x+50,y+50,50+p)
	
	rectMode(CENTER)
	stroke("#ffb703")
	triangle(x+50+p,y+p,x+p,y+50+p,x+p,y+p)
	
	rectMode(CENTER)
	stroke("#fee440")
	triangle(x-p,y-p,x-p,y+50-p,x+50-p,y-p)
	
   }
  }
}
```