注：本文轉載自張磊的部落格
一.簡介
Processing.js作者是John Resig，這是繼Jquery之後，他的第二個力作。
Processing.js提供了教學視覺化的程式語言及執行環境。通過編寫processing程式，教師可以將複雜的物理、化學、數學原理形象的展示給學生。比如繪製各種曲線圖，波線，粒子，繪製分子結構，當然在生理衛生課上還可以繪製一群小蝌蚪在游泳等動態的圖形。
Processing.js是一個開放的程式語言，在不使用Flash或Java小程式的前提下, 可以實現程式影像、動畫和互動的應用。
Processing.js使用JavaScript繪製形狀sharp和操作HTML5 canvas元素產生影像動畫。
Processing.js是輕量，易於瞭解掌握，並提出一個理想的工具，視覺化的資料，建立使用者介面和開發基於Web的遊戲。
二.核心函式
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// Global variables 全域性變數 int radius = 50.0; int X, Y; int nX, nY; nt delay = 16; // Setup the Processing Canvas初始化設定 void setup(){ size( 200, 200 ); strokeWeight( 10 ); frameRate( 15 ); X = width / 2; Y = width / 2; nX = X; nY = Y; } // Main draw loop 主要繪畫函式功能 void draw(){ radius = radius + sin( frameCount / 4 ); // Track circle to new destination X+=(nX-X)/delay; Y+=(nY-Y)/delay; // Fill canvas grey background( 100 ); // Set fill-color to blue fill( 0, 121, 184 ); // Set stroke-color white stroke(255); // Draw circle ellipse( X, Y, radius, radius ); } // Set circle's next destination 當使用者滑鼠在 Canvas移動時產生的action void mouseMoved(){ nX = mouseX; nY = mouseY; } |
三.世界最短的時鐘程式碼誕生
|
1 2 3 |
void draw() { size(200, 200);background(0); fill(80); noStroke(); ellipse(100, 100, 160, 160); stroke(255); line(100, 100, cos( TWO_PI*second()/60- HALF_PI) * 70 + 100, sin(TWO_PI*second()/60- HALF_PI) * 70 + 100); line(100, 100, cos( TWO_PI*minute()/60- HALF_PI) * 60 + 100, sin(TWO_PI*minute()/60- HALF_PI) * 60 + 100); line(100, 100, cos(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100, sin(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100); } |
可以看得出，程式碼語意化非常強，一個圓，三條線，這也是這個框架所要達到的目的之一。
四.完整程式碼
|
1 |
< !DOCTYPE html> < html> < head> < body> < script src="http://files.cnblogs.com/iamzhanglei/processing.js" type="text/javascript"> < script type="application/processing"> void draw() { size(200, 200);background(0); fill(80); noStroke(); ellipse(100, 100, 160, 160); stroke(255); line(100, 100, cos( TWO_PI*second()/60- HALF_PI) * 70 + 100, sin(TWO_PI*second()/60- HALF_PI) * 70 + 100); line(100, 100, cos( TWO_PI*minute()/60- HALF_PI) * 60 + 100, sin(TWO_PI*minute()/60- HALF_PI) * 60 + 100); line(100, 100, cos(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100, sin(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100);} < /script> < canvas>你的瀏覽器不支援HTML5,請使用谷歌、IE9或者火狐瀏覽器··< /canvas> < /body>< /html> |