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

本文作者:IMWeb 黎腾 原文出处:IMWeb社区 未经同意,禁止转载

一.简介

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;
int 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>
<scripttype="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,请使用谷歌、IE9或者火狐浏览器··## 六.同步

本文已同步更新至:

HTML5实验室【目录】: http://www.cnblogs.com/iamzhanglei/archive/2011/11/06/2237870.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏芋道源码1024

Java 动态代理及 RPC 框架介绍

来源:frapples.github.io/articles/2018-03-30-4a97.html

7920
来自专栏Lemon黄

PHP设计模式——迭代模式

作为商店经理,Eric的工作包括检修各个部门的产品。商店中实际上有两个部门。一个部门称为男士部门,该部门存放男性用品,另一个部门称为女士部门的女性用品。每个部门...

8530
来自专栏贾志刚-OpenCV学堂

Mat基本元素的表达与读写

早期的OpenCV使用IplImage和CvMat数据结构来表示图像。OpenCV 2.0引入了C++类Mat来管理图像数据(矩阵)。

9140
来自专栏码匠的流水账

聊聊rocketmq的AccessChannel

rocketmq-client-4.5.2-sources.jar!/org/apache/rocketmq/client/AccessChannel.java

6000
来自专栏小L的魔法馆

关联容器小结

关联容器和顺序容器的根本不同之处在于,关联容器中的元素是按关键字来保存和访问的(比如map和set),而顺序容器中的元素是按照在容器中的位置来顺序保存和访问的(...

4810
来自专栏前端资源

Eclipse IDE没有Server选项,安装及配置Tomcat的解决方法

今天尝试修改 Java 项目,在使用 Eclipse 时没有服务器软件,不能运行项目,安装 Tomcat 后还是找不到服务器软件。

8910
来自专栏JavaQ

【每天一道面试题】说一下ThreadLocal原理及会不会发生内存泄漏

ThreadLocal的实现原理是每一个Thread维护一个ThreadLocalMap映射表,映射表的key是ThreadLocal实例,并且使用的是Thre...

9820
来自专栏前端资源

Javascript操作将session资料存入window.name里

查了一些资料,大家一致认为除了 Node.js 和服务端,在 JavaScript 里没有 session 这种东西(或者说很不常见),所有的变数,函式等等的资...

9110
来自专栏全栈修炼

浏览器之 javaScript 引擎

而【WebKit 技术内幕】是基于 WebKit 的 Chromium 项目的讲解。

9240
来自专栏Java那些事

详解Java中创建线程的四种方式

在 Java 后端开发的面试中,我们经常被问到这样的一道题目:Java 中创建线程的方式有哪些?我们知道 Java 使用 Thread 类代表线程,所有的线程对...

8820

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励