一.簡介
Processing.JS作者是John Resig，這是繼Jquery之後，他的第二個力作。
Processing.JS提供了教學可視化的編程語言及運行環境。通過編寫processing程序，教師可以將復雜的物理、化學、數學原理形象的展示給學生。比如繪制各種曲線圖，波線，粒子，繪制分子結構，當然在生理衛生課上還可以繪制一群小蝌蚪在游泳等動態的圖形。
Processing.JS是一個開放的編程語言，在不使用Flash或Java小程序的前提下, 可以實現程序圖像、動畫和互動的應用。
Processing.JS使用JavaScript繪制形狀sharp和操作Html5 canvas元素產生圖像動畫。
Processing.JS是輕量，易於了解掌握，並提出一個理想的工具，可視化的數據，創建用戶界面和開發基於Web的游戲。
二.核心函數
JavaScript Code復制內容到剪貼板
- // Global variables 全局變量
- int radius = 50.0;
- int X, Y;
- int nX, nY;
- int 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;
- }
三.世界最短的時鐘代碼誕生
JavaScript Code復制內容到剪貼板
- 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);
- }
可以看得出，代碼語意化非常強，一個圓，三條線，這也是這個框架所要達到的目的之一。
四.完整代碼
XML/Html Code復制內容到剪貼板
- 01
- <!DOCTYPE Html>
- <Html>
- <head>
- <body>
- <script src="http://files.cnblogs.com/iamzhanglei/processing.JS" type="text/Javascript"></script>
- <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>