世界上最短的时钟代码

　　 注：本文转载自张磊的博客

　　 一.简介

　　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;
　　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;  
   }

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

代码:

　　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="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>

　　

　　　-------------------------------------------------------------------
　　你可能对以下文章也感兴趣

　　 我是如何学习计算机编程的
　　 “品质在于构建过程”吗？
　　 HTML5 开发者需要了解的技巧和工具汇总
　　 10个Web开发设计相关资源博客推荐
　　 移动应用程序开发工具和平台精选
　　 C语言之父辞世引发“分号”悼念
　　
　　--------------------------------------------------