您的位置：首页 > 编程语言

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

2011-10-17 06:46 344 查看

一.简介

Processing.js作者是JohnResig，这是继Jquery之后，他的第二个力作。
Processing.js提供了教学可视化的编程语言及运行环境。通过编写processing程序，教师可以将复杂的物理、化学、数学原理形象的展示给学生。比如绘制各种曲线图，波线，粒子，绘制分子结构，当然在生理卫生课上还可以绘制一群小蝌蚪在游泳等动态的图形。
Processing.js是一个开放的编程语言，在不使用Flash或Java小程序的前提下,可以实现程序图像、动画和互动的应用。
Processing.js使用JavaScript绘制形状sharp和操作HTML5canvas元素产生图像动画。
Processing.js是轻量，易于了解掌握，并提出一个理想的工具，可视化的数据，创建用户界面和开发基于Web的游戏。


二.核心函数

viewsourceprint?
01
//Globalvariables全局变量
02
intradius=50.0;
03
intX,Y;
04
intnX,nY;
05
intdelay=16;
06
07
//SetuptheProcessingCanvas初始化设置
08
voidsetup(){
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
//Maindrawloop主要绘画函数功能
19
voiddraw(){
20
21
radius=radius+sin(frameCount/4);
22
23
//Trackcircletonewdestination
24
X+=(nX-X)/delay;
25
Y+=(nY-Y)/delay;
26
27
//Fillcanvasgrey
28
background(100);
29
30
//Setfill-colortoblue
31
fill(0,121,184);
32
33
//Setstroke-colorwhite
34
stroke(255);
35
36
//Drawcircle
37
ellipse(X,Y,radius,radius);
38
}
39
40
41
//Setcircle'snextdestination当用户鼠标在Canvas移动时产生的action
42
voidmouseMoved(){
43
nX=mouseX;
44
nY=mouseY;
45
}
三.世界最短的时钟代码诞生
viewsourceprint?
1
voiddraw(){
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
}
可以看得出，代码语意化非常强，一个圆，三条线，这也是这个框架所要达到的目的之一。


四.完整代码
viewsourceprint?
01
<!DOCTYPEhtml>
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"
>
07
voiddraw(){
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或者火狐浏览器··
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航