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

# 410730013 許軒豪：第一個作業

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

[](https://openprocessing.org/sketch/1522426)

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

function draw() {
  background(0)
  noFill() //不填滿
	
  for(var x=0;x<width;x=x+50) //迴圈
	  	{	
  for(var y=0;y<height;y=y+50) //迴圈
				{	 
var J = map(mouseX,0,width,0,25);　//跟著滑鼠動
	stroke(255,0,0)
	ellipse(x+25,y+25,50+J) //大圓
    stroke(255,246,143)
                    
	rectMode(CENTER); //設定rect的對齊
	rect(x,y,50+J)
    stroke(0,191,255)
	ellipse(x+50,y+50,25+J) //小圓
	     	}
			}
	
}

---

# 自行設計畫面
第一個作業.md
目前顯示的是「第一個作業.md」。
[](https://openprocessing.org/sketch/1521857)

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(255, 204, 0);
	
}

function draw() {
	background(255, 204, 0);
	noFill()
	
	// 我是name顯示
	noStroke()
	fill(0)
	textSize(20)
	text("410730013 許軒豪",1500,40)
	
	
	for(var x=0;x<width;x=x+80)
	  	{	
	for(var y=0;y<height;y=y+80)
		{	 
			var J = map(mouseX,0,width,0,30);
			 fill(255,0,0,50)
			 strokeWeight(3)
			 stroke(255,0,0)
			 ellipse(x+25,y+25,50+J) //大圓圈
  			 stroke(136,189,228) //#88bde4
					
			 rectMode(CENTER);
			 rect(x,y,50+J)
                    
			 strokeWeight(3)
  			 stroke(136,236,136)
			 ellipse(x+50,y+50,25+J) //小圓圈
					
	    }
			}
	
}

## 【第一步】
### 先劃一個正方形、兩個圓形

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
}

function draw() {
	ellipse(25,25,50) //大圓圈
    stroke(136,189,228) //#88bde4
	
	rectMode(CENTER);
	rect(mouseX,mouseY,50)
	
	stroke(136,236,136) //方塊
	ellipse(50,50,25) //小圓圈
}

## 【第二步】
### 設定三個圖形的邊框及填滿

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
}

function draw() {
	fill(255,0,0,50) //填滿
	strokeWeight(3) //框粗度
	stroke(255,0,0) //框顏色
    
	ellipse(25,25,50) //大圓圈
    stroke(136,189,228) //#88bde4
	
	rectMode(CENTER);
	rect(mouseX,mouseY,50)
	
	strokeWeight(3)
	stroke(136,236,136)
	ellipse(50,50,25) //小圓圈
}

## 【第三步】
### 先定義"J"讓這個參數跟著滑鼠變化

var J = map(mouseX,0,width,0,30);

## 【第四步】
### 讓圖形重複：for

    //大量產出迴圈
	for(var x=0;x<width;x=x+80)
	  	{	
	for(var y=0;y<height;y=y+80)
				{	 
		var J = map(mouseX,0,width,0,30); //跟隨滑鼠變化
			fill(255,0,0,50)
			strokeWeight(3)
			stroke(255,0,0)
			ellipse(x+25,y+25,50+J) //大圓圈
  			stroke(136,189,228) //#88bde4
					
			rectMode(CENTER);
			rect(x,y,50+J)
					
			strokeWeight(3)
  			stroke(136,236,136)
			ellipse(x+50,y+50,25+J) //小圓圈
					
	     	}
			}