Processing 筆記 （九）- 定義函數

1. 除了 processing 內建的的函數（可稱為 method 或 function）之外，使用者也可自行定義之。其定義需包含三要項：(1) 回傳模式 (2) 函數名稱 (3) 引數。

2. 以下面程式碼為例（圓心碰到左右兩邊則改變圓的移動方向）：

// 宣告變數

int x = 0;
int speed = 1;

void setup(){
  size(200, 200);
  smooth(); // 柔化邊緣
}

void draw(){
  background(255); // 背景為白色
  x= x + speed;
 
// 若 x 大於呈像螢幕寬度或小於 0時，則轉向
  if((x > width) || (x < 0)){
    speed = speed * -1;
  }
 
  stroke (0); //線條為黑色
  fill(175); // 內部為灰色
  ellipse(x, 100, 32, 32); // 圓心的 x 位置為變數而可移動
}


3. 上例可以藉由自行定義函數，來重新更改程式的架構。


int x = 0;
int speed = 1;

void setup(){
  size (200, 200);
  smooth();
}

// 呼叫自行定義的三個函數 move(), bounce(), 與 display()
void draw(){
  background(255);
  move();
  bounce();
  display();
}

//定義 move() 函數
void move(){
  x = x + speed;
}

//定義 bounce() 函數
void bounce(){
  if ((x > width) || (x < 0)){
    speed = speed * -1;}
}

//定義 display() 函數
void display(){
  background(255);
  stroke(0);
  fill(175);
  ellipse(x, 100, 32, 32);
  }

Processing 筆記 （八）- 影片播放

import processing.video.*; //導入 video 程式庫
Movie movie; //宣告 Movie 物件

void setup(){
  size(320, 240, P2D);
// 設定呈像螢幕大小，P2D表示使用快速2D算圖
  movie = new Movie(this, "bball.mov");
/* 初始化 movie 物件，並導入影片檔，其中 this 指主程式類別 */
  movie.loop();
}

void movieEvent(Movie movie){
//讓 quicktime movie 通知 Processing 有一個畫格已經準備好可以被播放
  movie.read();
/* 由 Movie 類別中呼叫 read() 函數，以便讀入當前畫格資料至 Movie 類別中，準備呈像 */
}

void draw(){
  image(movie, 0, 0);
// 將當前的畫格按照指定的左上角座標，繪製到呈像視窗
}

Processing 筆記（七）- 顯示圖片

