专栏首页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或者火狐浏览器··##

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

我来说两句

0 条评论
登录 后参与评论

相关文章

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

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

    IMWeb前端团队
  • CSS StickyFooter——当内容不足一屏时footer紧贴底部

    一般来说我们的footer是跟着内容走的,所以当内容较少不足一屏的时候,footer也会跟着内容往上走,导致下面一段空白。所以这里我们来探讨下当内容不足一屏时f...

    IMWeb前端团队
  • VS Code 初上手

    我 2012 年开始接触前端,从最开始的记事本,到 Dreamweaver ,到 notepad++ ,到风头一时无两的 Sublime Text ,到现在社区...

    IMWeb前端团队
  • 世界上最短的时钟代码!更短的,有木有?

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

    IMWeb前端团队
  • linux下cat显示中间几行内容

    cat filename | tail -n +100 从100行开始显示,显示100行以后的所有行

    week
  • Unity项目中文字的统一管理

    一款游戏在研发初期就需要考虑多语言的问题,否则后期在进行多国语言版本时就面临着巨大的成本。鉴于之前页游的经验,其它同事设计出读取Excel的方式来管理所有的文字...

    meteoric
  • 赶走那些Android工程中得冗余字符串

    Android提供了一套很方便的进行资源(语言)国际化机制,为了更好地支持多语言,很多工程的翻译往往会放到类似crowdin这样的平台上。资源是全了,但是还是会...

    技术小黑屋
  • 注解笔记

    @RequestMapping(value="/testRequestHeader")

    阮键
  • Github点赞接近100k的SpringBoot学习教程+实战推荐!牛批!

    很明显的一个现象,除了一些老项目,现在 Java 后端项目基本都是基于 Spring Boot 进行开发,毕竟它这么好用以及天然微服务友好。不夸张的说,Spri...

    Guide哥
  • 超强数据科学专用notebook神仙平台:多语言+多人协作,颜值能打又好用!

    除了大火的Python,一名合格的数据科学家会随时在R、Bash、Julia等语言中自由切换。并且,当前的数据科学工作无法一个人单打独斗完成,常常需要团队协作。

    大数据文摘

扫码关注云+社区

领取腾讯云代金券