# IEH Workshop003：基礎程式設計二

程式設計課程規定(違規視情況扣分，並影響學期末成績。)
1. 上課時請專心,禁止玩遊戲。下課時間可以玩遊戲沒問題。
2. 課程中若需要討論,請控制音量,不要干擾其他同學。
3. 每次的課堂作業,應於當天完成。
4. 課堂中有問題,請舉手發問。
5. 課堂中禁止飲食,只能帶水至教室。

* https://ieh.mattc.art
* https://editor.p5js.org

# 基礎程式
## 1. if / else if / if

function setup() {
  createCanvas(400, 400); 
  background(220);
}
function draw() {
  if(mouseIsPressed){
    circle(mouseX,mouseY,20);
  }else{
    rect(mouseX,mouseY,20)
  }
}

## 2. for 迴圈
迴圈讓我們可以重複執行相同的程式碼。在 p5.js 中，for 迴圈是最常用的迴圈之一。

function setup() {
  createCanvas(400, 400); 
  background(220);
}
function draw() {
  for (let i = 0; i < 10; i++) {
    ellipse(50 + i * 30, 200, 20, 20);
  }
}

## 3. function

Bouncing DVD Logo Screensaver
https://www.bouncingdvdlogo.com/
<img src="https://hackmd.io/_uploads/rymVgkJTR.png" alt="drawing" style="height:100px;"/>

let circleX = 100
let circleY = 100
let circleSize = 30
let velocityX = 5
let velocityY = 5

function setup(){
    createCanvas(400,500)
}
function draw(){
    background(0)
    circle(circleX, circleY, circleSize)

    circleY = circleY + velocityY
    circleX = circleX + velocityX

    if (circleY > height || circleY < 0){
        velocityY = -velocityY
    }
    if (circleX > width || circleX < 0){
        velocityX = -velocityX
    }
}

function randomColor(){
    // random number between 0 - 255
    r = random(255); 
    g = random(255);
    b = random(255);
    fill(r, g, b, 255);
}

## 4. 作業

請依據前面範例，讓球在碰撞牆壁時改變顏色

## 5. 進階作業
承上題，把球改成文字 "DVD"
提示：function textSize() and text()