首席技术执行官CTO(Chief Technology Officer)|技术总监--邓斌博客

研究移动互联网最前沿的思想,技术和模式| 服务器运维与网站架构|人因梦想而伟大|追求卓越 享受过程 引领IT新时代…… ...

世界上最短的时钟代码!更短的,有木有?

 

一.简介

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

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

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

 

 

二.核心函数

01// Global variables 全局变量
02int radius = 50.0;
03int X, Y;
04int nX, nY;
05int delay = 16;
06  
07// Setup the Processing Canvas初始化设置
08void 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 主要绘画函数功能
19void 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
42void mouseMoved(){
43  nX = mouseX;
44  nY = mouseY;  
45}

 

 

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

1void 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}

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

 

 

四.完整代码

01<!DOCTYPE html>
02<html>
03<head>
04    <body>
05     <script src="http://files.cnblogs.com/iamzhanglei/processing.js" type="text/javascript"></script>
06        <script type="application/processing">
07void 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>

 

 

 

五.在线演示

你的浏览器不支持HTML5,请使用谷歌、IE9或者火狐浏览器··
阅读更多
个人分类: CSS/js/JavaScript
想对作者说点什么? 我来说一句

卸载神器啊

2017年10月23日 1008KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