世界上最短的时钟代码

一.简介

Processing.js作者是John Resig，这是继Jquery之后，他的第二个力作。

Processing.js提供了教学可视化的编程语言及运行环境。通过编写processing程序，教师可以将复杂的物理、化学、数学原理形象的展示给学生。比如绘制各种曲线图，波线，粒子，绘制分子结构，当然在生理卫生课上还可以绘制一群小蝌蚪在游泳等动态的图形。

Processing.js是一个开放的编程语言，在不使用Flash或Java小程序的前提下, 可以实现程序图像、动画和互动的应用。 
Processing.js使用JavaScript绘制形状sharp和操作HTML5 canvas元素产生图像动画。 
Processing.js是轻量，易于了解掌握，并提出一个理想的工具，可视化的数据，创建用户界面和开发基于Web的游戏。

 

 

二.核心函数

01 // Global variables 全局变量
02 int radius = 50.0;
03 int X, Y;
04 int nX, nY;
05 int delay = 16;
06  
07 // Setup the Processing Canvas初始化设置
08 void setup(){
09   size( 200, 200 );
10   strokeWeight( 10 );
11   frameRate( 15 );
12   X = width / 2;
13   Y = width / 2;
14   nX = X;
15   nY = Y; 
16 }
17  
18 // Main draw loop 主要绘画函数功能
19 void draw(){
20    
21   radius = radius + sin( frameCount / 4 );
22    
23   // Track circle to new destination
24   X+=(nX-X)/delay;
25   Y+=(nY-Y)/delay;
26    
27   // Fill canvas grey
28   background( 100 );
29    
30   // Set fill-color to blue
31   fill( 0, 121, 184 );
32    
33   // Set stroke-color white
34   stroke(255);
35    
36   // Draw circle
37   ellipse( X, Y, radius, radius );                 
38 }
39  
40  
41 // Set circle's next destination 当用户鼠标在 Canvas移动时产生的action
42 void mouseMoved(){
43   nX = mouseX;
44   nY = mouseY; 
45 }

 

 

三.世界最短的时钟代码诞生

1 void draw() {
2   size(200, 200);background(0); fill(80); noStroke(); ellipse(100, 100, 160, 160); stroke(255);
3   line(100, 100, cos( TWO_PI*second()/60- HALF_PI) * 70 + 100, sin(TWO_PI*second()/60- HALF_PI) * 70 + 100);
4   line(100, 100, cos( TWO_PI*minute()/60- HALF_PI) * 60 + 100, sin(TWO_PI*minute()/60- HALF_PI) * 60 + 100);
5   line(100, 100, cos(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100, sin(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100);
6 }

可以看得出，代码语意化非常强，一个圆，三条线，这也是这个框架所要达到的目的之一。

 

 

四.完整代码

view sourceprint?
01 <!DOCTYPE html>
02 <html>
03 <head>
04     <body>
05      <script src="https://files.cnblogs.com/iamzhanglei/processing.js" type="text/javascript"></script>
06         <script type="application/processing">
07 void draw() {
08   size(200, 200);background(0); fill(80); noStroke(); ellipse(100, 100, 160, 160); stroke(255);
09   line(100, 100, cos( TWO_PI*second()/60- HALF_PI) * 70 + 100, sin(TWO_PI*second()/60- HALF_PI) * 70 + 100);
10   line(100, 100, cos( TWO_PI*minute()/60- HALF_PI) * 60 + 100, sin(TWO_PI*minute()/60- HALF_PI) * 60 + 100);
11   line(100, 100, cos(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100, sin(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100);
12 }
13         </script>
14         <canvas>你的浏览器不支持HTML5,请使用谷歌、IE9或者火狐浏览器··</canvas>
15     </body>
16 </html>

 

 

转载自：http://www.cnblogs.com/iamzhanglei/archive/2011/10/16/2213846.html

posted @ 2011-10-17 00:46  煋火  阅读(243)  评论(0)    收藏  举报