---
# 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=
ellipse(25,25,50)
```

---

## 步驟二

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

```javascript=
rect(25,25,50)
```

---

## 步驟三

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

```javascript=
ellipse(50,50,20)
```

---

## 步驟四

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

```javascript=
for(var i=0;i <int(height/50);i++)
{ellipse(25+(i50),25,50)
rect(25+(i50),25,50)
ellipse(50+(i50),50,20)}
```

---

## 步驟五

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

```javascript=
for(var j=0;j <int(width/50);j++)
{ellipse(25+(i50),25+(j50),50)
rect(25+(i50),25+(j50),50)
ellipse(50+(i50),50+(j*50),20)}
```

---

## 步驟六

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

```javascript=
for(var j=0;j <int(width/50);j++)
{ellipse(25+(i50),25+(j50),50)
rect(25+(i50),25+(j50),50)
ellipse(50+(i50),50+(j*50),20)}
for(var j=0;j <int(width/50);j++)
{ellipse(25+(i50),25+(j50),50)
rect(25+(i50),25+(j50),50)
ellipse(50+(i50),50+(j*50),20)}
```

---

## 步驟七

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

```javascript=
for(var j=0;j <int(width/50);j++)
{ellipse(25+(i50),25+(j50),50)
rect(25+(i50),25+(j50),50)
ellipse(50+(i50),50+(j*50),20)}
```

---

## 步驟八

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


```javascript=
for(var j=0;j <int(mouseX/50);j++)
{ellipse(25+(i50),25+(j50),50)
rect(25+(i50),25+(j50),50)
ellipse(50+(i50),50+(j*50),20)}
```

---


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



```javascript=
//https://youtu.be/PF_IdMQiBgM




```


---

# 自行設計畫面