---
tags: 程式設計,第一個作業,教師版,互動藝術程式創作入門,Creative Coding
---
# 期中作業 陳昱廷
# 409000618
[作業一]
1.建立底圖
```javascript=
function setup() {
createCanvas(windowWidth, windowHeight);
background(0);
}
function draw() {
background(0)
noFill()
}
```
---
2.顯示圖形
```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迴圈讓圖形填滿視窗長寬範圍
```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指令讓圖形隨滑鼠移動座標
```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
!
```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填滿視窗長寬範圍
```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隨滑鼠移動座標
```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.製作圖形
```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填滿視窗長寬範圍
```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動起來
```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連接兩個畫面
完整程式碼
```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);//三角形
}
}
}
}
Sign in with Wallet
Connect another wallet