世界上最短的時鐘代碼！更短的，有木有？
2011-10-16 09:15 【當耐特】 閱讀(15965) 評論(46) 收藏 舉報一.簡介
Processing.js作者是John Resig，這是繼Jquery之后，他的第二個力作。
Processing.js提供了教學可視化的編程語言及運行環境。通過編寫processing程序，教師可以將復雜的物理、化學、數學原理形象的展示給學生。比如繪制各種曲線圖，波線，粒子，繪制分子結構，當然在生理衛生課上還可以繪制一群小蝌蚪在游泳等動態的圖形。
Processing.js是一個開放的編程語言，在不使用Flash或Java小程序的前提下, 可以實現程序圖像、動畫和互動的應用。
Processing.js使用JavaScript繪制形狀sharp和操作HTML5 canvas元素產生圖像動畫。
Processing.js是輕量，易于了解掌握，并提出一個理想的工具，可視化的數據，創建用戶界面和開發基于Web的游戲。
二.核心函數
// 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;
}
三.世界最短的時鐘代碼誕生
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);
}
可以看得出，代碼語意化非常強，一個圓，三條線，這也是這個框架所要達到的目的之一。
四.完整代碼
<!DOCTYPE html>
<html>
<head>
<body>
<script src="https://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>
五.在線演示
六.同步
本文已同步更新至：
浙公網安備 33010602011771號