Sea Level Measurement Device Design Competition
海平面量度裝置設計比賽
Software development environment
軟件開發環境
The environment we use in this workshop is Processing,
a programming environment for manipulating images, animations, and interactions.
It is cross-platform and can run on the OS X, Windows, and Linux.
It integrates with the programming languages Java and JavaScript,
and can be deployed as Java applications,
on the web with HTML5 and WebGL support,
or as Android applications.
Those interested in using the techniques covered in this workshop can
visit its web site
to download Processing as well as to go through its Tutorials section for tutorials and demos.
本工作坊所採用的軟件開發環境為Processing。
它是個跨平台的軟件開發環境，可在 OS X，Windows，和 Linux 運行，用作處理圖像，動畫和人機互動設計。
它利用 Java 和 JavaScript 的編程語言，可產生出獨立運作的 Java 應用程式、在支援 HTML5 和 WebGL 的瀏覽器上使用的網頁、或 Android 應用程式。
對此工作坊內容有興趣的話，可到它的網站下載該軟件及在其 Tutorials 頁看教程和示範。
Introduction
概論
One way to find the sea level is to take direct reading of a yardstick partially immersed in the sea.
This can be simulated by using a camera or video camera as eye, and computer as brain.
測量海平面，可以直接看半浸在海中的尺的刻度。
這可以用電腦模擬，以相機或攝錄機代眼，電腦程式代腦。
Brief descriptions of the sample code
示範源碼之簡要說明
Comments in the source code gives explanations to features illustrated in the code.
源碼內的註釋解釋該源碼所示範的功能。
- Basics01
- The smallest functional Processing program.
最小而可用的 Processing 程式。
- Basics02
- The use of println() and print().
如何用 println() 和 print()。
- Basics03
- size() and background().
size() 和 background().
- Basics04
- Coloured background and text().
有色的背景和 text() 的運用。
- Basics05
- Variable, "for" loop, and expressions.
變數、"for" 廻環和算式。
- Basics06
- Global variable and textSize().
變數和 textSize().
- Basics07
- Array and loops.
陣列和廻環。
- Basics08
- More array and loops.
更多的陣列和廻環。
- Capture01
- Basic use of the Capture class. The program just displays whatever is captured on the screen.
Capture class 的使用。程式只將從網絡相機頡取的東西顯示出來。
- Capture02
- Use of captureEvent() for reading frames.
利用 captureEvent() 來頡取影片的話影像。
- Capture03
- Illustrates the use of loadPixels(), set() and updatePixels().
演示如何使用 loadPixels(), set(), 和 updatePixels()。
- Capture04
- Illustrates the use of pixels[] array for display image and Capture object.
演示使用 pixels[] 陣列來顯示影像和 Capture 所代表的畫面。
- Image01
- Use of loadImage() and background() to load and display an image.
利用 loadImage() 和 background() 來顯示圖片。
- Image02
- loadPixels(), mouseX and mouseY.
loadPixels(), mouseX 和 mouseY。
- Image03
- The conditional "if" construct and brightness().
"if" 條件句和 brightness()。
- Image04
- Summing up the brightness values of a vertical line of pixels in an image.
將圖片一直行的像素的光度值加起來。
- Mouse01
- The two variables mouseX and mouseY.
mouseX 和 mouseY 兩個變數。
- Mouse02
- Functions that are call when mouse motion or button state change.
鼠標移動或按鍵時所呼叫的函數。
- Photos
- Some photos for the examples.
一些例子用的相片。
