您的位置: 首页  >  IT文章  >  世界下最短的时钟代码！更短的，有木有

世界下最短的时钟代码！更短的，有木有

分类: IT文章 • 2024-11-04 16:52:55
世界上最短的时钟代码！更短的，有木有？

一.简介 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的游戏。

 

 

二.核心函数

JavaScript Code复制内容到剪贴板
  1. // Global variables 全局变量  
  2. int radius = 50.0;  
  3. int X, Y;  
  4. int nX, nY;  
  5. int delay = 16;  
  6. // Setup the Processing Canvas初始化设置  
  7. void setup(){  
  8.   size( 200, 200 );  
  9.   strokeWeight( 10 );  
  10.   frameRate( 15 );  
  11.   X = width / 2;  
  12.   Y = width / 2;  
  13.   nX = X;  
  14.   nY = Y;   
  15. }  
  16. // Main draw loop 主要绘画函数功能  
  17. void draw(){  
  18.   radius = radius + sin( frameCount / 4 );  
  19.   // Track circle to new destination  
  20.   X+=(nX-X)/delay;  
  21.   Y+=(nY-Y)/delay;  
  22.   // Fill canvas grey  
  23.   background( 100 );  
  24.   // Set fill-color to blue  
  25.   fill( 0, 121, 184 );  
  26.   // Set stroke-color white  
  27.   stroke(255);  
  28.   // Draw circle  
  29.   ellipse( X, Y, radius, radius );                   
  30. }  
  31. // Set circle's next destination 当用户鼠标在 Canvas移动时产生的action  
  32. void mouseMoved(){  
  33.   nX = mouseX;  
  34.   nY = mouseY;   
  35. }  

 

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

JavaScript Code复制内容到剪贴板
  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. }  

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

 

 

四.完整代码

XML/HTML Code复制内容到剪贴板
  1. 01  
  2. <!DOCTYPE html>  
  3. <html>  
  4. <head>  
  5. <body>  
  6. <script src="http://files.cnblogs.com/iamzhanglei/processing.js" type="text/javascript"></script>  
  7. <script type="application/processing">  
  8. void draw() {  
  9. size(200, 200);background(0); fill(80); noStroke(); ellipse(100, 100, 160, 160); stroke(255);  
  10. line(100, 100, cos( TWO_PI*second()/60- HALF_PI) * 70 + 100, sin(TWO_PI*second()/60- HALF_PI) * 70 + 100);  
  11. line(100, 100, cos( TWO_PI*minute()/60- HALF_PI) * 60 + 100, sin(TWO_PI*minute()/60- HALF_PI) * 60 + 100);  
  12. line(100, 100, cos(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100, sin(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100);  
  13. }  
  14. </script>  
  15. <canvas>你的浏览器不支持HTML5,请使用谷歌、IE9或者火狐浏览器··</canvas>  
  16. </body>  
  17. </html> 

相关推荐