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

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

作業1
https://openprocessing.org/sketch/1529444

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)
    }
  }
}

步驟一
先畫一個圖

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)//小方塊
}

步驟二
畫一排圖案


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)
  }
}

步驟三
讓圖案填滿畫面

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變數


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://openprocessing.org/sketch/1531772

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)
	
   }
  }
}

步驟一
畫一個圖案


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)

}

步驟二
畫一排圖案

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)
	
   }
}

步驟三
圖案填滿畫面

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變數


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)
	
   }
  }
}