---
# System prepended metadata

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

---

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


# 第一個作業

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

{%youtube PF_IdMQiBgM %}

---

啟動你的程式碼

## 步驟一

![](https://hackmd.io/_uploads/B1Ut10f29.png)

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

function draw() {
  background(0); 
  stroke(255)//框線顏色
  noFill()；//不要充滿顏色
  ellipse(25,25,50)//在座標(25,25)畫一個直徑50圓
}


```

---

## 步驟二

![](https://hackmd.io/_uploads/Sy_p1Rzh5.png)

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

function draw() {
  background(0); 
  stroke(255)//框線顏色
  noFill()；//不要充滿顏色
  ellipse(25,25,50)//在座標(25,25)畫一個直徑50圓
  rectMode(CENTER)//以方框中心點為座標點
  rect(25,25,50)//方框座標
}

```

---

## 步驟三

![](https://hackmd.io/_uploads/Hy41eRMh9.png)

```javascript=


```

---

## 步驟四

![](https://hackmd.io/_uploads/ByDZe0Mnq.png)

```javascript=

```

---

## 步驟五

![](https://hackmd.io/_uploads/r1j6lRf29.png)

```javascript=

```

---

## 步驟六

![](https://hackmd.io/_uploads/SykDl0M35.png)

```javascript=

```

---

## 步驟七

![](https://hackmd.io/_uploads/S1ZKl0f39.png)

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

function draw() {
  background(0); 
  stroke(255)//框線顏色(255為白色)
  noFill(); //不要充滿顏色
  rectMode(CENTER)//以方框中心點為座標點

for(var j=0; j<(height/50); j++){
  for(vari=0; i<(width/50); i=i+1)//i++ ==>i=i+1
    {
      ellipse(25+(i*50),25+(j*50),50)//在座標(25,25)畫一個直徑50圓
      rect(25+(i*50),25+(j*50),50)//方框座標
      ellipse(50+(i*50),50+(j*50),25)
    }

  }
}

```

---

## 步驟八

![](https://hackmd.io/_uploads/Sy6ce0f39.png)


```javascript=

```

---


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



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

function draw() {
  background(0); 
  stroke(255)//框線顏色(255為白色)
  noFill(); //不要充滿顏色
  rectMode(CENTER)//以方框中心點為座標點

for(var j=0;  j<(height/50); j++){
  for(var i=0;  i<(width/50); i=i+1)//i++ ==>i=i+1
    {
      ellipse(25+(i*50),25+(j*50),50+mouseX/10)//在座標(25,25)畫一個直徑50圓
      stroke("#009393")
      rect(25+(i*50),25+(j*50),50)//方框座標
      stroke("#B15BFF")
      ellipse(50+(i*50),50+(j*50),25+mouseY/5)
      stroke(255)
    }
  }
}




```


---

# 自行設計畫面