一.簡介 Processing.js作者是John Resig，這是繼Jquery之後，他的第二個力作。 Processing.js提供了教學可視化的編程語言及運行環境。通過編寫processing程式，教師可以將複雜的物理、化學、數學原理形象的展示給學生。比如繪製各種曲線圖，波線，粒子，繪製分子結 ...
一.簡介
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 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
// 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;
}
|
三.世界最短的時鐘代碼誕生
| 1 2 3 4 5 6 |
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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!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>
|
五.線上演示
