搜索:
首页 >> JavaScript >> Js高级编程 >> javascript 版 Bad Apple 字符动画

javascript 版 Bad Apple 字符动画

2010-1-28 作者:阿伍 来源:51js 投递文章

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

Tags:apple  动画  JavaScript 
相关文章
手机版 Js高级编程 Asp之家 Aspxhome.com
闽ICP备06017341号