javascript 版 Bad Apple 字符动画
作者:阿伍 来源:51js 时间:2010-01-28 12:19:00
前一段时间,一个流行的东方系列mv 《bad apple》 带来一股奇怪的风潮: 各种技术狂人纷纷把这段mv在一些匪夷所思的地方重现出来。目前知道的版本有:Excel 版、Word版、命令行版(多种语言)、War3地图版… 等等。(不知道东方系列的请百度 东方project)
花了点时间搞了js的, 字符版本。 速度目前还可以,兼容所有浏览器(吧…)
因为js没法操作2进制,所以视频的编码是用as3解析出来的,呵呵。
一、获取视频编码
这是最重要的一步,没有源,其他东西就无从谈起。
虽然as3有flv播放器,不过为了节省时间,我直接创建了一个fla,把flv拖进去转换为了swf动画。
之后如代码所示,用bitmapdata每隔一段时间将swf的像素捕捉出来。这里设置了跳帧处理,否则生成的文件将很巨大。
这个mv基本由黑白色组成,还有少量灰色。为了简化数据体积,以及之后的压缩算法,必须将其过滤为黑白两色。这个判断很简单,只要判断每个像素是否大于0x888888即可。
private function onEnterFrame(e: Event): void
{
var t: int = getTimer();
if(t > startTime && t < endTime)
{
if(this.pointer ++ < this.waitFrame)
{
return;
}
else
{
this.pointer = 0;
}
this.bmd.draw(loader );
this.bmp.bitmapData = bmd;
outPut();
}
// this.bmd.draw(source, matrix, colorTransform, blendMode, clipRect, smoothing)
}
private function outPut(): void
{
var d: String = "";
for(var h: int = 0;h < this.bmd.height; h ++)
{
for(var w: int = 0;w < this.bmd.width; w ++)
{
d += this.bmd.getPixel(w, h ) > 0x888888 ? "1":"0";
}
d += "n";
}
this.dataArr.push(d );
trace("解码完成,共获得 " + this.dataArr .length + " 帧" );
}
二、javascript播放
得到源,就很好办了。我们现在有很多办法可以让这堆数字动起来,不过最快的方式,应该还是纯字符。
所以我用css简单调节了一下,然后编写一段简单的js脚本让一个div不断刷新文本,即实现了动画。
三、压缩
现在可以播放了,效果流畅,ie6下cpu占用只有20%左右。但是我发现10秒的动画就需要3M的数据文件。很明显若完整复刻长达3分38秒的bad apple 是需要特别压缩的。
但是js没有2进制压缩,所以只能依靠取巧的办法了。 思考了下,决定采用封包形式,即头+身的结构。这也是2进制里常用的方式。
压缩后的动画数据大大降低了,虽然远不及2进制压缩,不过估计也是纯文本压缩的极限了吧。
目前完整还原3分38秒的动画数据大小为2M多点,可以接受范围。
整个过程大约消耗了3小时,重新温习了js,收获了快乐。
------ 1月24号 ------
今天多谢编程浪子提供新的思路,让影片数据的体积下降一半左右。(2.16M -> 1.09M @ 分辨率 90*63)
之前的压缩格式:[长度]_[值] [长度]_[值] [长度]_[值] …
这样的结构,理论上可以支持16灰度,这样可以表现更为优质的画面,并且可以拓展。浪子的思路是放弃多级灰度(实际上,之前的影片也没用上),从而在压缩格式的内部省略了[值]这一部分(和两条分割线)。
本想就此结束的,但今天早上所想到的新压缩算法正好可以在浪子的思路上进行改进。
原本每行都会记录一个回车符(即换行),但其实只需要在头部记录好影片的宽高,那么回车符完全可以动态插入。 去掉回车符并不仅仅只是少了回换行那么简单,这个提升是质的。 因为这让每行都连接起来,段落变少了。
于是,我开始动手修改编码提取器和js播放器,大约1小时后,理论变为现实。 现在的大小再次明显的降低: 1M -> 795k @ 分辨率 90*63)
这时候,可以适当提高分辨率了,因为新算法的压缩比率是越大越明显的。
现在放上 145*104的版本, 视频数据为1.44 M 。 看上去似乎更清楚一点了
附一个测试地址:http://kinkikinki.521066.com/jsMc/test.htm
原始视频: http://www.tudou.com/playlist/playindex.do?lid=7759251
下载地址:Awu_Js_BadApple_NewZip_High.rar.rar (378.69 KB)