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

# 第一個作業

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

{%youtube PF_IdMQiBgM %}

---

啟動你的程式碼

## 步驟一


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

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

---

## 步驟二


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)//方框座標
}

---

## 步驟三


---

## 步驟四


---

## 步驟五


---

## 步驟六


---

## 步驟七


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

  }
}

---

## 步驟八


---


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

---

# 自行設計畫面