Hits: 650
Processing的環境架構了解後開始嘗試第一支程式Hello問候。
Hello World程式架構
我們利用Porcessing建立一個畫布，畫布內容產生文字，功能區塊如下：
- 建立300×200視窗
- 指定文字字型、大小
- 使用text()輸出文字內容
- text(文字, x位置, y位置)
PFont f; //宣告字體型態變數
void setup() {
size(300,200); //建立300x200視窗
f = createFont("細明體",16,true); //指定文字字型、大小
}
void draw() {
textFont(f);
fill(255,0,0);
text("Hello World!!", 25, 40); //使用text()輸出文字內容
}
鍵盤事件處理方法
透過鍵盤的操作，可以移動文字顯示的位置，創作一個簡單的互動效果。鍵盤的事件處理方法可以透過變數 “KeyPressed” 或是事件副程式 “KeyPress()” 的呼叫進行處理。
以下範例鍵盤控制方塊移動程式，開啟一個畫布 size(400,400)，並建立一個方塊rect(xPos-25, yPos-25, 50, 50);，利用鍵盤的w, s, a, d 改變 xPos、yPos的座標內容，控制方塊的移動。
Example 1. 透過鍵盤的變數取回鍵盤事件
int xPos=200, yPos=200;
void setup() {
size(400, 400);
smooth();
}
void draw() {
background(204);
//比對keyPressed的變數內是否為 w, s, a, d
if (keyPressed) {
if (key == 'w') { //當w鍵盤觸發，Y座標-5
yPos -= 5;
}
if (key == 's') { //當s鍵盤觸發，Y座標+5
yPos += 5;
}
if (key == 'a') { //當a鍵盤觸發，X座標-5
xPos -= 5;
}
if (key == 'd') { //當w鍵盤觸發，X座標+5
xPos += 5;
}
}
rect(xPos-25, yPos-25, 50, 50);
delay(100);
}
Example 2. 透過鍵盤事件的副程式變更 X、Y座標
改寫 example 1. 鍵盤按下時，CPU會主動進入 keyPressed()副程式，因此將X座標、Y座標的處理方式變更至副程式 keyPressed()內處理。
int xPos=200, yPos=200;
void setup() {
size(400, 400);
smooth();
}
void draw() {
background(204);
rect(xPos-25, yPos-25, 50, 50);
}
//當鍵盤按下時，鍵盤事件主動進入副程式 keyPressed()
void keyPressed(){
if (key == 'w') { //當w鍵盤觸發，Y座標-5
yPos -= 5;
}
if (key == 's') { //當s鍵盤觸發，Y座標+5
yPos += 5;
}
if (key == 'a') { //當a鍵盤觸發，X座標-5
xPos -= 5;
}
if (key == 'd') { //當w鍵盤觸發，X座標+5
xPos += 5;
}
}
example 1. 與 example 2.執行結果如下畫面，透過鍵盤觸發改變方塊的位置。