javascript 版 Bad Apple 字符动画

前一段时间，一个流行的东方系列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）