# p5.js程式設計 X 聲音工作坊

嗨，就讀北藝大音樂與影像跨域學士學位學程的同學們😊😊😊
請大家在參加工作坊前，完整體驗一次「Minecraft Hour of Code - Adventurer」遊戲教程。
此前導內容會協助大家快速進入寫程式的世界！！
網址：https://studio.code.org/s/mc/lessons/1/levels/1

參加工作坊需要自備筆記型電腦，電腦必須符合以下條件：
1. 可以上網開啟網頁
2. 具備 Webcam 視訊功能
3. 包含任何的聲音輸出設備，例如: 內建喇叭、藍芽耳機
4. 三年以內的電腦(Optional，效能不能太差)

這個是工作坊實作的Demo:
{%youtube kyTwHidIU5Y %}

## 🚀Day0 課前準備
### 🪐Minecraft Hour of Code - Adventurer
#### 程式積木
#### Function
#### Loop, If

## 🚀Day1 p5.js 程式設計基礎課
### 📁課程簡報
https://docs.google.com/presentation/d/1EuzMndoN3WSG9DK5Cic8w8Nd02zXI6BOtCc_UxjNf64/edit?usp=sharing

### 🪐程式的基本形式與思考方式
#### 輸入、儲存、處理與輸出
#### 運算思維
#### 循序處理
#### 條件分歧處理
#### 反覆執行處理
### 🪐p5.js 程式語言入門
#### Variable: boolean, number and string

#### Branch: if-else
#### Loop: while
#### Shape Primitives: line(), ellipse(), rect()
#### Custom Primitives: beginShape(), vertex(), endShape()
#### Function

## 🚀Day2 p5.js 程式設計進階課
### 📁課程簡報
https://docs.google.com/presentation/d/1jDDCSCMxdRjP4GPnknmFID5RyyfTj73PLDwl6lPanZc/edit?usp=sharing
### 🪐Day1 作業討論
### 🪐音波振盪器
#### Sine, Triangle, Square and Sawtooth Waveforms
{%youtube cayuorF596w %}
#### p5.Oscillator
https://editor.p5js.org/weichih25/sketches/aJcDV8ivt
### 🪐Handsfree.js
#### 基礎範例程式
https://editor.p5js.org/weichih25/sketches/uMTJd3I8o
#### 🪐「捏」出你的聲音-範例程式
https://editor.p5js.org/weichih25/sketches/ymgQvq0P5

## 📚推薦書單
The Coding Train
https://www.youtube.com/c/TheCodingTrain

Getting Started with p5.js
https://www.oreilly.com/library/view/make-getting-started/9781457186769/

全圖解寫給所有人的運算思維入門
https://www.eslite.com/product/1001130572806602?gclid=CjwKCAjw682TBhATEiwA9crl37hNsvQg0YXYUJaiKlDS3Tocc905yJCE-gmSXDhMqppbozYrwnTqUxoCcrAQAvD_BwE