1. PImage 類別（class）用來處理圖片的顯示與縮放，可在程式中的任何地方宣告 Pimage 物件，通常最好置於程式碼頂端。
2. PImage 宣告完成之後，可使用 loadImage( ) 函數來載入檔案。loadImage( )函數之引數設定，可以是系統檔案夾中的圖片，也可以是網址。圖檔必須置於程式碼同一個檔案夾，或置於 processing 主程式檔案夾。
3. image( ) 函數需與 loadImage( ) 一起使用，其用法為 image(PImage變數名稱, x座標, y 座標）或  image(PImage變數名稱, x座標, y 座標, 寬度, 長度）。其中座標是指圖形之左上角所在位置。

PImage img; //宣告 PImage變數為 img

void setup(){

  size(400, 400); // 指定呈像視窗大小

  img = loadImage("test.jpg"); // 將圖檔載入

  image(img,0,0); // 決定要顯現的圖檔與其左上角座標

}

Processing 筆記 （六）- 鍵盤顯示

1. 欲瞭解使用者在電腦鍵盤上是否按下按鍵、是否鍵入文字，可運用 keyPressed 變數於 draw( ) 函數中。例如：


void draw(){
  if(keyPressed){ //若按下鍵盤的鍵
    print(" you pressed "+key+"\n"); // 則印出 you pressed 按鍵名稱並換行顯示
  }
}

2. Processing 也定義了 keyPressed(), mousePressed(), mouseMove()函數，可以設計上面的相似範例，此時，所有相關程式碼必須寫在 keyPressed ()函數中。例如：

void draw(){}
void keyPressed(){
  print("\n you are pressing a key \n that key is "+key);  /*當按下按鍵時，換行顯示" "中的文字與按鍵的名稱 */
}

3. Java 語言註解的方式有兩種：(1) // 記號開始，至該行結。(2) /* 與 */這兩個符號間所夾的文字。

Processing 筆記 （五）- 滑鼠拖移之互動

mouseDragged( ) 用來偵測何時滑鼠左鍵被按下，且滑鼠被移動。
範例一：藉由滑鼠拖曳來畫線


int lastX = 0; // 宣告 lastX, lastY 變數，作為滑鼠最初壓下左鍵的座標數值
int lastY = 0;

void setup( ) {
  size(400, 400); // 設定版面大小
}

void draw( ) {
  lastX = mouseX;  //將 lastX, lastY 設為滑鼠初始位置
  lastY = mouseY;
}

void mouseDragged( ) {
  line(lastX, lastY, mouseX, mouseY);
// 以滑鼠初始位置與放開左鍵時的位置為兩端，畫直線
}

範例二：作用同第一個範例，為藉由滑鼠拖曳來畫線的第二種版本

int lastX = 0;

int lastY = 0;

void setup( ) {

  size(400, 400);

}

void draw( ){} 

void mouseDragged( ) {

  line(pmouseX, pmouseY, mouseX, mouseY); 

/* 利用 pmouseX, pmouseY 表示前一個畫格的滑鼠位置，搭配當前位置 mouseX, mouseY 畫線 */

}

Processing 筆記（四）- 滑鼠按鍵互動

1. mouseX 與 mouseY 為當前的滑屬位置，text(顯示的文字, 滑鼠位置x, 滑鼠位置 y ) 可用來設定文字，以及其出現在畫面的位置。

範例：以文字顯示滑鼠位置

Pfont arial;

void setup( ) {
   size(300, 300)
   arial = createFont("Arial", 32);
   // 定義 arial 為系統中的 Arial 字型
   textfont(arial, 15);
  // 設定字形
}

void draw( ) {
   background(0);
   // 將背景設為黑色，以便清除之前的文字
   text(" position is "+mouseX+ " "+mouseY", mouseX, mouseY);
   // 以文字 position is 顯示當前滑鼠座標
}

2. mousePressed( ) 物件可用來將按下滑鼠左鍵的動作與欲觸發的事件相連結。其必須配合 draw( ) 的使用才能運作。

範例：繪製一個方形，並利用滑鼠的 x 座標決定方形填色時的 alpha 數值。滑鼠越偏右方，alpha 數值越大。每當滑鼠按下時，便分行印出其所在位置的 x 值。

int alphaValue = 0;


void setup() {
    size(350, 300);
    background(0xFFFFFFFF);
}

void draw() {
    background(0xFFFFFFFF); // 背景顏色設定成白
    fill(255, 0, 0, alphaValue); //填入紅色
    rect(100, 100, 100, 100); // 繪製方形
}

void mousePressed( ){
   print(mouseX + "\n"); // 換行印出滑鼠的 x 座標
   alphaValue = mouseX; // 以滑鼠位置之 x 值決定 alpha 數值
}

Processing 筆記 （三）- 直線、弧線、封閉區間

1. line(x1, y1, x2, y2) 可用來畫 2D 中的直線。line (x1, y1, z1, x2, y2, z2) 可用來畫 3D 中的線，但須在此物件被移動過後，才可看得出其與 2D 直線之不同。
2. stroke( ) 可用來設定直線的顏色，用法跟 fill( ) 類似，strokeWeight( ) 則用來設定線的厚度。例如：

void draw( ){
    stroke(0xFFCCFF00); // 設定線條顏色為黃
    strokeWeight(5); // 將線條厚度設定為 5 個像素
    line (0, 100, 600, 400);
    line(600, 400, 300, 0);
    line(300, 0, 0, 100);
}
   
3. curve( ) 用來畫曲線，2D 中使用 curve (x1, y1, x2, y2, x3, y3, x3, y4)，3D 中使用 curve (x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)。其中，x1, y1, z1 為第一個曲線的軸心點 (anchor poitn)，曲線朝向其彎曲的第一個點；x3, y3, z3 為曲線的起點；x4, y4, z4 為第二個曲線的軸心點；亦即曲線朝向其彎曲的第二個點。

範例：以滑鼠位置影響曲線的方向

void setup() {
   size(400, 400);
}

void draw(){
   background(255); // 白色背景
   fill(0); // 黑色內部
   int xVal = mouseX*3-100; // 滑鼠位置決定 anchor point
   int yVal = mouseY*3-100;
   curve(xVal, yVal, 100, 100, 100, 300, xVal, yVal);
   curve(xVal, yVal, 100, 300, 300, 300, xVal, yVal);
   curve(xVal, yVal, 300, 300, 300, 100, xVal, yVal);
   curve(xVal, yVal, 300, 100, 100, 100, xVal, yVal);
}

4. vertex 為兩調線的交會處，例如三角形的頂點、星形的角等。在 processing 中可使用三個或更多個頂點連結成一個封閉區間，其內部可以填色或不填色。所用的物件 (method) 為 beginShape( ) 與 endShape( )，兩者之間以 vertex( ) 鍵入頂點座標，所設的頂點會自動相連。


範例：以滑鼠決定三角形的第三個角的位置

void setup( ) {
    size(400, 400);
}

void draw( ){
    background(255); //黑色背景
    fill(0); // 白色封閉區間
    beginShape();
    vertex(0,0);
    vertex(400, 400);
    vertex(mouseX, mouseY);
    endShape();
}

Processing 筆記 （二） - 顏色

1. Processing 中的顏色表示方式有兩種，分別為 RGB (0~255) 及十六進位系統。一般情況多用 RGB 方式表示，但用於網頁 HTML 時，則需使用十六進位系統。RGB 表示法中，例如 0xFFFF0000，此10 個由左而右的數字中， 0x 字頭表示使用十六進位系統，FF 表示 alpha 數值，更右的 FF 表示 Red，00 表示 Green，更右的 00 表示 Blue。

定義白色的程式碼：
int r = 255;
int g = 255;
int b = 255;
color (r, g, b);

定義黑色的程式碼：
int r = 255;
int g = 255;
int b = 255;
color (r, g, b);

2. fill( ) 用來填充顏色，具有 overloaded 的用法，亦即同樣一個 method，當賦予不同參數時，可使其處理不同的情況。fill( ) 的各種情況如下所列：

fill (int gray) ==> 填入的有理數為 0 時為黑， 255 為白。
fill (int gray, int alpha) ==> 同上，但加入 alpha 數值（0 為透明，255為不透明）。
fill (int value1, int value2, int value3) ==> 填入 RGB 數值。
fill (int value1, int value2, int value3, int alpha) ==> 填入 RGB 與 alpha 數值。
fill (color, color) ==> 可填入顏色變數。例如：
       void draw(){
            color c = color(200, 0, 0)
            fill (c);
            rect(0, 0, 100, 100);
       }

fill (color color, int alpha) ==> 呈上，上例還可以再加入 alpha 數值。如：
            color c = color(200, 0, 0);
            fill(c, 150);

fill (int hex) 與 fill (int hex, int alpha) ==> 前者不含 alpha 數值，Processing 要求十六進位的顏色表示法之字頭以 0x 表示；後者含 alpha 數值， Processing 要求十六進位的顏色表示法之字頭以 # 後面接六位數來表示。

3. background ( ) 用來設定背景顏色，其 overloaded 用法如同 fill ( )。background ( ) 常被用來清除現有的畫面。

Processing 筆記 （一）- 畫圓

1. Sketch 為 processing 的程式碼名稱(等同 Max/MSP/Jitter 中的 patch)。

2. Control + k 可開啟 sketch 所存的檔案夾。

3. Export 按鍵可用來將 processing 的程式碼與相關檔案存成獨立的 applet。

4. setup()用來確保之後要執行的程式之準備工作皆已完備。例如設定影像的大小（以像素為單位）、畫格速率等。

5. Java 程式設計的function 指一群程式碼集合之名稱，其跟變數相似之處在於其有名稱與類型，但跟變數不同之處在於 function 還能操控變數。換句話說，function 包含啟始的變數輸入、結束時結果的輸出。若 function 為某物件的一部分，通常被稱為 method，以「物件名稱.函數」的方式被呼叫。function 與 method 兩者之差別，僅在於語義上的差別。

6.frameRate()用來設定每秒鐘 draw()要被呼叫的次數。

7. print() 用來將程式的訊息顯示在 Processing IDE(Integrated Development Environment)下方的 Console Window 視窗中。

8. ellipse()用來畫橢圓或圓，例如 ellipse(150,150, x, y)前兩項為圓心，x、y 則決定是否為橢圓，若 x=Y 則為圓形。

9. x = x+2 可表示成 x += 2。下例中，每次 draw() 被呼叫時， x 植便增加2。

10. rect (x, y, width, height) 前兩項為方形的左上角位置。ellipse(x, y, width, height) 的前兩項則為圓心位置。

11. line (x1, y1, x2, y2) 可用來畫直線，前兩項表示直線起點位置，後兩項表示直線終點位置。

12. 繪圖過程中，後下的繪圖指令會覆蓋先下的繪圖指令所畫出的圖形。



同心圓動畫的範例：

int x = 0;
void setup() {
   size(300, 300);
   frameRate(30);
}

void draw() {
   x += 2 ;
   ellipse(150, 150, x, x);
   if(x>300){
      x = 0;
   }
}