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

最新推荐文章于 2021-03-03 13:54:35 发布

iteye_9770

最新推荐文章于 2021-03-03 13:54:35 发布

阅读量207

点赞数

文章标签： javascript java ViewUI

一.简介

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> 
 
<html>  
 
<head>  
 
<body>  
 
<script src="http://files.cnblogs.com/iamzhanglei/processing.js" type="text/javascript"></script>  
 
<script type="application/processing">  
 
    07void 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);  
 
    12} 
 
</script>  
 
<canvas>你的浏览器不支持HTML5,请使用谷歌、IE9或者火狐浏览器··</canvas>  
 
</body>  
 
</html>

五.在线演示

<canvas>你的浏览器不支持HTML5,请使用谷歌、IE9或者火狐浏览器··</canvas>

iteye_9770

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
世界上最短的时钟代码！更短的，有木有？

一.简介Processing.js作者是John Resig，这是继Jquery之后，他的第二个力作。Processing.js提供了教学可视化的编程语言及运行环境。通过编写processing程序，教师可以将复杂的物理、化学、数学原理形象的展示给学生。比如绘制各种曲线图，波线，粒子，绘制分子结构，当然在生理卫生课上还可以绘制一群小蝌蚪在游泳等动态的图形。Processing.js是一个开...
复制链接

扫一扫