javascript - 官方30行js比赛：30行js你能做出什么？

Question

国外社区的30行js小比赛是不是让你按捺不住 跃跃欲试了呢骚年！ 你的机会来了~
由 segmentfault 主办的
30行 原生javascript 编程比赛
等待你狂拽酷炫吊炸天的效果

1. 我们推荐使用 jsfiddle.net runjs.cn 在线编辑器，将代码链接贴在本贴下即可
2. 比赛的评比标准是 社区小伙伴们的投票数；代码行数在30行左右
3. 比赛时间为期两周
4. 奖项设置，我们为得赞数目最高的前三名同学准备神秘的小奖品以及SF的纪念T恤
5. 当然你也可以简短的给自己的作品设计一下 slogan，简单阐述你的创意
6. 活动过程中，有发现任何作弊和抄袭代码的行为，将会被取消评选资格

最新提示：得票最高前三名用户将分别获得又拍云提供的1000元代金券！前五名将获得SF的纪念T恤！

骚年们，准备好了嘛？等你来挑战！！！

---

范例：

30行JavaScript代码（仅975字节）写出的一个功能完整的递归光线跟踪程序

http://jsfiddle.net/vz5aZ/2/

Answer 1

竟然没有笛卡尔的心型线？
我来一个哈哈……

翡翠心：
http://jsfiddle.net/ibigbug/C6Qb2/

Answer 2

我也不知道我写出来的这是什么！。。。
偷了楼上＠animabear不少代码。。。

http://jsfiddle.net/windwhinny/9KQKV/13/

Answer 3

用canvas写了个简单的类似进度条的效果，这个其实是源于阿里实习面试实习的一道题目，让我用canvas实现一个动态的渐变的圆环进度条，当时没答好，后台实习的时候和mentor交流了一下，说要应用到画布旋转。这里写的还不算是渐变，只是随机生成颜色，绘制得也不够平滑，先写个雏形在这里放着，之后再改进。大牛们如果有啥想指导的请尽管提出~请输入链接描述

感谢@qpwoeiru96同学的提示，根据他的代码我做了少许修改，以下是渐变进度条的最终形态：

请输入链接描述

又写了个类似的东西，但是结果不是我想要的，我也不知道这是什么产物了....
请输入链接描述

Answer 4

http://jsfiddle.net/skyinlayer/9pD7V/

3d的一个色子旋转，鼠标悬停会自己转动，在空白位置拖拽鼠标也可以自由转动，来打个酱油学习学习，各位have fun :-D

Answer 5

现丑了～模拟手机联系人列表

http://jsfiddle.net/54tPb/2/

可以提交多个答案？好吧我来补一个A*演示
好吧- -#……我知道我压缩的有点过分了，不求点赞只求交流哈哈，另外说一下这不是最优解

http://jsfiddle.net/LXVMj/

Answer 6

撕裂图片
http://jsfiddle.net/hXWBF/4/

Answer 7

潜水学生党，菊苣们轻喷
http://jsfiddle.net/aresyz/rEg56/2/

Answer 8

http://jsfiddle.net/NJp6w/1/

Answer 9

再来一个可爱的LOADING

http://jsfiddle.net/pandamicro/hjLce/1/

Answer 10

var bezier=function(begin,c1,c2,end,t){
    var p={x:0,y:0};
    p.x=begin.x*(1-t)*(1-t)*(1-t)+c1.x*3*t*(1-t)*(1-t)+c2.x*3*t*t*(1-t)+end.x*t*t*t
    p.y=begin.y*(1-t)*(1-t)*(1-t)+c1.y*3*t*(1-t)*(1-t)+c2.y*3*t*t*(1-t)+end.y*t*t*t
    return p;
 }

我上一个三次贝塞尔的简单原始算法，t取值从0到1即可画出完整的曲线。