[Processing](https://processing.org/)
===
>歡迎大家來到Processing的世界
>希望你們能透過它去認識程式語言[color=#9999ff]
>
>課程開始前，若沒有上課投影片請先下載
> [完整版點我下載~](https://drive.google.com/open?id=0B-n3P_HMVQP8eGdkMG5WNTY0OUE)
[學生版點我下載~](https://drive.google.com/open?id=0B37wkuhaxhaLODZYMW55VUNKMms)
---
# Hello Processing
通常接觸一個全新的程式語言
都會先從印出" Hello World "這串字開始!
----
### Syntax(語法)
使用函式
println("想印的字串")
輸入 Hello, Processing 。
```clike=
println("Hello, Processing");
```
### Consequence(結果)
將程式編譯過後，
Message area(黑色區域)就可以看到你輸入的東西被印出來
Hello, Processing
>參考閱讀 : [println()](https://processing.org/reference/println_.html)
---
# 給我一個圓
Processing的開發者Casey Reas和Ben Fry曾在他們的書裡提到:
"*Processing is for writing software to make images, animations, and interactions* "
因此如何使用Procesing實做出一個圓形在螢幕上面
可以說是入門必須的課題之一
----
## 要求
* 印出一個圓形
* 要有背景色
* 圓也要有某種顏色
----
## size()
使用size()決定sketch(畫布)的大小
預設的畫布大小是 100*100 pixels
### Syntax(語法)
```
size(width, height) //for 2D graph
size(width, height, renderer) //for 2D or 3D graph
```
### Consequence(結果)
製造出一個指定寬高的畫布
>參考閱讀 : [size()](https://processing.org/reference/size_.html)
----
## background()
設置畫布的背景色
### Syntax(語法)
僅介紹兩種會用到的語法
詳細語法請看下方"參考閱讀"
```
background(v1, v2, v3)
background(rgb)
```
>名詞解釋:
v1 : 大小為0~255之間的某一數字；紅色的強度 。
v2 : 大小為0~255之間的某一數字；綠色的強度。
v3 : 大小為0~255之間的某一數字；藍色的強度。
rgb: 以#後接六位大小為0~F的十六進位數字組成。
### Consequence(結果)
```javascript=
background(255, 204, 0);
```
```javascript=
background(#FFCC00);
```
兩張圖其實是一樣顏色的:FF~16~ = 255, CC~16~ = 204, 00~16~ = 0。
>參考閱讀 : [background()](https://processing.org/reference/background_.html)
----
## ellipse()
畫橢圓的函式
### Syntax(語法)
```
ellipse(橢圓中心的x軸位置, 橢圓中心的y軸位置, 橢圓的寬, 橢圓的高)
```
### Consequence(結果)
```javascript=
ellipse(50, 100, 50, 80);
```
>參考閱讀 : [ellipse()](https://processing.org/reference/ellipse_.html)
----
## fill()
設置圖形的顏色
### Syntax(語法)
和background()類似
只介紹其中兩種用法
```
fill(v1, v2, v3)
fill(rgb)
```
### Consequence(結果)
```javascript=
fill(204, 102, 0);
```
```javascript=
fill(#CC6600);
```
兩張圖其實是一樣顏色的:CC~16~ = 204, 66~16~ = 102, 00~16~ = 0。
>參考閱讀 : [fill()](https://processing.org/reference/fill_.html)
----
## 實作
* ### 上課內容補充
+ **顏色**: 除了RGB模式，其實還有另一個HSB模式可以用，但因為RGB會比較好理解和操作，[HSB模式](https://processing.org/reference/colorMode_.html)相關內容請自行摸索。
+ **圖形邊框**: [noStroke()](https://processing.org/reference/noStroke_.html)函式可以讓圖形的邊框消失，而[stroke(color)](https://processing.org/reference/stroke_.html)函式則可改變邊框顏色，使用方法同background()和fill()，然後利用[strokeWeight(number)](https://processing.org/reference/strokeWeight_.html)函式可以改變邊框寬度，相關內容請自行摸索。
+ 更多內容請見課程投影片
> 給我一個圓-程式碼 [點我下載~](https://github.com/Raxwade/Processing-Tutorial/blob/master/GiveMeCircle.pde)
>[何謂RGB、CMYK、HSB色彩模型？](https://support.corel.com/hc/zh-tw/articles/216193008--%E5%85%B6%E4%BB%96-%E4%BD%95%E8%AC%82RGB-CMYK-HSB%E8%89%B2%E5%BD%A9%E6%A8%A1%E5%9E%8B-)
# 讓圓動起來
+ ## 上課內容補充
- press的型別可以從[**int**](https://processing.org/reference/int.html)改成[**boolean**](https://processing.org/reference/boolean.html)。
- [mousePressed()](https://processing.org/reference/mousePressed_.html)的函式可以改成使用boolean type的[mousePressed變數](https://processing.org/reference/mousePressed.html)
- 除了圓形之外，Processing其實也有其他的2D圖形可以畫，例如[三角形](https://processing.org/reference/triangle_.html)、[矩形](https://processing.org/reference/rect_.html)。因講課時間有限，所以投影片是用圓形當範例，如果再深入一點，甚至可以用[createShape()](https://processing.org/reference/createShape_.html)的方式去畫圖，有興趣請自行探索。
- 更多內容請見課程投影片
>讓圓動起來-程式碼 [點我下載~](https://github.com/Raxwade/Processing-Tutorial/blob/master/CircleMoving.pde)
/*網址失效
---
# 有球必應
提供一些小技巧
* 可能有些同學會困惑circle_size的意思，在我們提供的程式碼中，**circle_size指的是圓的直徑**，這部分如果同學不滿意，也可自行修改。
* **[width](https://processing.org/reference/height.html)、[height](https://processing.org/reference/width.html)可以當作儲存畫布大小的變數。**
舉例來說:
現在有一個size(400, 300)的畫布
那麼你如果想要判斷某個變數X的值會不會超過畫布的寬(400)
相比於if(X>400)，
假如這個X代表的是橫軸座標，你也可以用if(X>width)去表示。
在Debug或合作開發時比較一目了然。
* **善用邏輯運算符號**
在我提供的code(程式碼)中，只有兩個if結構。
如果曾經學習過程式語言，只要善用 "**||**"、"**&&**"，做這個題目應該不會有太大的問題。
但對**新手**來說，可能會覺得兩個if不夠，如果你有這樣的想法，建議瀏覽講義下方**if-else語法**的內容，如果還是不懂，請直接去詢問你的助教，或上網搜尋資料等等。
> 有球必應-程式碼(未完成) [下載](https://github.com/Raxwade/Processing-Tutorial/blob/BALL-COLLIDING-STUDENT/BallColliding_StudentVersion.pde)
---
# 基本概念與通用語法簡介
>這裡介紹的語法不只能在Processing裡使用
>也可以在其他主流的程式語言裡使用，如C++，C#等語言
## 變數
變數是在撰寫程式時一個相當重要的元素，用來儲存資料，而每一個變數代表的是一個記憶體位址，**當我們去更改一個變數的值時，其實就是更改該記憶體位址所儲存的資料**。
### 宣告變數的規則:
+ **只能使用英文字母、底線及阿拉伯數字，且開頭不可為數字**(變數不可包含空格)。
+ **儘量避免無意義的變數**，避免在程式碼長、變數多的情況下忘記變數代表的意義。
+ **變數前面一定要有資料型別**，因為倘若沒有資料型別，則電腦將不知以何種形式將資料儲存起來。
+ **大小寫不同則為不同變數** 如SHE，shE，She為不同的變數。
----
## 基本資料型態
+ int :即整數(*integer*)，一般用來儲存**32位元**沒有小數點的有號整數。
+ float:浮點數(*floating number*)，一般用來儲存**32位元**有小數點的有號數。
+ double:倍精度浮點數，也是儲存有小數點的數字，與float的差別在於double可以存更多位數(**64位元**)。
+ char : 此種資料型態是用來儲存「字元(*character*)」，對資訊工程而言是相當重要的資料型別，然而在這次Processing的教學中並不會用到，同學若是有興趣，可以自行搜尋相關資料。
若以上面三種數字資料型態儲存圓周率，那麼int所儲存的資料便是3，而float則會存入3.14159，double則是3.1415926258......
```clike=
int Pi_int = 3;
float Pi_float = 3.14159;
double Pi_double = 3.1415926258‧‧‧‧‧‧9;
char example = 's'; //println(example) will show "s" in the message area
```
>以上數據僅是示意，讓各位同學更清楚float與double的差別。
[更多與資料型別相關內容(外部網站)](http://programming.im.ncnu.edu.tw/Chapter5.htm)
----
## if-else 語法
>***如果...就...不然的話就...***
>當於不同情況時 做不同的事時，就需要這樣的語法
+ 語法一:
```clike=
if(條件判斷)
{
//要做的事
}
```
此語法的意思如下:
倘若**if後面()裡的條件成立**那麼就會執行其**大括號{}裡的程式碼**，但如果條件不成立，程式就會直接跳過那個大括號繼續往下執行。
+ 語法二
```clike=
if(條件判斷)
{
//要做的事1
}
else
{
//要做的事2
}
```
此語法if的部分與語法一相同，不同的部分在於，如果if()裡的條件不成立，則程式就會執行else後面大括號裡的程式碼( ***注意!! 如果if()裡的條件成立，則不會執行else後面大括號裡的程式碼!!*** )
+ 語法三
```clike=
if(條件判斷1)
{
//要做的事1
}
else if(條件判斷2)
{
//要做的事2
}
else
{
//要做的事3
}
```
語法三與前面的兩個語法並沒有什麼差別，**條件1**滿足時執行**要做的事1**，**條件2**滿足時執行**要做的事2**，兩者都不滿足時則執行**要做的事3**。
當我有**更多條件時，我可以再插入一些 else if(條件x)** 來滿足我的需求，所以不管有多少種狀況，都是可以用這個語法完成的。
或許會有一些同學感到疑惑，接在if後面的括號裡的條件判斷到底是什麼東西呢?
我們先來了解一些符號([關係運算子、邏輯運算子](http://www.kaiching.org/2010/06/c-operator.html#3))所代表的意義。
這些符號都可以用來描述所謂的條件，而if-else語法則是使程式在滿足特定條件的情況下執行特定的行為，圖中可以看到部分符號與數學是相同的，在此就不做贅述，以下會介紹圖中不常使用的符號
+ 等於
- 在程式語言中，**單一個等號的意義為指定(assign)**，即把等號右邊的資料存到等號左邊的東西(通常為變數)。因此邏輯上的等於(如數字大小一樣)則用兩個等號作為語法，假設有兩個整數a,b
```clike=
if(a==b)
{
//要做的事
}
```
當a與b相等時，才會執行裡面的程式碼。
+ 且
- 「&&」是邏輯上的且，其左右分別是不同的條件，**兩個條件都要滿足**，才會執行，以if()語法為例，假設有兩個int(整數) a,b
```clike=
if( a==1 && b==5 )
{
//要做的事
}
```
只有a是1，而且b是5這兩件事 ***同時發生*** 的時候才會執行裡面的程式碼。
+ 或
- 「||」是邏輯上的或(按住鍵盤上的 "**shift**" 和"**enter上面的斜線**"就可以打出此符號)，其左右也是兩個不同的條件，然而與「且」不同的是，只要**其中一個條件滿足**，就會執行，以if()語法為例，假設有兩個int(整數)a,b
```clike=
if( a==1 || b==5)
{
//要做的事
}
```
「a是1」或「b是5」只要其中一個條件滿足就會執行裡面的程式碼。
----
## 重複
>有些時候我們希望程式可以"**重複**"做一件事
>而for迴圈與while迴圈兩種語法可以幫我們處理這件事
>以下將介紹這兩個語法
### for迴圈
for迴圈語法如下:
for(起始條件;執行條件;條件更新)
{
//要重複做的事
}
光看這樣的寫法同學們可能不太好理解，以下附上一些簡單的程式碼:
```clike=
int i;
for(i=0;i<10;i++)
{
//要重複做的事
}
```
+ i=0
「i=0」即是所謂的起始條件，也就是說程式第一次執行到這行時會將i設為1。
+ i<10
「i<10」為執行條件，意思是每當程式執行到for()這行時，若i<10時就會進入此迴圈執行裡面的程式碼。
+ i++
「i++」即是條件更新，也就是當程式碼執行至for()這行時i會存入i+1，ex:當i為0時，執行到這條程式碼時，i就會更新為1(各位同學要小心" + + i " 跟" i + + "是不同的語法!!)。
所以這串程式碼在執行到for()時可以這樣解釋:
+ 第一輪: i初始化為0，接著比較條件，倘若i<10，則進入迴圈執行程式碼，並且將i加上1，否則跳出迴圈。
+ 第二輪: 此時i為1(上一輪+1)，接著與執行條件做比對，然後再加上1。
以此類推，所以這個迴圈在i到10以後就會結束，而且i是從0開始，也就是說當i為0,1,2,......,9時都會執行，所以這串執行碼一共會執行10次。
----
### while迴圈
>語法簡單
>不知道要重複幾次時使用
>初學者觀念若不好容易出錯
while迴圈的語法跟for迴圈相比簡單許多，前面我們學過的for迴圈有一個執行條件，與條件更新，所以這個for迴圈會執行幾次在我們撰寫的當下就已經了解了，但有時候我們並不確定要重複幾次，這個時候就可以使用while語法。
```clke=
while(終止條件)
{
//要重複做的事
}
```
在滿足條件以前會重複執行，***直到滿足條件為止***，所以在**要重複做的事**裡應該要包含**條件更新**，以避免陷入死迴圈，倘若各位將來還有寫程式的機會，請謹記這點。
## [Photocap(修圖軟體)換頭](https://hackmd.io/OwRgJgzAnGCmAsBaEBWAbAJkfEBjYiARgGZhiJi64oAcVGGIsAhkA===#)
Sign in with Wallet
Connect another wallet