---
# System prepended metadata

title: 期中作業 陳昱廷
tags: [程式設計, Creative Coding, 教師版, 互動藝術程式創作入門, 第一個作業]

---

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

# 期中作業 陳昱廷
# 409000618
[作業一]

1.建立底圖
```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
}

function draw() {
	background(0)
	noFill()
}

```

---
2.顯示圖形
![](https://i.imgur.com/LqH8nwP.png)
```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
}

function draw() {
	background(0)
	noFill()
	stroke(255,0,0)//RGB紅色大圓
	ellipse(50,50,100);
	stroke(255,255,0)//RGB黃色正方形
	rectMode(CENTER)
	rect(50,50,100);
	stroke(0,0,255)//RGB藍色小圓
	ellipse(100,100,50);
}
```
---
3.用for迴圈讓圖形填滿視窗長寬範圍
![](https://i.imgur.com/Z22cvVu.png)
```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){
        //迴圈為x(或y)軸從0開始(即起點),當條件成立(即終點前)就需要一直做迴圈執行
    
	stroke(255,0,0)//RGB紅色大圓
	ellipse(x,y,100);
	stroke(255,255,0)//RGB黃色正方形
	rectMode(CENTER)
	rect(x,y,100);
	stroke(0,0,255)//RGB藍色小圓
	ellipse(x+50,y+50,50);
	}
  }
}
```
---
4.用map指令讓圖形隨滑鼠移動座標
![](https://i.imgur.com/4aIKvk8.gif)
```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
}

function draw() {
	background(0)
	noFill()	
    
	var span=map(mouseX,0,width,0,100)
        //用map指令讓圖形隨滑鼠移動座標
    
	for(var x=0;x<width;x=x+100){
	for(var y=0;y<height;y=y+100){
        //迴圈為x(或y)軸從0開始(即起點),當條件成立(即終點前)就需要一直做迴圈執行
        
	stroke(255,0,0)//RGB紅色大圓
	ellipse(x,y,100+span);
	stroke(255,255,0)//RGB黃色正方形
	rectMode(CENTER)
	rect(x,y,100+span);
	stroke(0,0,255)//RGB藍色小圓
	ellipse(x+50,y+50,50+span);
	}
  }
}
```
---
[作業二]
1.建立底圖
```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
}

function draw() {
	background(0)
	noFill()
}

```

---
2.顯示圖形1
!![](https://i.imgur.com/DrN74bo.png)

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

function draw() {
	background(255)
	noFill()
	
	var span=map(mouseX,0,width,-50,100)
        //用map指令讓圖形隨滑鼠移動座標
	
	for(var x=0;x<width;x=x+300){
	for(var y=0;y<height;y=y+300){
        //迴圈為x(或y)軸從0開始(即起點),當條件成立(即終點前)就需要一直做迴圈執行
		
	stroke(253,231,156,200)
	rectMode(CENTER)
	fill(255,153,204,170)
	rect(150+x,150+y,300+span);//大正方形
	fill(111,374,352)
	rect(150+x,150+y,250+span);//小正方形
	fill(252,211,78,170)
	quad(250+x+span,300+y+span,300+x+span,250+y+span,350+x+span,300+y+span,300+x+span,350+y+span);//大菱形
	fill(255,102,178,200)
	ellipse(150+x,150+y,300+span);//大圓外圈
	fill(372,122,64,123)
	ellipse(150+x,150+y,250+span);//大圓內圈
	fill(163,472,78,70)
	triangle(43+x+span,87+y+span,150+x+span,275+y+span,258+x+span,87+y+span);//倒三角形
	fill(255,153,204,170)
	triangle(43+x+span,213+y+span,150+x+span,25+y+span,258+x+span,213+y+span);//正三角形
	fill(255,204,229,220)
	ellipse(150+x,150+y,125+span);//小圓外圈
	fill(225,143,214,150)
	ellipse(150+x,150+y,90+span);//小圓內圈
	fill(252,211,78,170)
	quad(140+x+span,150+y+span,150+x+span,130+y+span,160+x+span,150+y+span,150+x+span,170+y+span);//小菱形
	    }
        }

```
---
3.用for迴圈讓圖形1填滿視窗長寬範圍
![](https://i.imgur.com/5i8LEp1.png)

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

function draw() {
	background(255)
	noFill()
	
	for(var x=0;x<width;x=x+300){
	for(var y=0;y<height;y=y+300){
        //迴圈為x(或y)軸從0開始(即起點),當條件成立(即終點前)就需要一直做迴圈執行
		
	stroke(253,231,156,200)
	rectMode(CENTER)
	fill(255,153,204,170)
	rect(150+x,150+y,300);//大正方形
	fill(255,255,255)
	rect(150+x,150+y,250);//小正方形
	fill(252,211,78,170)
	quad(250+x,300+y,300+x,250+y,350+x,300+y,300+x,350+y);//大菱形
	fill(255,102,178,200)
	ellipse(150+x,150+y,300);//大圓外圈
	fill(255,204,229,220)
	ellipse(150+x,150+y,250);//大圓內圈
	fill(252,211,78,170)
	triangle(43+x,87+y,150+x,275+y,258+x,87+y);//倒三角形
	fill(255,153,204,170)
	triangle(43+x,213+y,150+x,25+y,258+x,213+y);//正三角形
	fill(255,204,229,220)
	ellipse(150+x,150+y,125);//小圓外圈
	fill(255,153,204,170)
	ellipse(150+x,150+y,90);//小圓內圈
	fill(252,211,78,170)
	quad(140+x,150+y,150+x,130+y,160+x,150+y,150+x,170+y);//小菱形
	}
  }
}

```
---
4.用map指令讓圖形1隨滑鼠移動座標
![](https://i.imgur.com/CZe46sX.png)

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

function draw() {
	background(255)
	noFill()
	
	var span=map(mouseX,0,width,-50,100)
        //用map指令讓圖形隨滑鼠移動座標
	
	for(var x=0;x<width;x=x+300){
	for(var y=0;y<height;y=y+300){
        //迴圈為x(或y)軸從0開始(即起點),當條件成立(即終點前)就需要一直做迴圈執行
		
	stroke(253,231,156,200)
	rectMode(CENTER)
	fill(255,153,204,170)
	rect(150+x,150+y,300+span);//大正方形
	fill(111,374,352)
	rect(150+x,150+y,250+span);//小正方形
	fill(252,211,78,170)
	quad(250+x+span,300+y+span,300+x+span,250+y+span,350+x+span,300+y+span,300+x+span,350+y+span);//大菱形
	fill(255,102,178,200)
	ellipse(150+x,150+y,300+span);//大圓外圈
	fill(372,122,64,123)
	ellipse(150+x,150+y,250+span);//大圓內圈
	fill(163,472,78,70)
	triangle(43+x+span,87+y+span,150+x+span,275+y+span,258+x+span,87+y+span);//倒三角形
	fill(255,153,204,170)
	triangle(43+x+span,213+y+span,150+x+span,25+y+span,258+x+span,213+y+span);//正三角形
	fill(255,204,229,220)
	ellipse(150+x,150+y,125+span);//小圓外圈
	fill(225,143,214,150)
	ellipse(150+x,150+y,90+span);//小圓內圈
	fill(252,211,78,170)
	quad(140+x+span,150+y+span,150+x+span,130+y+span,160+x+span,150+y+span,150+x+span,170+y+span);//小菱形
	    }
        }
	
```
---
5.製作圖形
![](https://i.imgur.com/VYoQmZw.png)
```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
	frameRate(10)
}

function draw() {
	background(0)
	noFill()
	stroke(255,228,225)//RGB粉色框線
	rect(0,0,100);//小正方形
	stroke(255,250,250)//RGB雪白色框線
	ellipseMode(CORNER)
	ellipse(0,0,100);//圓形
	stroke(255,250,205)//RGB米黃色框線
	rect(50,50,50);//大正方形
	stroke(204,229,255)//RGB淺藍色框線
	triangle(50,0,0,50,-50,0);//三角形
}
```
---
6.用for迴圈讓圖形1填滿視窗長寬範圍
![](https://i.imgur.com/IWYc5gX.png)
```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
	frameRate(10)
}

function draw() {
	background(0)
	noFill()
    
	for(var x=0;x<width;x=x+100){
	for(var y=0;y<height;y=y+100){
        //迴圈為x(或y)軸從0開始(即起點),當條件成立(即終點前)就需要一直做迴圈執行
        
	stroke(255,228,225)//RGB粉色框線
	rect(x,y,100);//小正方形
	stroke(255,250,250)//RGB雪白色框線
	ellipseMode(CORNER)
	ellipse(x,y,100);//圓形
	stroke(255,250,205)//RGB米黃色框線
	rect(x+50,y+50,50);//大正方形
	stroke(204,229,255)//RGB淺藍色框線
	triangle(x+50,0+y,x+0,50+y,x-50,0+y);//三角形
	}
  }
}
```
7.用sin讓圖片2動起來
![](https://i.imgur.com/j44EUZT.gif)
```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
	frameRate(10)
}

function draw() {
	background(0)
	noFill()
	
	for(var x=0;x<width;x=x+100){
	for(var y=0;y<height;y=y+100){
	//迴圈為x(y)軸從0開始,當條件成立就需要一直做迴圈執行
		
	stroke(255,228,225)//RGB粉色框線
	rect(x,y,100+sin(frameCount/10)*150);//小正方形
	stroke(255,250,250)//RGB雪白色框線
	ellipseMode(CORNER)
	ellipse(x,y,100+sin(frameCount/10)*150);//圓形
	stroke(255,250,205)//RGB米黃色框線
	rect(x+50,y+50,50+sin(frameCount/10)*150);//大正方形
	stroke(204,229,255)//RGB淺藍色框線
	triangle(x+50,0+y,x+0,50+y,x-50,0+y+sin(frameCount/10)*150);//三角形
	}
  }
}
```
7.mouseIsPressed連接兩個畫面
![](https://i.imgur.com/DYQ6izm.png)
![](https://i.imgur.com/j44EUZT.gif)
完整程式碼
```javascript=
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
	frameRate(10)
}

function draw() {
	background(255)
	noFill()
	
	var span=map(mouseX,0,width,-50,100)
        //用map指令讓圖形隨滑鼠移動座標
	
	for(var x=0;x<width;x=x+300){
	for(var y=0;y<height;y=y+300){
        //迴圈為x(或y)軸從0開始(即起點),當條件成立(即終點前)就需要一直做迴圈執行
		
	stroke(23,21,56,20)
	rectMode(CENTER)
	fill(255,153,204,170)
	rect(150+x,150+y,300+span);//大正方形
	fill(225,215,25)
	rect(150+x,150+y,250+span);//小正方形
	fill(52,21,78,170)
	quad(250+x+span,300+y+span,300+x+span,250+y+span,350+x+span,300+y+span,300+x+span,350+y+span);//大菱形
	fill(215,12,18,220)
	ellipse(150+x,150+y,300+span);//大圓外圈
	fill(35,24,229,210)
	ellipse(150+x,150+y,250+span);//大圓內圈
	fill(152,221,228,10)
	triangle(43+x+span,87+y+span,150+x+span,275+y+span,258+x+span,87+y+span);//倒三角形
	fill(255,153,204,170)
	triangle(43+x+span,213+y+span,150+x+span,25+y+span,258+x+span,213+y+span);//正三角形
	fill(255,204,229,220)
	ellipse(150+x,150+y,125+span);//小圓外圈
	fill(255,153,204,170)
	ellipse(150+x,150+y,90+span);//小圓內圈
	fill(252,211,78,170)
	quad(140+x+span,150+y+span,150+x+span,130+y+span,160+x+span,150+y+span,150+x+span,170+y+span);//小菱形
	    }
        }
	if(mouseIsPressed){
	background(0)
	noFill()
	for(var x=0;x<width;x=x+100){
	for(var y=0;y<height;y=y+100){
	//迴圈為x(y)軸從0開始,當條件成立就需要一直做迴圈執行
		
	stroke(235,28,125)//RGB粉色框線
	rect(x,y,100+sin(frameCount/10)*150);//小正方形
	stroke(132,361,25)//RGB雪白色框線
	ellipseMode(CORNER)
	ellipse(x,y,100+sin(frameCount/10)*150);//圓形
	stroke(235,210,201)//RGB米黃色框線
	rect(x+50,y+50,50+sin(frameCount/10)*150);//大正方形
	stroke(324,219,25)//RGB淺藍色框線
	triangle(x+50,0+y,x+0,50+y,x-50,0+y+sin(frameCount/10)*150);//三角形
	}
    }
}
}
