Mandelbrot 1k

最近发现了一个有趣的代码竞赛 JS1k,规则是用 1KB 以内的 JS 写出最炫酷的东西。第一届在 2010 举办,一年一度,至今仍在开展。

1KB 的代码能写出什么来?举个例子,今年的冠军是一颗炫酷的 罗马花椰菜 ,只用了 1023 个字节,大家可以去随意感受一下。

比赛要求提交一个 JS 脚本,满足如下规则:

  • 至多 1024 字节;
  • 严禁 引用外部资源;
  • 能在现代浏览器中运行;
  • 允许代码压缩或者 hack。
  • 另外,为了方便起见,内置全局变量:
    • a 是一个占满屏幕的 canvas 元素;
    • bdocument.body
    • ca 的 2d 上下文;
    • ddocument
    • ga 的 WebGL 上下文。

主要规则就这么多。它让我想起了年轻时刚学会写代码,总是追求短小而 hacky 的代码,以让别人读不懂为荣;而现在处处追求工程美感。好比人吃惯了正常饭菜,却总想着再尝一下儿时路边酸酸的野草莓。

2016 年的比赛早已结束,2017 年的还未开始,所以我下面做的事情纯属自娱自乐。之前画过一个 Mandelbrot 集,你若在 CodePen 上搜索关键字“Mandelbrot”,它至今仍排在首位。它的最大特色在于,用户可以选中 Mandelbrot 集的一部分来查看它的细节,而这个过程可以无限重复下去。

See the Pen Mandelbrot by Zhou Qi (@handsomeone) on CodePen.

看一下它的资源文件大小,JS 将近 6KB,选框的样式表约有 1KB。这些有可能被压缩到 1KB 以内吗?试试才知道。

首先删功能:规则不允许引用外部资源,那么先删掉 dat.GUI 控件相关代码。没有了控件,色彩配置也没意义了,删掉。其次,改写面向对象的代码为过程式的。再然后,取消所有变量声明关键字,全部使用全局变量,并且,每个变量只用一个字母。最后,能删的空白符删掉,for 循环里的语句能省则省,大括号能去就去。

让我们来看看结果……嗯不错,978 个字符。以前的我看到这种代码一定会高兴地去模仿吧。

压缩已经到极限了吗?还没有。在学习“罗马花椰菜”的源代码的时候,发现了一个专为此竞赛开发的压缩工具:RegPack。它能识别代码中的重复模式,接着进行我不懂但是很厉害的 Huffman 编码,就把 978 个字节的“源代码”压缩成了 845 个字节。

关于结果,请移步 JS Bin 查看。它的操作跟原版稍有区别,复位坐标改成了双击,放大仍然是拖拽画框。

6 条评论

  1. 你猜我是谁说道:

    帅气哇,看的如痴如醉!好玩!

  2. yc's friend说道:

    “而这个过程可以无限重复下去”放大到最后都变成彩色方块了,因为存储变量的精度有限……我过去写的程序也有类似的情况。

  3. 淘小众说道:

    好厉害,开眼界了

  4. 小可爱说道:

    已阅

发表评论

电子邮件地址不会被公开。 必填项已用*标注